@houshuang/react-webcam

React webcam component

Stats

StarsIssuesVersionUpdatedCreatedSize
@houshuang/react-webcam
0.5.03 years ago4 years agoMinified + gzip package size for @houshuang/react-webcam in KB

Readme

react-webcam

Webcam component for React. See this for browser compatibility.

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
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
audioSource string an array or single ConstrainDOMString(s) specifying the device id
videoSource string an array or single ConstrainDOMString(s) specifying the device id

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.