How to Capture Pictures with Webcam in React

Throughout this guide, you will learn how to access webcam to capture or click images with React js using react-webcam module.

The react-webcam library offers numerous APIs that allows you to enable the computer’s webcam at the same time let you click the images from the webcam within React environment.

A webcam is a video camera device ideally used to click still images, pictures and also used to stream videos. The popularity of React is increasing rapidly, everybody is willing to learn due to its robustness.

How to Access Webcam to Capture Images with React Js

  • Step 1: Build React App
  • Step 2: Set Up Bootstrap in React
  • Step 3: Install Webcam Library
  • Step 4: Make New Component
  • Step 5: Enable Webcam in React
  • Step 6: Add Component in App.js
  • Step 7: Start React Server

Build React App

First process is to use the following command to install a new react app, then navigate to the app folder.

npx create-react-app react-stack
cd react-stack

Set Up Bootstrap in React

This guide uses the Bootstrap library for creating the UI if you can write custom css then ignore this package.

npm i bootstrap

Install Webcam Library

Execute the suggested command and install the react webcam library through npm registry.

npm i react-webcam

Make New Component

To take the image from webcam we need to create a separate file, hence make the components/Home.js file.

import React from 'react'

function Home() {
  return (
    <div>Home</div>
  )
}

export default Home

Enable Webcam in React

Open the components/Home.js file, here in this file you have to add the given code. Make sure to import and add the Webcam component and the rest of the code.

import React, { useState } from "react";
import Webcam from "react-webcam";

const WebcamComponent = () => <Webcam />;

const option = {
  width: 400,
  height: 400,
  facingMode: "user",
};

const Home = () => {
  const [img, setPicture] = useState("");
  const webcamRef = React.useRef(null);

  const takeImg = React.useCallback(() => {
    const imgSrc = webcamRef.current.getScreenshot();
    setImg(imgSrc);
  });

  return (
    <div>
      <div>
        {img == "" ? (
          <Webcam
            audio={false}
            height={400}
            ref={webcamRef}
            width={400}
            screenshotFormat="image/jpeg"
            videoConstraints={option}
          />
        ) : (
          <img src={img} />
        )}
      </div>
      <div>
        {img != "" ? (
          <button
            onClick={(e) => {
              e.preventDefault();
              setImg();
            }}
            className="btn btn-dark"
          >
            Retake
          </button>
        ) : (
          <button
            onClick={(e) => {
              e.preventDefault();
              takeImg();
            }}
            className="btn btn-primary"
          >
            Click image
          </button>
        )}
      </div>
    </div>
  );
};

export default Home;

Add Component in App.js

You have to import the Home component App.js file in order to show the react webcam component.

import '../node_modules/bootstrap/dist/css/bootstrap.min.css'
import './App.css'
import Home from './components/Home'

export default function App() {
  return (
    <div className="container mt-5">
      <Home />
    </div>
  )
}

Start React Server

You need to lastly execute the given command to test the app, start the app on the browser with given url.

npm start
http://localhost:3000

How to Capture Pictures with Webcam in React

Summary

We created this tutorial, so that we can understand how to access webcam and how to take pictures through webcam in React. Hope this tutorial will help you learn React more deeply.