react-webcam

What is react-webcam?

The react-webcam package is a React component that allows you to capture images and videos from your webcam. It provides a simple interface for accessing the webcam and capturing media, making it useful for applications that require user media input.

What are react-webcam's main functionalities?

Capture Image

This feature allows you to capture an image from the webcam. The `getScreenshot` method is used to take a snapshot and return it as a base64-encoded image string.

import React, { useRef, useCallback } from 'react';
import Webcam from 'react-webcam';

const WebcamCapture = () => {
  const webcamRef = useRef(null);

  const capture = useCallback(() => {
    const imageSrc = webcamRef.current.getScreenshot();
    console.log(imageSrc);
  }, [webcamRef]);

  return (
    <div>
      <Webcam
        audio={false}
        ref={webcamRef}
        screenshotFormat="image/jpeg"
      />
      <button onClick={capture}>Capture photo</button>
    </div>
  );
};

export default WebcamCapture;

Capture Video

This feature allows you to capture video from the webcam. The `MediaRecorder` API is used to record the video stream and save it as a Blob, which can then be played back using a video element.

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

const WebcamVideoCapture = () => {
  const webcamRef = useRef(null);
  const [recording, setRecording] = useState(false);
  const [mediaRecorder, setMediaRecorder] = useState(null);
  const [videoUrl, setVideoUrl] = useState(null);

  const startRecording = () => {
    const stream = webcamRef.current.stream;
    const mediaRecorder = new MediaRecorder(stream);
    setMediaRecorder(mediaRecorder);
    mediaRecorder.start();
    setRecording(true);

    mediaRecorder.ondataavailable = (event) => {
      const videoBlob = new Blob([event.data], { type: 'video/webm' });
      const videoUrl = URL.createObjectURL(videoBlob);
      setVideoUrl(videoUrl);
    };
  };

  const stopRecording = () => {
    mediaRecorder.stop();
    setRecording(false);
  };

  return (
    <div>
      <Webcam audio={true} ref={webcamRef} />
      {recording ? (
        <button onClick={stopRecording}>Stop Recording</button>
      ) : (
        <button onClick={startRecording}>Start Recording</button>
      )}
      {videoUrl && <video src={videoUrl} controls />}
    </div>
  );
};

export default WebcamVideoCapture;

Mirror Mode

This feature allows you to enable mirror mode for the webcam feed. Setting the `mirrored` prop to `true` flips the video horizontally, which can be useful for applications like video conferencing.

import React from 'react';
import Webcam from 'react-webcam';

const WebcamMirror = () => {
  return (
    <div>
      <Webcam
        audio={false}
        screenshotFormat="image/jpeg"
        mirrored={true}
      />
    </div>
  );
};

export default WebcamMirror;

Other packages similar to react-webcam

react-camera-pro

react-camera-pro is another React component for capturing images and videos from the webcam. It offers similar functionalities to react-webcam but with a more modern API and additional features like camera switching and video recording with pause/resume capabilities.

react-html5-camera-photo

react-html5-camera-photo is a React component that provides a simple interface for capturing photos using the HTML5 getUserMedia API. It is more focused on photo capture and offers fewer features compared to react-webcam, but it is lightweight and easy to use.

react-webcam-onfido

react-webcam-onfido is a React component specifically designed for capturing webcam images for identity verification purposes. It offers additional features like face detection and image quality checks, making it more specialized compared to the general-purpose react-webcam.

README

react-webcam

DEMO: https://codepen.io/mozmorris/pen/JLZdoP

https://www.npmjs.com/package/react-webcam

Webcam component for React. See http://caniuse.com/#feat=stream for browser compatibility.

Note: Browsers will throw an error if the page is loaded from insecure origin. I.e. Use https.

Installation

# with npm
npm install react-webcam

# with yarn
yarn add react-webcam

Demo

https://codepen.io/mozmorris/pen/JLZdoP

Usage

import React from "react";
import Webcam from "react-webcam";

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

Props

The props here are specific to this component but one can pass any prop to the underlying video tag eg className, style, muted, etc

prop	type	default	notes
audio	boolean	false	enable/disable audio
audioConstraints	object		MediaStreamConstraint(s) for the audio
disablePictureInPicture	boolean	false	disable Picture-in-Picture
forceScreenshotSourceSize	boolean	false	uses size of underlying source video stream (and thus ignores other size related props)
imageSmoothing	boolean	true	pixel smoothing of the screenshot taken
mirrored	boolean	false	show camera preview and get the screenshot mirrored
minScreenshotHeight	number		min height of screenshot
minScreenshotWidth	number		min width of screenshot
onUserMedia	function	noop	callback for when component receives a media stream
onUserMediaError	function	noop	callback for when component can't receive a media stream with MediaStreamError param
screenshotFormat	string	'image/webp'	format of screenshot
screenshotQuality	number	0.92	quality of screenshot(0 to 1)
videoConstraints	object		MediaStreamConstraints(s) for the video

Methods

getScreenshot - Returns a base64 encoded string of the current webcam image. Example:

https://codepen.io/mozmorris/pen/gOOoqpw

You may also pass in an optional dimensions object:

getScreenshot({width: 1920, height: 1080});

The Constraints

We can build a constraints object by passing it to the videoConstraints prop. This gets passed into getUserMedia method. Please take a look at the MDN docs to get an understanding how this works.

https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia https://developer.mozilla.org/en-US/docs/Web/API/Media_Streams_API/Constraints

As an example take a look at this CodePen demo https://codepen.io/mozmorris/pen/GRpEQwK?editors=0010 which shows how to build a custom aspect ratio for the video.

Screenshot (via render props)

const videoConstraints = {
  width: 1280,
  height: 720,
  facingMode: "user"
};

const WebcamCapture = () => (
  <Webcam
    audio={false}
    height={720}
    screenshotFormat="image/jpeg"
    width={1280}
    videoConstraints={videoConstraints}
  >
    {({ getScreenshot }) => (
      <button
        onClick={() => {
          const imageSrc = getScreenshot()
        }}
      >
        Capture photo
      </button>
    )}
  </Webcam>
);

Screenshot (via ref)

const videoConstraints = {
  width: 1280,
  height: 720,
  facingMode: "user"
};

const WebcamCapture = () => {
  const webcamRef = React.useRef(null);
  const capture = React.useCallback(
    () => {
      const imageSrc = webcamRef.current.getScreenshot();
    },
    [webcamRef]
  );
  return (
    <>
      <Webcam
        audio={false}
        height={720}
        ref={webcamRef}
        screenshotFormat="image/jpeg"
        width={1280}
        videoConstraints={videoConstraints}
      />
      <button onClick={capture}>Capture photo</button>
    </>
  );
};

Capturing video

It is posible to capture video with <Webcam /> using the MediaStream Recording API.

You can find an example https://codepen.io/mozmorris/pen/yLYKzyp?editors=0010.

Choosing a camera

User/Selfie/forward facing camera

class WebcamCapture extends React.Component {
  render() {
    const videoConstraints = {
      facingMode: "user"
    };

    return <Webcam videoConstraints={videoConstraints} />;
  }
}

Environment/Facing-Out camera

class WebcamCapture extends React.Component {
  render() {
    const videoConstraints = {
      facingMode: { exact: "environment" }
    };

    return <Webcam videoConstraints={videoConstraints} />;
  }
}

For more information on facingMode, please see the MDN web docs https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackConstraints/facingMode

Show all cameras by deviceId

const WebcamCapture = () => {
  const [deviceId, setDeviceId] = React.useState({});
  const [devices, setDevices] = React.useState([]);

  const handleDevices = React.useCallback(
    mediaDevices =>
      setDevices(mediaDevices.filter(({ kind }) => kind === "videoinput")),
    [setDevices]
  );

  React.useEffect(
    () => {
      navigator.mediaDevices.enumerateDevices().then(handleDevices);
    },
    [handleDevices]
  );

  return (
    <>
      {devices.map((device, key) => (
          <div>
            <Webcam audio={false} videoConstraints={{ deviceId: device.deviceId }} />
            {device.label || `Device ${key + 1}`}
          </div>

        ))}
    </>
  );
};

Recording a stream

https://codepen.io/mozmorris/pen/yLYKzyp?editors=0011

Using within an iframe

The Webcam component will fail to load when used inside a cross-origin iframe in newer version of Chrome (> 64). In order to overcome this security restriction a special allow attribute needs to be added to the iframe tag specifying microphone and camera as the required permissions like in the below example:

<iframe src="https://my-website.com/page-with-webcam" allow="camera; microphone;"/>

Mirrored video but non-mirrored screenshot

Add mirrored prop to the component will make the video and the screenshot be mirrored, but sometimes you need to show a mirrored video but take a non-mirrored screenshot, to accomplish that, you just need to add this CSS to your project:

video {
  transform: scaleX(-1);
}

You can find an example at https://codepen.io/mozmorris/pen/oNygXwz?editors=0110.

License

MIT