如何使用 WebRTC 在 React JSX 中启动和停止网络摄像头流和麦克风？

Question

我已经在我的 ReactJSX 文件中使用了 getUserMedia。我是 ReactJSX 的新手，我已经查看了一些与此相关的 stackoverflow 帖子，但不幸的是，许多现有指令包含一行代码/函数，已被 webRTC 弃用。

但是，我一直无法弄清楚如何在 React JSX 中停止网络摄像头流和麦克风。由于这门语言对我来说很新，有人可以帮助我吗？

这是我在 React JSX 中 return() 标记之前的工作代码

  navigator.mediaDevices.getUserMedia({
      audio: true,
      video: true
    })
    .then(stream => {
      document.getElementById("startstream").srcObject = stream;
    })

这是我必须在 React JSX 中的 return() 标签之后显示和启用摄像头和麦克风的工作代码：

<video id="startstream" autoPlay />

这两个代码 sn-ps 都可以工作，它允许用户启动流/启动他们的麦克风，但是我如何启动和停止网络摄像头/使用 ReactJSX 中的按钮的麦克风？我在网上看到过类似的使用另一种编码语言的东西，但是如果有人代码帮助我让它与 ReactJSX 一起工作，那将不胜感激。

Answer 1

import React from "react";
import "./styles.css";

class WebRTCSample extends React.Component {
  constructor(props) {
    super(props);
    this.state = { localStream: null };
  }

  componentDidMount() {}

  startWebCam = () => {
    const that = this;
    navigator.mediaDevices
      .getUserMedia({
        audio: true,
        video: true
      })
      .then((stream) => {
        that.setState({ localStream: stream });
      });
  };

  stopWebCam = () => {
    this.state.localStream.getTracks().forEach((track) => {
      track.stop();
    });
  };

  render() {
    return (
      <div className="App">
        {/* <h1>Hello GetUserMedia</h1> */}
        {this.state.localStream && (
          <video
            autoPlay
            ref={(video) => {
              if (video) {
                video.srcObject = this.state.localStream;
              }
            }}
            // src={this.state.localStream}
          />
        )}
        <div className="startStopWebCam">
          <button
            className="WebCamButton"
            onClick={this.startWebCam.bind(this)}
          >
            Start
          </button>
          <button className="WebCamButton" onClick={this.stopWebCam.bind(this)}>
            Stop
          </button>
        </div>
      </div>
    );
  }
}

export default WebRTCSample;

DEMO