Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mozmorris/react-webcam
Webcam component
https://github.com/mozmorris/react-webcam
getusermedia react reactjs webcam webcam-component
Last synced: 27 days ago
JSON representation
Webcam component
- Host: GitHub
- URL: https://github.com/mozmorris/react-webcam
- Owner: mozmorris
- License: mit
- Created: 2014-12-13T10:50:11.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2024-05-30T15:51:09.000Z (5 months ago)
- Last Synced: 2024-10-12T01:38:10.072Z (about 1 month ago)
- Topics: getusermedia, react, reactjs, webcam, webcam-component
- Language: TypeScript
- Homepage: https://codepen.io/mozmorris/pen/JLZdoP
- Size: 2.05 MB
- Stars: 1,657
- Watchers: 25
- Forks: 282
- Open Issues: 64
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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](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
npm install react-webcam
# with yarn
yarn add react-webcam
```
## Demo
https://codepen.io/mozmorris/pen/JLZdoP
## Usage
```jsx
import React from "react";
import Webcam from "react-webcam";
const WebcamComponent = () => ;
```
### 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](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](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 = () => (
{({ getScreenshot }) => (
{
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 (
<>
Capture photo
>
);
};
```
## Capturing video
It is possible to capture video with `` using the [MediaStream Recording API](https://developer.mozilla.org/en-US/docs/Web/API/MediaStream_Recording_API).
You can find an example [https://codepen.io/mozmorris/pen/yLYKzyp?editors=0010](https://codepen.io/mozmorris/pen/yLYKzyp?editors=0010).
## Choosing a camera
### User/Selfie/forward facing camera
```jsx
class WebcamCapture extends React.Component {
render() {
const videoConstraints = {
facingMode: "user"
};
return ;
}
}
```
### Environment/Facing-Out camera
```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](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) => (
{device.label || `Device ${key + 1}`}
))}
>
);
};
```
## 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
```
## 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:
```css
video {
transform: scaleX(-1);
}
```
You can find an example at [https://codepen.io/mozmorris/pen/oNygXwz?editors=0110](https://codepen.io/mozmorris/pen/oNygXwz?editors=0110).
## License
MIT
[build-badge]: https://img.shields.io/travis/com/mozmorris/react-webcam.svg?style=flat-square
[build]: https://travis-ci.com/mozmorris/react-webcam
[downloads-badge]: https://img.shields.io/npm/dw/react-webcam.svg?style=flat-square