javascript - ReactJS - 来自网络摄像头的视频流不起作用
问题描述
我不确定为什么这不起作用。我正在获取相机流并且它正在工作,因为我的相机上有光。
流似乎没有附加。
class VideoOutput extends React.Component {
constructor(props) {
super(props);
this.videoRef = React.createRef();
}
componentDidMount() {
const videoObj = this.videoRef.current;
videoObj.srcObject = this.props.video;
console.log(videoObj);
}
render() {
return <video ref={this.videoRef}></video>;
}
}
class Application extends React.Component {
constructor(props) {
super(props);
this.state = {
video: null
};
this.handleVideoClick = this.handleVideoClick.bind(this);
}
async getVideo() {
const video = await navigator.mediaDevices.getUserMedia({
audio: false,
video: true
});
this.setState({ video });
}
stopVideo() {
this.state.video.getTracks().forEach(track => track.stop());
this.setState({ video: null });
}
handleVideoClick() {
if (this.state.video) {
this.stopVideo();
} else {
this.getVideo();
}
}
render(){
return(
<div>
<button onClick={this.handleVideoClick}>
{this.state.video ? 'Vid On' : 'Vid Off'}
</button>
<div>
{this.state.video ? <VideoOutput video={this.state.video} /> : ''}
</div>
</div>
);
}
}
ReactDOM.render(<Application />, document.getElementById('root'));
此处不起作用的示例: https ://codepen.io/Chenzo/pen/QXXVvr
这似乎对我有用......但我怀疑我错过了一些简单的东西。
解决方案
我怀疑问题是您没有播放视频。设置后尝试添加srcObject
:
videoObj.play();
推荐阅读
- ms-access - 当我在 ACCESS 中运行代码 vba 时消除#Error
- html - CSS 图像的角落不会始终如一地四舍五入。有时他们会,有时他们不会
- rxjs - 使用 rxjs 进行长轮询
- java - 使用 Spring Boot 的 Swing 应用程序
- jquery - 选择除 div 之外的所有元素不适用于 jQuery
- ios - 调用 setWorldOrigin 时子节点不可见?
- java - 测试生产缺乏良好平等的第三方对象的工厂/建造者的最佳方法是什么?
- r - 使用 httr:GET 将 API 中的数据绘制到 tibble
- angular - 在同一个组件中重复 html
- python - 从 IMDB id 列表下载电影海报