Using React Webcam to capture and display images

The React Webcam package makes it easy for developers to capture and display images in React applications.

In this blog, we’ll walk you through the process of building a React Webcam component and adding various features, such as the retake button and mirror functionality. We’ll also see how to adjust the screenshot format and quality.

Jump ahead:

• Potential use cases for webcam functionality
• Setting up the React Webcam project
• Building a React Webcam component
• Adding image capture functionality
• Creating a function for retaking photos
• Implementing a mirror feature
• Adjusting a screenshot’s format and quality

By the end of this guide, you’ll have a solid understanding of the features the react-webcam package provides and how to use them effectively.

Let’s get started!

Potential use cases for webcam functionality

Webcam functionality is a widely used feature in modern web applications. It allows users to capture images or record videos directly from their web browsers. Here are some potential use cases or project types that might need to include webcam functionality:

• Video conferencing apps
• Social media platforms
• Virtual try-on applications
• Healthcare apps

Video conferencing apps have become more important than ever for remote work and virtual meetings in modern businesses. These apps rely heavily on webcam functionality to allow users to participate in virtual meetings, conferences, and interviews.

Social media platforms often include webcam functionality to allow users to take pictures or record videos directly from their webcam. This functionality is useful for creating content quickly and easily without the need for additional equipment.

With the rise of virtual try-on technology, many ecommerce websites and fashion apps now offer customers the ability to see how products look on them or in their living spaces before making a purchase.

Healthcare apps are another area where webcam functionality is often used. Video consultations with doctors and remote patient monitoring are just a few examples of how webcams are used in the healthcare industry.

Overall, there are countless project types and use cases that can benefit from webcam functionality, and the React Webcam library provides an easy and efficient way to incorporate this functionality into your web applications.

Setting up the React Webcam project

In this section, we will go through the steps needed to set up the project and get it ready for building the React Webcam component.

Cloning the starter code

Open your terminal or command prompt and navigate to the directory where you want to clone the project. Then, run the following command to clone the project:

git clone https://github.com/rishipurwar1/react-webcam.git

Installing dependencies

After cloning the project, navigate to the project directory by running this command:

cd react-webcam

Then, run the following command to install the dependencies:

npm install

Installing the React Webcam package

Finally, to use React Webcam, you will need to install the package by running the following command:

npm i react-webcam

With these steps, you have successfully set up your project and installed the necessary dependencies and packages. You are now ready to build your React Webcam component! 🚀

Building a React Webcam component

Now that you have set up the project, it’s time to build the React Webcam component.

The first step is to create a new file in the src folder named CustomWebcam.js. In this file, import the Webcam component from the react-webcam package:

import Webcam from "react-webcam";

Next, create a CustomWebcam functional component and render the Webcam component inside it using the following code:

import Webcam from "react-webcam";

const CustomWebcam = () => {
  return (
    <div className="container">
      <Webcam height={600} width={600} />
    </div>
  );
};

export default CustomWebcam;

Finally, render the CustomWebcam component in the App.js file:

import "./App.css";
import CustomWebcam from "./CustomWebcam"; // import it

const App = () => {
  return (
    <div className="App">
      <CustomWebcam />
    </div>
  );
};

export default App;

Now, when you run your application, you should see a video stream of your webcam in the browser window.

Adding image capture functionality

The next step is to add image capture functionality to the CustomWebcam component. First, add a reference to the Webcam component in the CustomWebcam component using the useRef Hook. This will allow us to access the webcam instance and take a screenshot:

import Webcam from "react-webcam";
import { useRef } from "react"; // import useRef

const CustomWebcam = () => {
  const webcamRef = useRef(null); // create a webcam reference

  return (
    <div className="container">
      <Webcam height={600} width={600} ref={webcamRef} />
    </div>
  );
};

export default CustomWebcam;

Then, create a state variable named imgSrc that will store the image data after a screenshot has been taken:

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

const CustomWebcam = () => {
  const webcamRef = useRef(null);
  const [imgSrc, setImgSrc] = useState(null); // initialize it

  return (
    // rest of the code
  );
};

Next, let’s create a function named capture that will capture a screenshot by calling the getScreenshot method on a Webcam component reference.

This function returns a base64 encoded string of the current webcam image. In this function, we also need to call the setImgSrc function to update the imgSrc state variable with the captured image data:

import Webcam from "react-webcam";
import { useCallback, useRef, useState } from "react"; // import useCallback

const CustomWebcam = () => {
  const webcamRef = useRef(null);
  const [imgSrc, setImgSrc] = useState(null);

  // create a capture function
  const capture = useCallback(() => {
    const imageSrc = webcamRef.current.getScreenshot();
    setImgSrc(imageSrc);
  }, [webcamRef]);

  return (
    // rest of the code
  );
};

Finally, add a button to the component that will trigger the capture function when it is clicked and then display the captured image conditionally. If the imgSrc state variable is not null, the image will be displayed; otherwise, the webcam will be shown:

// all the imports

const CustomWebcam = () => {
  // code

  return (
    <div className="container">
      {imgSrc ? (
        <img src={imgSrc} alt="webcam" />
      ) : (
        <Webcam height={600} width={600} ref={webcamRef} />
      )}
      <div className="btn-container">
        <button onClick={capture}>Capture photo</button>
      </div>
    </div>
  );
};

export default CustomWebcam;

With these changes, you should now be able to capture an image from the webcam and display it in the browser window. 🎉

Creating a function for retaking photos

In this section, we will add the retake button functionality to our React Webcam app. First, we need to create a retake function that will be called when the user clicks the “Retake photo” button. This function will simply set the imgSrc state back to null, thus showing the webcam again:

const CustomWebcam = () => {
  // code
  const retake = () => {
    setImgSrc(null);
  };

  return (
    // code
  );
};

Next, we will need to conditionally render the “Capture photo” or “Retake photo” button based on the value of imgSrc. If imgSrc is null, the “Capture photo” button will be displayed. Otherwise, the “Retake photo” button will be displayed. Your final code should look like this:

const CustomWebcam = () => {
  // code
  return (
    <div className="container">
      {imgSrc ? (
        <img src={imgSrc} alt="webcam" />
      ) : (
        <Webcam height={600} width={600} ref={webcamRef} />
      )}
      <div className="btn-container">
        {imgSrc ? (
          <button onClick={retake}>Retake photo</button>
        ) : (
          <button onClick={capture}>Capture photo</button>
        )}
      </div>
    </div>
  );
};

With these changes, we have successfully implemented functionality for a “Retake photo” button in our React Webcam app.

Implementing a mirror feature

In this section, we will add the mirror feature to our React Webcam app. This feature will allow the user to flip the video stream horizontally, creating a mirror image.

To implement this mirror feature, we will utilize the mirrored prop provided by the react-webcam package in the Webcam component.

First, we need to declare a new state variable, mirrored, and set it to false. This variable will be used to store the value of the checkbox and determine whether the video stream should be mirrored or not:

const CustomWebcam = () => {
  const [mirrored, setMirrored] = useState(false);
  // code
  return (
    // JSX code
  );
};

Next, we will pass the mirrored state variable to the mirrored prop in the Webcam component, to control the mirroring of the video stream:

const CustomWebcam = () => {
  // code
  return (
    <div className="container">
      {imgSrc ? (
        <img src={imgSrc} alt="webcam" />
      ) : (
        <Webcam height={600} width={600} ref={webcamRef} mirrored={mirrored} />
      )}
      // code
    </div>
  );
};

After that, we need to add a checkbox that will allow the user to toggle the mirror functionality. The checked prop of the input checkbox is set to the value of the mirrored state variable, and the onChange event is used to update the value of mirrored state variable whenever the checkbox is checked or unchecked:

const CustomWebcam = () => {
  // code
  return (
    <div className="container">
      {imgSrc ? (
        <img src={imgSrc} alt="webcam" />
      ) : (
        <Webcam height={600} width={600} ref={webcamRef} mirrored={mirrored} />
      )}
      <div className="controls">
        <div>
          <input
            type="checkbox"
            checked={mirrored}
            onChange={(e) => setMirrored(e.target.checked)}
          />
          <label>Mirror</label>
        </div>
      </div>
      <div className="btn-container">
          // code
      </div>
    </div>
  );
};

With this, we have successfully implemented the mirror functionality in our React Webcam app.

Adjusting a screenshot’s format and quality

In this section, we’ll explore how to change the format and quality of a captured screenshot using the react-webcam package. This package offers two more props, screenshotFormat and screenshotQuality, to customize the screenshot.

The screenshotFormat prop allows us to specify the format of the screenshot. The possible values for this prop are image/jpeg, image/png, and image/webp. The default value is image/webp.

The screenshotQuality prop allows us to specify the quality of the screenshot. The possible values for this prop range from 0 to 1, where 1 represents the highest quality. The default value is 0.92.

Here’s an example of how we can use these props in the Webcam component:

const CustomWebcam = () => {
  // code
  return (
    <div className="container">
      {imgSrc ? (
        <img src={imgSrc} alt="webcam" />
      ) : (
        <Webcam
          height={600}
          width={600}
          ref={webcamRef}
          mirrored={mirrored}
          screenshotFormat="image/jpeg"
          screenshotQuality={0.8}
        />
      )}
      // code
    </div>
  );
};

By passing these props to the Webcam component, you can adjust the format and quality of the screenshots as per your preference.

And with that, this blog is complete! I hope you have gained a clear understanding of how to utilize the react-webcam package in your projects and the features it offers.

Conclusion

The react-webcam package provides a simple and easy way to add webcam functionality to your React projects.

In this article, we saw how to set up a project, build a custom webcam component, and implement various functionalities such as retaking photos, mirroring the image, and changing the screenshot’s format and quality.

By using this package, you can easily capture and display images in your projects and also have control over the camera’s functionalities. Whether you want to build a simple webcam-based project or integrate it into a larger application, react-webcam has got you covered.

I hope this blog has provided you with a better understanding of how to use react-webcam in your projects. If you have any questions or feedback, feel free to leave a comment below. Happy coding!