Reactjs: How to Off and On Webcam in reactjs - 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 e.g. 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>
);
}
}