问题描述
在 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}
/>
</>
)}
解决方法
我在 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;
,
我会在加载相机时使用 style
或 className
属性来隐藏视频元素
render() {
const display = this.state.loading ? 'none' : 'block';
return (
<>
{this.state.loading && <Loader/>}
<Webcam
onUserMedia={this.handleUserMedia}
style={{display}}
/>
</>
);
}