@cliener/react-webcam

React webcam component

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
40Oct 31, 2017Jul 25, 2017Minified + gzip package size for @cliener/react-webcam in KB

Readme

react-webcam

Webcam component for React. See this for browser compatibility.

Installation

npm install @cliener/react-webcam

Demo

https://www.mozmorris.com/react-webcam/examples/ (if demo doesn't work, check browser compatibility and verify browser is using https)

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
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
onFailure function noop callback in case an error happens, no getUserMedia for example

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

License

MIT

Credits

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

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.