Reactjs: How to Off and On Webcam in reactjs

Question

The Code below was use to capture Webcam photos. Source link is written below https://www.npmjs.com/package/react-webcam

//npm install react-webcam

Here is my issue, When the Page loads, The Webcam pointer is immediately on/activated and I believe this is not proper. what If the user does not want to capture the webcam photos immediately.

My question is: Is there anyway I can add a button to turn on or off the webcam via reactjs. To this effect, I have created this button below but cannot turn on the Camera when click

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

Here is the main code.

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

Answer 1

Your users will appreciate your discretion!

I haven't used react-webcam, but it looks to me like all you need to do is add an eg this.state.webcamEnabled property and render the <Webcam /> when it's true and not render it when it's false, and then add a button to toggle that property. Something like this (some code elided for brevity):

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