react-user-media

0.3.0 • Public • Published

react-user-media

Provides components for access to audio and webcam

Instalation

npm install react-user-media
import Webcam from "react-user-media";

Webcam

Renders a video element that autoplays the feed from the user's webcam (if allowed). If used with a ref, it's possible to take screenshots of the video feed to a data url format.

Basic usage

<Webcam />

Advanced usage (screenshots)

In your component, render Webcam along with a ref:

<Webcam ref={(ref) => this.webcam = ref} />

and then use that ref to access the captureScreenshot method. This methods returns a string with a data-url representation of the current frame of the video feed.

this.webcam.captureScreenshot();

Alternatively, you can get a binary blob using captureBlob. This method takes in a callback with the resulting blob as its single argument.

this.webcam.captureBlob((blob) => {
  // ...
});

See the examples folder for more in-depth examples.

Props

Prop Type Default
audio bool true
video bool true
width number 640
height number 480
captureFormat string "image/png"
onSuccess func () => {}
onFailure func (error) => { throw error }

Dependencies (0)

    Dev Dependencies (16)

    Package Sidebar

    Install

    npm i react-user-media

    Weekly Downloads

    122

    Version

    0.3.0

    License

    MIT

    Unpacked Size

    209 kB

    Total Files

    14

    Last publish

    Collaborators

    • jgradim