React 网络摄像头设置超时答案

【问题标题】：React Webcam set TimeoutReact 网络摄像头设置超时
【发布时间】：2021-05-14 20:21:36
【问题描述】：

在 React 网络摄像头中，有没有办法检测网络摄像头何时开启？网络摄像头可能需要一些时间才能打开并显示图像。时间似乎在 1 秒到 5 秒之间变化，这可能取决于计算机和网络摄像头的速度。如果用户在网络摄像头准备好之前单击捕获按钮，则不会保存图像字符串。我尝试禁用捕获按钮，然后在 5 秒时禁用 setTimeout()，然后该按钮将被启用，但它不准确。我可以采取不同的方法吗？非常感谢任何帮助。

const videoConstraints = {
  width: 1280,
  height: 720,
  facingMode: "user"
};

const WebcamCapture = () => {
  const webcamRef = React.useRef(null);

  const capture = React.useCallback(
    () => {
      const imageSrc = webcamRef.current.getScreenshot();
    },
    [webcamRef]
  );

  return (
    <>
      <Webcam
        audio={false}
        height={720}
        ref={webcamRef}
        screenshotFormat="image/jpeg"
        width={1280}
        videoConstraints={videoConstraints}
      />
      <button onClick={capture}>Capture photo</button>
    </>
  );
};

我在使用 onUserMedia 时遇到问题。我想在网络摄像头打开时添加一个加载微调器。似乎我必须在我的三元运算符中使用第二个网络摄像头组件才能使用 onUserMedia。它会导致网络摄像头打开和关闭四次。有没有另一种方法可以在不使用两个网络摄像头组件的情况下添加加载微调器？非常感谢任何帮助。

handleUserMedia = () => {
        this.setState({ showLoader: false });
    };

this.state.showLoader ? (
                 <div>
                     <Loader />
                     <p>Starting Camera...</p>
                     <div className="loading-webcam">
                          <Webcam onUserMedia={this.handleUserMedia} />
                     </div>
                 </div>
            ) : (
                 <>
                    <Webcam
                           audio={false}
                           height={365}
                           ref={this.setRef}
                     />
                  </>
             )}

【问题讨论】：

标签： reactjs webcam webcam-capture

【解决方案1】：

我在 React-Webcam 存储库文档中找到了答案。网络摄像头组件有一个 onUserMedia 属性，它使用我将加载设置为 false 的回调。

https://github.com/mozmorris/react-webcam/issues/74

import React, { Component } from 'react';
import Webcam from 'react-webcam';

class App extends Component {
  handleUserMedia = () => {
    this.setState({ loading: false });
  }

  render() {
    return (
      <Webcam
        ref={e => this.webcam = e}
        onUserMedia={this.handleUserMedia}
      />
    );
  }
}

export default App;

【讨论】：

绝对的，我写了关于使用onUserMedia回调的答案，看来你自己找到了解决方案
@OlivierBoissé 想知道您是否可以看看我更新的问题。提前致谢。
如果您没有找到解决方案，您可以在上面看到我的答案

【解决方案2】：

我会使用style 或className 属性在加载相机时隐藏视频元素

render() {
  const display = this.state.loading ? 'none' : 'block';

  return (
    <>
      {this.state.loading && <Loader/>}
      <Webcam
        onUserMedia={this.handleUserMedia}
        style={{display}}
      />
    </>
  ); 
}

【讨论】：

感谢您的所有帮助。这对我有用。