React 18 Capture Images and Pictures using Webcam Tutorial

Last Updated on March 4, 2024 by Digamber in React JS

In this tutorial, we will be learning about how to capture images or pictures through a webcam via React js application.

We will use the react-webcam library to capture the image from the system’s webcam.

The react-webcam is an excellent yet handy webcam component exclusively developed for React js.

You can add customization of your choice by using its exceptional properties. Not just images, you can also capture video in node using react webcam module.

A webcam is a video camera device that comes integrated with your device.

It helps stream images or video in real-time through a computer network. It is primarily used to transmit pictures over the internet.

In this guide, we will teach you how to implement react-webcam functionality in react app from scratch.

How to Capture Images from System Webcam in React Js

• Step 1: Create React Project
• Step 2: Install React Webcam Package
• Step 3: Install Bootstrap Module
• Step 4: Create Component File
• Step 5: Build Image Capture Feature
• Step 6: Start React Application

Create React Project

To start capturing images in React, you must have a react app. We can invoke the given command to install a brand-new app.

npx create-react-app my-react-app

Use command to go inside the app folder.

cd my-react-app

Install React Webcam Package

You can install the react webcam module by executing the suggested command.

npm install react-webcam --legacy-peer-deps

Install Bootstrap Module

We can install the bootstrap module for rapidly creating the react webcam component.

npm install bootstrap --legacy-peer-deps

Create Component File

You have to create the Profile.js file in the components/ folder. Here in this file we will add the code to build the feature.

import React from 'react'

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

export default Profile

Build Image Capture Feature

Head over to components/Profile.js file, you have to import the Webcam module then invoke the Webcam component to take the picture from computer.

import React, { useState } from 'react'
import Webcam from 'react-webcam'

const WebcamComponent = () => <Webcam />

const videoConstraints = {
  width: 400,
  height: 400,
  facingMode: 'user',
}

const Profile = () => {
  const [picture, setPicture] = useState('')
  const webcamRef = React.useRef(null)

  const capture = React.useCallback(() => {
    const pictureSrc = webcamRef.current.getScreenshot()
    setPicture(pictureSrc)
  })

  return (
    <div>
      <h2 className="mb-5 text-center">
        React Photo Capture using Webcam Examle
      </h2>
      <div>
        {picture == '' ? (
          <Webcam
            audio={false}
            height={400}
            ref={webcamRef}
            width={400}
            screenshotFormat="image/jpeg"
            videoConstraints={videoConstraints}
          />
        ) : (
          <img src={picture} />
        )}
      </div>
      <div>
        {picture != '' ? (
          <button
            onClick={(e) => {
              e.preventDefault()
              setPicture()
            }}
            className="btn btn-primary"
          >
            Retake
          </button>
        ) : (
          <button
            onClick={(e) => {
              e.preventDefault()
              capture()
            }}
            className="btn btn-danger"
          >
            Capture
          </button>
        )}
      </div>
    </div>
  )
}

export default Profile

Update Global Component

Next, move to the global component, open the App.js file here you need to import the Profile component.

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

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

Start React Application

In the last step, you need to start the react application using the given command.

npm start

After the app is started, open the app on the given url.

http://localhost:3000

Conclusion

In this guide, we learned how to take or capture images using the react webcam in React js environment, and we hope this guide has helped you.