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

Question

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

但是，我无法弄清楚如何停止 web 凸轮 stream 和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 />

这两个代码片段都有效，它允许用户启动流/启动他们的麦克风，但是如何使用 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;

演示