react-camera-ios v0.2.1

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

Demo

React Camera iOS