Arj*_*war 4 javascript webcam html5 video-streaming reactjs
我是reactJS的新手,并试图构建一个组件.
我想构建一个基本实用程序,其中我有一个显示实时网络摄像头源的视频组件,并且会有一个捕获按钮,用于捕获并存储源到磁盘的快照.我希望它在一个组件中(视频输入+捕获按钮)
这段代码在浏览器中流式传输,但我希望它在一个组件中,
<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:未定义视频.
我对错误的理解是,
由于视频标签是后来的部分(作为回报),它试图在handleVideo函数的定义之前使用.我很困惑如何使这项工作.
谢谢!
关于React组件的工作方式,有几点需要了解.首先根据React 文档:
render()函数应该是纯的,这意味着它不会修改组件状态,每次调用时都返回相同的结果,并且它不直接与浏览器交互.
您应该将视频元素初始化为备用生命周期方法,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>;
}
});
| 归档时间： |
|
| 查看次数： |
8924 次 |
| 最近记录： |