# @lebek/react-user-media

> React components for webcam and audio

Latest version **0.2.1** (published 2017-05-30) · MIT license · 0 weekly downloads

## Install

```sh
npm install @lebek/react-user-media
pnpm add @lebek/react-user-media
yarn add @lebek/react-user-media
bun add @lebek/react-user-media
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.1 |
| Published | 2017-05-30 |
| First published | 2017-05-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 15 |
| Author | João Gradim |
| Maintainers | lebek |
| Keywords | react, webcam, audio, usermedia |

## Links

- npm: https://www.npmjs.com/package/@lebek/react-user-media
- Repository: https://github.com/jgradim/react-user-media
- Homepage: https://github.com/jgradim/react-user-media#readme
- Issues: https://github.com/jgradim/react-user-media/issues
- npm.io page: https://npm.io/package/@lebek/react-user-media

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

- 0.2.1 (latest) — 2017-05-30
- 0.2.0 — 2017-05-30
- 0.1.12 — 2017-05-26
- 0.1.11 — 2017-05-22
- 0.1.10 — 2017-05-22
- 0.1.9 — 2017-05-22
- 0.1.8 — 2017-05-22

## README

react-user-media
================

Provides components for access to audio and webcam

Instalation
-----------

```
npm install react-user-media
```

```
import Webcam from "react-user-media";
```

Webcam
------

Renders a `video` element that autoplays the feed from the user's webcam (if allowed). If used with a `ref`, it's possible to take screenshots of the video feed to a data url format.

#### Basic usage

```
<Webcam />
```

#### Advanced usage (screenshots)

In your component, render `Webcam` along with a `ref`:

```
<Webcam ref="webcam" />
```

and then use that ref to access the `captureScreenshot` method. This methods returns a string with a data-url representation of the current frame of the video feed.

```
this.refs.webcam.captureScreenshot();
``` 

See the `examples` folder for more in-depth examples.

#### Props

| **Prop**        | **Type** | **Default**                  | 
|-----------------|----------|------------------------------|
| `audio`         | `bool`   | `true`                       | 
| `video`         | `bool`   | `true`                       | 
| `width`         | `number` | `640`                        | 
| `height`        | `number` | `480`                        | 
| `captureFormat` | `string` | `"image/png"`                | 
| `onSuccess`     | `func`   | `() => {}`                   |
| `onFailure`     | `func`   | `(error) => { throw error }` |

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