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 }