We can capture photos in Reactjs using the Webcam package of ReactJs.Photo Capture in React.
Reactjs provides some good tools for Image Capture using You Laptop front camera. Install Reactjs in your system using the below command .
npx create-react-app <appname>
Now Install Webcam Packaging using the below command
// with npm npm install react-webcam // with yarn yarn add react-webcam
Now you can try the below code for Image Capturing .
import React, { useState } from 'react';
import Webcam from "react-webcam";
import {Button} from '@material-ui/core';
const WebcamComponent = () => <Webcam />;
const videoConstraints = {
width: 220,
height: 200,
facingMode: "user"
};
export const WebcamCapture = () => {
const [image,setImage]=useState('');
const webcamRef = React.useRef(null);
const capture = React.useCallback(
() => {
const imageSrc = webcamRef.current.getScreenshot();
setImage(imageSrc)
});
return (
<div className="webcam-container">
<div className="webcam-img">
{image == '' ? <Webcam
audio={false}
height={210}
ref={webcamRef}
screenshotFormat="image/jpeg"
width={210}
videoConstraints={videoConstraints}
/> : <img src={image} />}
</div>
<div className="ImageCam">
{image != '' ?
<Button variant="contained" color="secondary" size="small" onClick={(e) => {
e.preventDefault();
setImage('')
}}
className="webcam-btn">
Retake Image</Button> :
<Button variant="contained" color="secondary" size="small" onClick={(e) => {
e.preventDefault();
capture();
}}
className="webcam-btn">Capture</Button>
}
</div>
</div>
);
};
Now You can the code using http://localhost:3005/
Learn More about this Package from here : https://www.npmjs.com/package/react-webcam
Subscribe to My Programming YouTube Channel Before Downloading the code :
Read our More Articles on React