Skip to content
TypeScript JavaScript
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
examples Update webpack config Jun 4, 2019
src Prevent resource leaks on constraint changes Feb 7, 2020
.editorconfig Add editor config to follow the rules Nov 18, 2015
.eslintignore Update project config files Jul 25, 2015
.eslintrc Fixup eslint warnings Sep 4, 2019
.gitignore Revert "Removed gitignore" Oct 4, 2017
.npmignore Update project config files Jul 25, 2015
.travis.yml Set node version Jun 4, 2019
LICENSE
Logotype primary.png Upload banner Aug 7, 2018
README.md Add multiple camera example to readme document Jan 30, 2020
jest.config.js Update tests to support typescript Sep 4, 2019
package.json 5.0.0 Jan 28, 2020
tsconfig.json Target es5 compatible output Oct 1, 2019
webpack.config.js Use devtool:sourcemap Oct 28, 2019
yarn.lock Bump handlebars from 4.1.2 to 4.5.3 Dec 28, 2019

README.md

react-webcam

Build Status downloads

Webcam component for React. See this for browser compatibility.

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

Installation

npm install 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 or style

prop type default notes
audio boolean true enable/disable audio
audioConstraints object MediaStreamConstraint(s) for the audio
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:

CodePen demo

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

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>

        ))}
    </>
  );
};

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;"/>

License

MIT

You can’t perform that action at this time.