0.5.0 • Published 7 years ago

@houshuang/react-webcam v0.5.0

Weekly downloads
-
License
MIT
Repository
github
Last release
7 years ago

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

proptypedefaultnotes
classNamestring''CSS class of video element
audiobooleantrueenable/disable audio
heightnumber480height of video element
widthnumber640width of video element
styleobjectstyle prop passed to video element
screenshotFormatstring'image/webp'format of screenshot
onUserMediafunctionnoopcallback when component receives a media stream
onUserMediaErrorfunctionnoopcallback when component cannot receives any media stream width error param
audioSourcestringan array or single ConstrainDOMString(s) specifying the device id
videoSourcestringan 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.

0.5.0

7 years ago

0.3.5

8 years ago

0.3.3

8 years ago

0.3.2

8 years ago

0.3.1

8 years ago