Photo Capture in React

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

OTP countdown timer in react

Material UI Table in React

Hide Navbar on Login Page in ReactJs

login form in React with Laravel

Leave a Reply

Your email address will not be published. Required fields are marked *