如何使用 react js 组件在网页上流式传输网络摄像头提要？

Question

我是 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>

这工作正常，但不是它不是一个组件。

我尝试在 react 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()

参考错误：视频未定义。

我对错误的理解是，

由于视频标签是在后面的部分（作为回报），它试图在 handleVideo 函数中的定义之前使用。 我很困惑如何使这项工作。

谢谢！

Answer 1

关于 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>;
    }
});

Answer 2

答案中发布的一些代码已被弃用，可能不再适用于所有浏览器。
我创建了一个使用最新语法的新 React 应用程序。 它非常简单明了。 我希望它可以帮助某人:)

class AppStreamCam extends React.Component {
  constructor(props) {
    super(props);
    this.streamCamVideo= this.streamCamVideo.bind(this)
  }
  streamCamVideo() {
    var constraints = { audio: true, video: { width: 1280, height: 720 } };
    navigator.mediaDevices
      .getUserMedia(constraints)
      .then(function(mediaStream) {
        var video = document.querySelector("video");

        video.srcObject = mediaStream;
        video.onloadedmetadata = function(e) {
          video.play();
        };
      })
      .catch(function(err) {
        console.log(err.name + ": " + err.message);
      }); // always check for errors at the end.
  }
  render() {
    return (
      <div>
        <div id="container">
          <video autoPlay={true} id="videoElement" controls></video>
        </div>
        <br/>
        <button onClick={this.streamCamVideo}>Start streaming</button>
      </div>
    );
  }
}

这是我关于它的 Medium 文章：
如何创建一个 React 应用程序来流式传输您的网络摄像头 | 基础、初学者

如果有帮助别忘了鼓掌:)

最后，这是工作示例的 github 存储库： Basic-WebCam-Streamer

Answer 3

您的handleVideo方法引用了video ，但您没有在handleVideo可以看到它的任何地方定义该变量。 相反，您在render定义它：

var video = document.querySelector("#videoElement");

所以这是你的第一个问题，但这不是你真正的问题。 您真正的问题是，在 React-land 中，您想避免使用document.anything （ getElementById 、 getByTagAndClassName 、 querySelector等）。 这是因为 React 使用虚拟 DOM，如果您在引用实际 DOM 元素时不小心，这些引用可能会很快变坏（因为虚拟 DOM 在render后替换了实际 DOM）。

解决方案是使用 React 自己的替代技术： refs 。 通过示例更容易解释它们，因此这是使用refs修复的代码：

handleVideo: function(stream) {
    // KEY CHANGE #1
    this.refs.video.src = window.URL.createObjectURL(stream);
},
render: function() {
    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>
        {{/* KEY CHANGE #2 */}}
        <video autoplay="true" id="videoElement" ref="video">
        </video>
    </div>;

换句话说，如果您向render函数中返回的任何元素添加ref="something"属性，则可以通过引用this.refs.something在（React）代码中的任何其他位置引用该元素。

还有其他使用refs （例如，您可以传递一个函数），但这超出了本问题的范围，因此我建议您阅读 React 文档中的refs ：

https://facebook.github.io/react/docs/refs-and-the-dom.html

编辑

正如 Jordan Burnett 的回答所强调的那样，React 和普通 JS DOM 工作之间还有其他重要的区别。 同样，解释所有这些超出了本问题的范围，但我强烈建议您阅读：

https://facebook.github.io/react/docs/react-component.html

学习适当的方法来覆盖以进行 DOM 交互工作（例如，在非 React 组件上绑定事件处理程序）。

Answer 4

您可以使用react-webcam 。 按照下面的链接，它已经有一个“getScreenshot”函数，它从网络摄像头返回当前帧的 base64 编码图片。

https://www.npmjs.com/package/react-webcam

const WebcamCapture = () => {
  const webcamRef = React.useRef(null);
  const [imgSrc, setimgSrc] = React.useState(null);

  const capture = React.useCallback(
    () => {
      const imageSrc = webcamRef.current.getScreenshot();
      setimgSrc(imageSrc);

    },
    [webcamRef,setimgSrc]
  );

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

乐于帮助！

如何使用 react js 组件在网页上流式传输网络摄像头提要？

问题描述

4 个解决方案

解决方案1
12 已采纳 2016-12-13 00:22:59

解决方案2
3 2020-01-03 11:27:31

解决方案3
2 2016-12-13 00:19:56

解决方案4
0 2020-05-30 18:01:48

如何使用 react js 组件在网页上流式传输网络摄像头提要？

问题描述

4 个解决方案

解决方案1 12 已采纳 2016-12-13 00:22:59

解决方案2 3 2020-01-03 11:27:31

解决方案3 2 2016-12-13 00:19:56

解决方案4 0 2020-05-30 18:01:48

解决方案1
12 已采纳 2016-12-13 00:22:59

解决方案2
3 2020-01-03 11:27:31

解决方案3
2 2016-12-13 00:19:56

解决方案4
0 2020-05-30 18:01:48