[英]Reactjs: How to Off and On Webcam in reactjs
The Code below was use to capture Webcam photos.下面的代码用于捕获网络摄像头照片。 Source link is written below https://www.npmjs.com/package/react-webcam
源码链接写在下面https://www.npmjs.com/package/react-webcam
//npm install react-webcam //npm 安装 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.我的问题是:无论如何我可以添加一个按钮来通过 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>
);
}
}
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.我没有使用过 react-webcam,但在我看来你需要做的就是添加一个例如
this.state.webcamEnabled
属性并在<Webcam />
为真时渲染它,而在它为假时不渲染它,然后添加一个按钮来切换该属性。 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>
);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.