React Camera iOS

A simple react implementation of iPhone / iPad photo camera with all native styles and ability to change camera (user / environment).

The following technologies were used to create the library:

• WebRTC for getting the access to camera media stream,
• HTML <video> element for display the camera stream,
• HTML <canvas> element for taking a screenshot (photo) from the <video> element.

Installation

You can install the library using NPM:

npm install react-camera-ios

or Yarn:

yarn add react-camera-ios

Usage

import React from 'react';
import ReactDOM from 'react-dom';
import Camera, { DEVICE, FACING_MODE, PLACEMENT } from 'react-camera-ios';

// Styles
import 'react-camera-ios/build/styles.css';

const containerStyle = { display: 'flex', height: '300px', width: '300px' };

ReactDOM.render(
  <div style={containerStyle}>
    <Camera
      device={DEVICE.MOBILE}
      facingMode={FACING_MODE.ENVIRONMENT}
      placement={PLACEMENT.COVER}
      quality="1"
      onError={error => console.log(error)}
      onTakePhoto={dataUrl => console.log(dataUrl)}
    />
  </div>,
  document.getElementById('root'),
);

Constants

The library provides some constants, you can use them as values of camera properties:

const DEVICE = {
  MOBILE: 'mobile',
  TAB: 'tab',
};

const FACING_MODE = {
  ENVIRONMENT: 'environment',
  USER: 'user',
};

const PLACEMENT = {
  CONTAIN: 'contain',
  COVER: 'cover',
};

PropTypes

Name | Description | Type | Default value --- | --- | --- | --- device|Which style of camera do you want to see:DEVICE.MOBILE - iPhone camera style,DEVICE.TAB - iPad camera style.|string|DEVICE.MOBILE facingMode| In which side of device do you want to open camera:FACING_MODE.ENVIRONMENT - back (main) camera,FACING_MODE.USER - front camera.It works like MediaTrackConstraints.facingMode|string|FACING_MODE.ENVIRONMENT isTurnedOn| Camera power indicator | bool | true placement|Camera placement relative to the container:PLACEMENT.CONTAIN - scales the camera as large as possible without cropping,PLACEMENT.COVER - scales the camera as large as possible (but if the proportions of the camera differ from the container, it is cropped either vertically or horizontally so that no empty space remains).It works like CSS background-size property|string|PLACEMENT.COVER quality|The quality of photo (a number between 0 and 1). It will be passed to canvas.toDataURL()|number|0.92 onError(error)|Called when an error is occured (error object will be passed as an agrument)|func| onTakePhoto(dataUrl)|Called when a photo is taken (dataUrl will be passed as an argument)|func|

Demo

React Camera iOS