# react-camera-pro

> Universal Camera component for React. Designed with focus on Android, iOS cameras and standard webcams.

Latest version **1.4.0** (published 2024-05-30) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-camera-pro
pnpm add react-camera-pro
yarn add react-camera-pro
bun add react-camera-pro
```

## Health

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

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

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.4.0 |
| Published | 2024-05-30 |
| First published | 2020-01-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 46.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Martin Urban |
| Maintainers | xurban42 |
| Keywords | camera, webcam, cam, react, ios, android, mobile, webRTC |

## Links

- npm: https://www.npmjs.com/package/react-camera-pro
- Repository: https://github.com/purple-technology/react-camera-pro
- Homepage: https://github.com/purple-technology/react-camera-pro#readme
- Issues: https://github.com/purple-technology/react-camera-pro/issues
- npm.io page: https://npm.io/package/react-camera-pro

## Dependencies (2)

- [detectrtc](https://npm.io/package/detectrtc.md) ^1.3.9
- [@types/webrtc](https://npm.io/package/@types/webrtc.md) 0.0.25

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

- 1.4.0 (latest) — 2024-05-30
- 1.3.0 — 2023-04-25
- 1.2.2 — 2023-02-20
- 1.2.1 — 2022-08-30
- 1.1.1 — 2022-01-28
- 1.1.0 — 2020-07-28
- 1.0.3 — 2020-03-13
- 1.0.2 — 2020-02-04
- 1.0.1 — 2020-01-24
- 1.0.0 — 2020-01-23
- 0.0.3-alpha — 2020-01-22
- 0.0.2-alpha — 2020-01-22
- 0.0.1-alpha — 2020-01-22

## README

![npm][npm-badge]
![downloads][downloads-badge]

# react-camera-pro

Universal Camera component for React.

Designed with focus on Android and iOS cameras.
Works with standard webcams as well.

See [this](http://caniuse.com/#feat=stream) for browser compatibility.

Note: WebRTC is only supported on secure connections. So you need to serve it from https. You can test and debug in Chrome from localhost though (this doesn't work in Safari).

## Features

- mobile friendly camera solution (tested on iOS and Android)
- video element is fully responsive
  - you can setup parameter to cover your container
  - you can define aspectRatio of view: 16/9, 4/3, 1/1, ...
- taking photo to base64 jpeg file - with same aspect Ratio as view, with FullHD resolution (or maximum supported by camera).
- working with standard webcams or other video input devices
- supports autofocus
- switching facing/environment cameras (with your own button)
- detect number of cameras
- facing camera is mirrored, environment is not
- controlled by react [Ref](https://reactjs.org/docs/refs-and-the-dom.html)
- public functions to take photo, to switch camera and to get number of cameras
- typescript library

## Installation

```
npm install --save react-camera-pro
```

## Demo

https://purple-technology.github.io/react-camera-pro/

## Example

https://github.com/purple-technology/react-camera-pro/blob/master/example/src/App.tsx

## Usage

```javascript
import React, { useState, useRef } from "react";
import {Camera} from "react-camera-pro";

const Component = () => {
  const camera = useRef(null);
  const [image, setImage] = useState(null);

  return (
    <div>
      <Camera ref={camera} />
      <button onClick={() => setImage(camera.current.takePhoto())}>Take photo</button>
      <img src={image} alt='Taken photo'/>
    </div>
  );
}

export Component;
```

### Props

| prop                    | type                             | default      | notes                                          |
| ----------------------- | -------------------------------- | ------------ | ---------------------------------------------- |
| facingMode              | `'user'\|'environment'`          | `'user'`     | default camera - 'user' or 'environment'       |
| aspectRatio             | `'cover'\|number`                | `'cover'`    | aspect ratio of video (16/9, 4/3);             |
| numberOfCamerasCallback | `(numberOfCameras: number):void` | `() => null` | callback is called if number of cameras change |
| errorMessages           | `object?` see below              | see below    | Error messages object (optional)               |

#### Error messages (prop errorMessages)

Type:

```
errorMessages: {
  noCameraAccessible?: string;
  permissionDenied?: string;
  switchCamera?: string;
  canvas?: string;
};
```

Default:
```
  {
    noCameraAccessible: 'No camera device accessible. Please connect your camera or try a different browser.',
    permissionDenied: 'Permission denied. Please refresh and give camera permission.',
    switchCamera:
    'It is not possible to switch camera to different one because there is only one video device accessible.',
    canvas: 'Canvas is not supported.'
  }
```

### Methods

- `takePhoto(): string` - Returns a base64 encoded string of the taken image.
- `switchCamera(): 'user'|'environment'` - Switches the camera - user to environment or environment to user. Returns the new value 'user' or 'environment'.
- `getNumberOfCameras(): number` - Returns number of available cameras.

[See demo](https://purple-technology.github.io/react-camera-pro/)

[See example code](https://github.com/purple-technology/react-camera-pro/blob/8290b1319d7436c77403784fe845060f6c4ed3bd/example/src/App.tsx#L120)

```javascript

const Component = () => {
  const camera = useRef(null);
  const [numberOfCameras, setNumberOfCameras] = useState(0);
  const [image, setImage] = useState(null);

  //...

  return (
    <Camera ref={camera} numberOfCamerasCallback={setNumberOfCameras} />
      <img src={image} alt='Image preview' />
      <button
        onClick={() => {
            const photo = camera.current.takePhoto();
            setImage(photo);
        }}
      />
      <button
        hidden={numberOfCameras <= 1}
        onClick={() => {
          camera.current.switchCamera();
        }}
      />
  )
```

## Camera options

### User/Enviroment camera

```javascript
  const Cam = () => <Camera ref={camera} facingMode='environment'} />
```

### Aspect ratio

```javascript
const Cam = () => <Camera ref={camera} aspectRatio={16 / 9} />;
```

## Using within an iframe

```
<iframe src="https://example.com/camera-pro-iframe" allow="camera;"/>
```

## Credits

- Thanks for boilerplate to: https://medium.com/@xfor/developing-publishing-react-component-library-to-npm-styled-components-typescript-cc8274305f5a
- Thanks for Camera Template to: https://www.kasperkamperman.com/blog/camera-template/

## License

MIT

[downloads-badge]: https://img.shields.io/npm/dw/react-camera-pro.svg?style=flat-square
[npm-badge]: https://img.shields.io/npm/v/react-camera-pro

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