react-webcam v7.2.0
react-webcam
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
# with npm
npm install react-webcam
# with yarn
yarn add react-webcam
Demo
https://codepen.io/mozmorris/pen/JLZdoP
Usage
import React from "react";
import Webcam from "react-webcam";
const WebcamComponent = () => <Webcam />;
Props
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 |
Methods
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});
The Constraints
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)
const videoConstraints = {
width: 1280,
height: 720,
facingMode: "user"
};
const WebcamCapture = () => (
<Webcam
audio={false}
height={720}
screenshotFormat="image/jpeg"
width={1280}
videoConstraints={videoConstraints}
>
{({ getScreenshot }) => (
<button
onClick={() => {
const imageSrc = getScreenshot()
}}
>
Capture photo
</button>
)}
</Webcam>
);
Screenshot (via ref)
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 (
<>
<Webcam
audio={false}
height={720}
ref={webcamRef}
screenshotFormat="image/jpeg"
width={1280}
videoConstraints={videoConstraints}
/>
<button onClick={capture}>Capture photo</button>
</>
);
};
Capturing video
It is posible to capture video with <Webcam />
using the MediaStream Recording API.
You can find an example https://codepen.io/mozmorris/pen/yLYKzyp?editors=0010.
Choosing a camera
User/Selfie/forward facing camera
class WebcamCapture extends React.Component {
render() {
const videoConstraints = {
facingMode: "user"
};
return <Webcam videoConstraints={videoConstraints} />;
}
}
Environment/Facing-Out camera
class WebcamCapture extends React.Component {
render() {
const videoConstraints = {
facingMode: { exact: "environment" }
};
return <Webcam videoConstraints={videoConstraints} />;
}
}
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
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) => (
<div>
<Webcam audio={false} videoConstraints={{ deviceId: device.deviceId }} />
{device.label || `Device ${key + 1}`}
</div>
))}
</>
);
};
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:
<iframe src="https://my-website.com/page-with-webcam" allow="camera; microphone;"/>
Mirrored video but non-mirrored screenshot
Add mirrored
prop to the component will make the video and the screenshot be mirrored, but sometimes you need to show a mirrored video but take a non-mirrored screenshot, to accomplish that, you just need to add this CSS to your project:
video {
transform: scaleX(-1);
}
You can find an example at https://codepen.io/mozmorris/pen/oNygXwz?editors=0110.
License
MIT
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
8 years ago
8 years ago
9 years ago
9 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
11 years ago