Reactjs：如何在Reactjs中关闭和打开网络摄像头

下面的代码用于捕获网络摄像头照片。源链接写在下面

//npm安装react网络摄像头

这是我的问题，当页面加载时，网络摄像头指针立即打开/激活，我认为这是不正确的。 如果 用户不希望立即捕获网络摄像头照片

我的问题是：我是否可以通过reactjs添加一个按钮来打开或关闭网络摄像头。为此，我在下面创建了此按钮，但单击时无法打开相机

 <button onClick={this.setRef}>Turn On/Off Camera</button>

打开/关闭摄像头

这是主要代码

import React from "react";
import ReactDOM from "react-dom";

import Webcam from "react-webcam";
class App extends React.Component {


 setRef = webcam => {
    this.webcam = webcam;
  };

  capture = () => {
    const imageSrc = this.webcam.getScreenshot();
alert(imageSrc);
  };



  render() {
 const videoConstraints = {
      width: 1280,
      height: 720,
      facingMode: "user"
    };

    return (
      <div>
        <Webcam
          audio={false}
          height={350}
          ref={this.setRef}
          screenshotFormat="image/jpeg"
          width={350}
          videoConstraints={videoConstraints}
        /><br />

        <button onClick={this.capture}>Capture and Submit photo</button>
      </div>
    );
  }
}

从“React”导入React；
从“react dom”导入react dom；
从“react Webcam”导入网络摄像头；
类应用程序扩展了React.Component{
setRef=网络摄像头=>{
this.webcam=网络摄像头；
};
捕获=（）=>{
const imageSrc=this.webcam.getScreenshot（）；
警报（imageSrc）；
};
render（）{
常量视频约束={
宽度：1280，
身高：720，
面对模式：“用户”
};
返回(


捕获并提交照片
);
}
}

您的用户会感激您的谨慎

我没有使用react网络摄像头，但在我看来，您所需要做的就是添加一个例如

this.state.webcamabled

属性，当属性为真时渲染

，当属性为假时不渲染，然后添加一个按钮来切换该属性。类似这样的内容（为了简洁起见省略了一些代码）：

类应用程序扩展了React.Component{
enableWebcam=（）=>this.setState（{WebCamabled:true}）；
建造师（道具）{
超级（道具）；
this.state={webcampabled:false}；
}
render（）{
// ...
返回(
{this.state.webcompensable(
) : (
启用网络摄像头
)}
{/* ... */}
);
}
}

它会在导航栏中持续显示视频图标。理想情况下，它也应该隐藏该图标

class App extends React.Component {
  enableWebcam = () => this.setState({ webcamEnabled: true });

  constructor(props) {
    super(props);
    this.state = { webcamEnabled: false };
  }

  render() {
    // ...
    return (
      <div>
        {this.state.webcamEnabled ? (
          <Webcam {...someProps} />
        ) : (
          <button type="button" onClick={this.enableWebcam}>
            Enable webcam
          </button>
        )}
        {/* ... */}
      </div>
    );
  }
}