react-webcam

[![Build Status][build-badge]][build]
![downloads][downloads-badge]

DEMO: https://codepen.io/mozmorris/pen/JLZdoP

https://www.npmjs.com/package/react-webcam

Webcam component for React. See http://caniuse.com/#feat=stream
for browser compatibility.

Note: Browsers will throw an error if the page is loaded from insecure origin. I.e. Use https.

Installation

``shell


with npm

`jsx
import React from "react";
import Webcam from "react-webcam";

const WebcamComponent = () => ;
`

$3

The props here are specific to this component but one can pass any prop to the underlying video tag eg className, style, muted, etc

| prop | type | default | notes |
|---------------------------|----------|--------------|-----------------------------------------------------------------------------------------|
| audio | boolean | false | enable/disable audio |
| audioConstraints | object | | MediaStreamConstraint(s) for the audio |
| disablePictureInPicture | boolean | false | disable Picture-in-Picture |
| forceScreenshotSourceSize | boolean | false | uses size of underlying source video stream (and thus ignores other size related props) |
| imageSmoothing | boolean | true | pixel smoothing of the screenshot taken |
| mirrored | boolean | false | show camera preview and get the screenshot mirrored |
| minScreenshotHeight | number | | min height of screenshot |
| minScreenshotWidth | number | | min width of screenshot |
| onUserMedia | function | noop | callback for when component receives a media stream |
| onUserMediaError | function | noop | callback for when component can't receive a media stream with MediaStreamError param |
| screenshotFormat | string | 'image/webp' | format of screenshot |
| screenshotQuality | number | 0.92 | quality of screenshot(0 to 1) |
| videoConstraints | object | | MediaStreamConstraints(s) for the video |

$3

getScreenshot - Returns a base64 encoded string of the current webcam image. Example:

https://codepen.io/mozmorris/pen/gOOoqpw

You may also pass in an optional dimensions object:

`
getScreenshot({width: 1920, height: 1080});
`

$3

We can build a constraints object by passing it to the videoConstraints prop. This gets passed into getUserMedia method. Please take a look at the MDN docs to get an understanding how this works.

https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia
https://developer.mozilla.org/en-US/docs/Web/API/Media_Streams_API/Constraints

As an example take a look at this CodePen demo https://codepen.io/mozmorris/pen/GRpEQwK?editors=0010 which shows how to build a custom aspect ratio for the video.

Screenshot (via render props)

`jsx
const videoConstraints = {
width: 1280,
height: 720,
facingMode: "user"
};

const WebcamCapture = () => (
audio={false}
height={720}
screenshotFormat="image/jpeg"
width={1280}
videoConstraints={videoConstraints}
>
{({ getScreenshot }) => (
onClick={() => {
const imageSrc = getScreenshot()
}}
>
Capture photo

)}

);
`

Screenshot (via ref)

`jsx
const videoConstraints = {
width: 1280,
height: 720,
facingMode: "user"
};

const WebcamCapture = () => {
const webcamRef = React.useRef(null);
const capture = React.useCallback(
() => {
const imageSrc = webcamRef.current.getScreenshot();
},
[webcamRef]
);
return (
<>
audio={false}
height={720}
ref={webcamRef}
screenshotFormat="image/jpeg"
width={1280}
videoConstraints={videoConstraints}
/>
Capture photo

);
};
`

Capturing video

It is posible to capture video with using the MediaStream Recording API.

You can find an example https://codepen.io/mozmorris/pen/yLYKzyp?editors=0010.

Choosing a camera

$3

`jsx
class WebcamCapture extends React.Component {
render() {
const videoConstraints = {
facingMode: "user"
};

return ;
}
}
`

$3

`jsx
class WebcamCapture extends React.Component {
render() {
const videoConstraints = {
facingMode: { exact: "environment" }
};

return ;
}
}
`

For more information on facingMode, please see the MDN web docs https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackConstraints/facingMode

Show all cameras by deviceId

`jsx
const WebcamCapture = () => {
const [deviceId, setDeviceId] = React.useState({});
const [devices, setDevices] = React.useState([]);

const handleDevices = React.useCallback(
mediaDevices =>
setDevices(mediaDevices.filter(({ kind }) => kind === "videoinput")),
[setDevices]
);

React.useEffect(
() => {
navigator.mediaDevices.enumerateDevices().then(handleDevices);
},
[handleDevices]
);

return (
<>
{devices.map((device, key) => (


))}

);
};
`

Recording a stream

https://codepen.io/mozmorris/pen/yLYKzyp?editors=0011

Using within an iframe

The Webcam component will fail to load when used inside a cross-origin iframe in newer version of Chrome (> 64). In order to overcome this security restriction a special allow attribute needs to be added to the iframe tag specifying microphone and camera as the required permissions like in the below example:

`html