如何使用 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;

演示