Universal Camera component for React.

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

See this 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).

• 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
• public functions to take photo, to switch camera and to get number of cameras
• typescript library

npm install --save react-camera-pro

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

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

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;

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.'
  }

• 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

See example code

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();
        }}
      />
  )

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

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

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

• 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/

MIT