# react-webcam

> React webcam component

Latest version **7.2.0** (published 2023-10-25) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-webcam
pnpm add react-webcam
yarn add react-webcam
bun add react-webcam
```

## Health

**Score 35/100 (D)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 7.2.0 |
| Published | 2023-10-25 |
| First published | 2014-12-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 163.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1750 |
| Author | Moz Morris |
| Maintainers | mozmorris |
| Keywords | react, react-component, webcam |

## Links

- npm: https://www.npmjs.com/package/react-webcam
- Repository: https://github.com/mozmorris/react-webcam
- Issues: https://github.com/mozmorris/react-webcam/issues
- npm.io page: https://npm.io/package/react-webcam

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 7.2.0 (latest) — 2023-10-25
- 7.0.0 (next) — 2022-03-10
- 7.1.1 — 2023-06-07
- 7.1.0 — 2023-05-30
- 7.0.1 — 2022-04-05
- 6.0.1 — 2022-01-26
- 6.0.0 — 2021-08-12
- 5.2.4 — 2021-05-25
- 5.2.4-0 — 2021-05-25
- 5.2.3 — 2021-02-11
- 5.2.2 — 2020-11-19
- 5.2.1 — 2020-10-08
- 5.2.0 — 2020-06-14
- 5.1.0 — 2020-06-03
- 5.0.2 — 2020-05-23
- … 51 more at https://npm.io/package/react-webcam/versions

## README

# react-webcam

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

<img src="Logotype primary.png" width="70%" height="70%" />

**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 = () => <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](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 = () => (
  <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)

```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 (
    <>
      <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](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 <Webcam videoConstraints={videoConstraints} />;
  }
}
```

### Environment/Facing-Out camera

```jsx
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](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) => (
          <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:

```html
<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:

```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

---
_Source: https://npm.io/package/react-webcam · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._