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: 13 days ago
JSON representation

Webcam component

Lists

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