我是ReactJS的新手，正在尝试构建一个组件。
我想构建一个基本实用程序，其中有一个视频组件可以显示实时网络摄像头提要，并且会有一个捕获按钮，用于将提要的快照捕获并存储到磁盘。我希望它在一个组件中(视频供稿+捕获按钮)
这段代码在浏览器中提供了Feed，但我希望在组件中使用它，
<body>
<div id="container">
<video autoplay="true" id="videoElement">
</video>
</div>
<script>
var video = document.querySelector("#videoElement");
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;
if (navigator.getUserMedia) {
navigator.getUserMedia({video: true}, handleVideo, videoError);
}
function handleVideo(stream) {
video.src = window.URL.createObjectURL(stream);
}
function videoError(e) {}
</script>
</body>
</html>
这可以正常工作，但不是一个组件。
我在reaact js中尝试了以下操作，但不起作用:
<body>
<div id="container">
</div>
<script type="text/jsx">
var MyComponent = React.createClass({
handleVideo: function(stream) {
video.src = window.URL.createObjectURL(stream);
},
videoError: function() {
},
render: function() {
var video = document.querySelector("#videoElement");
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;
if (navigator.getUserMedia) {
navigator.getUserMedia({video: true}, this.handleVideo, this.videoError);
}
return <div>
<video autoplay="true" id="videoElement">
</video>
</div>;
}
});
React.render( <MyComponent />, document.getElementById('container'));
</script>
</body>
错误在handleVideo()中
ReferenceError:未定义视频。
我对错误的理解是
由于video标签位于后面部分(作为返回)，因此它试图在handleVideo函数中的定义之前使用。
我很困惑如何使这项工作。
谢谢!
最佳答案
关于React组件的工作方式，需要了解一些事情。首先根据React docs:
您应将初始化视频元素移至其他生命周期方法，例如componentDidMount，以确保仅初始化一次。
其次，您几乎不需要直接与DOM交互。在这种情况下，我们可以使用组件的内部状态来管理视频流的src属性，以确保仅在流初始化后才更新。
这是一个可能有效的更新组件:
var MyComponent = React.createClass({
getInitialState: function(){
return { videoSrc: null }
},
componentDidMount: function(){
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;
if (navigator.getUserMedia) {
navigator.getUserMedia({video: true}, this.handleVideo, this.videoError);
}
},
handleVideo: function(stream) {
// Update the state, triggering the component to re-render with the correct stream
this.setState({ videoSrc: window.URL.createObjectURL(stream) });
},
videoError: function() {
},
render: function() {
return <div>
<video src={this.state.videoSrc} autoPlay="true" />
</div>;
}
});