react-webcam

You can install react-webcam using npm or yarn.

# with npm
npm install react-webcam

# with yarn
yarn add react-webcam

If you use the mirrored prop, both the preview and the screenshot will be mirrored. To show a mirrored preview but capture a standard (non-mirrored) screenshot, use the mirrored prop for the component and apply a CSS transform to the video element instead:

video {
  transform: scaleX(-1);
}

You can control which camera to use by setting the facingMode within the videoConstraints object.

User/Selfie/forward facing camera:

const videoConstraints = {
  facingMode: "user"
};

Environment/Facing-Out camera:

const videoConstraints = {
  facingMode: { exact: "environment" }
};

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

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

The Webcam component provides a React wrapper around the browser's getUserMedia API to display a video stream and capture screenshots. It can be used as a standard component or with a render prop pattern to access the getScreenshot method.

Render Prop Pattern

To capture screenshots, pass a function as a child to the Webcam component. This function receives a childrenProps object containing the getScreenshot method.

<Webcam>
  {(screenshotProps) => (
    <button onClick={() => console.log(screenshotProps.getScreenshot())}>
      Take Screenshot
    </button>
  )}
</Webcam>

When using the Webcam component inside a cross-origin iframe, newer versions of Chrome (v64+) will block access unless the allow attribute is explicitly set on the <iframe> tag to include camera and microphone permissions.

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

Import the Webcam component and render it within your React application. Note that browsers require the page to be loaded from a secure origin (HTTPS) to access the camera.

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

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

You can access the getScreenshot method by using the render props pattern provided by the Webcam component.

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>
);

Alternatively, you can use a React ref to access the getScreenshot method directly from the component instance.

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>
    </>
  );
};

The getScreenshot method returns a base64 encoded string of the current webcam image. You can optionally pass a dimensions object to specify the output size.

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