react-webcam

Webcam component for React. See the can I use this feature site for browser support for media streams in HTML.

Note: Browsers will throw an warning if the page is loaded from insecure origin. i.e. Use https outside of development.

Installation

npm install @chanoch.com/react-webcam

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 screenshotWidth | number | | width of screenshot style | object | | style prop passed to video element screenshotFormat | string | 'image/webp' | format of screenshot onUserMedia | function | noop | callback when component receives a media stream onUserMediaError | function | noop | callback when component cannot receives any media stream width error 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>
    );
  }
}

License

MIT

Credits

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