Skip to content
Branch: master
Clone or download
Latest commit e111c6d Mar 5, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
examples Include external prop-types in example Apr 8, 2018
src Fix for #129 Mar 4, 2019
.babelrc Update to latest Babel. Switch to using preset-env May 21, 2017
.editorconfig
.eslintignore Update project config files Jul 25, 2015
.eslintrc Bump to latest version of eslint & airbnb config. Fixup errors May 20, 2017
.gitignore Revert "Removed gitignore" Oct 4, 2017
.npmignore Update project config files Jul 25, 2015
.travis.yml
LICENSE Create LICENSE Sep 15, 2018
Logotype primary.png
README.md update readme to add workaround for cross-origin iframe issue Jan 15, 2019
package.json Bump version Mar 4, 2019
webpack.config.js
yarn.lock

README.md

react-webcam

npm

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

class Component extends React.Component {
  render() {
    return <Webcam />;
  }
}

Props

prop type default notes
className string '' CSS class of video element
audio boolean true enable/disable audio
height number 480 height of video element
width number 640 width of video element
minScreenshotWidth number min width of screenshot
minScreenshotHeight number min height of screenshot
style object style prop passed to video element
screenshotFormat string 'image/webp' format of screenshot
imageSmoothing boolean true pixel smoothing of the screenshot taken
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
screenshotQuality number 0.92 quality of screenshot(0 to 1)
audioConstraints object MediaStreamConstraint(s) for the audio
videoConstraints object MediaStreamConstraints(s) for the video

Methods

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

class WebcamCapture extends React.Component {
  setRef = webcam => {
    this.webcam = webcam;
  };

  capture = () => {
    const imageSrc = this.webcam.getScreenshot();
  };

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

    return (
      <div>
        <Webcam
          audio={false}
          height={350}
          ref={this.setRef}
          screenshotFormat="image/jpeg"
          width={350}
          videoConstraints={videoConstraints}
        />
        <button onClick={this.capture}>Capture photo</button>
      </div>
    );
  }
}

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

Using in iframes

The Webcam component will fail to load when used inside cross-origin iframes 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

Credits

Many thanks to @cezary for his work on this component.

You can’t perform that action at this time.