React-browsercam NPM

react-browsercam

A fully responsive and customizable camera component for React.

This package was designed to allow you to quickly implement a camera in your webapp.

For a quick implementation you can just copy the code from the usage chapter. If you need more freedom, you can swap out any component with a custom one, just note that the useCapture hook handles all the interaction with the camera stream.

Note:

The camera stream can only be accessed when the webapp runs over https or localhost!

Browser compatibility

Fullscreen API (optional)
MediaStream API

Features

Fully customizable image capturing hook
Fullscreen support
Allows for custom camera interface
Interface can be integrated into the camera or placed below

Installation

npm install --save react-browsercam

Usage

The following example shows an implementation of a full featured camera.

import { Camera, CameraInterface, ImgDetailPopup, useCapture } from 'react-browsercam';

const WebcamComponent = () => {
  const { image, isAccessingCamera, videoRef, capture, setBeforeCapture } = useCapture({});
  const [displayDetails, setDisplayDetails] = useState(false);

  return (
    <Camera
      videoRef={videoRef}
      isAccessingCamera={isAccessingCamera}
      flash={setBeforeCapture}
      >
      <CameraInterface
        image={image}
        handleCapture={capture}
        openImage={() => setDisplayDetails(true)}
      >
        <ImgDetailPopup image={image} visible={displayDetails} handleClose={() => setDisplayDetails(false)}/>
      </CameraInterface>
    </Camera>
  );
};

Demo

Demo of react-browsercam

Example

Simple project

Components

useCapture Props

value	type	default	description
MediaStreamConstraints?	`MediaStreamConstraints \\| undefined`	`audio: false,video: {width: { ideal: 4096 },height: { ideal: 4096 },facingMode: 'environment }`	MediaStreamConstraint(s) affecting the displayed and captured images
imageFormat?	`'image/webp' \\| 'image/png' \\| 'image/jpeg'`	Selected image type
imageCompression?	`number?`	`0.91`	Selected image compression rate

useCapture Return values

prop	type	default	description
image	`Blob \\| HTMLCanvasElement \\| string \\| null`	`null`	Contains the last captured image
isAccessingCamera	`bool`	`false`	Allows you to check if the camera go access to the mediastream
videoRef	`HTMLVideoElement`	`document.createElement('video')`	Allows you to show the mediastream by adding, by adding the `videoRef` to HTMLVideoElement elements like so `ref={videoRef}`
isNotSupported	`bool`	`false`	Informs you if mediastream isn't supported by your browser
isPermissionDenied	`bool`	`false`	Informs you if permission was granted/revoked to use the mediastream
setBeforeCapture	`() => void`	`() => () => null`	Allows you to calculate certain functions before capturing an image. Your function need two arrow functions (like in the default value), otherwise useState doesn't recognize it as a function
setAfterCapture	`() => void`	`() => () => null`	Allows you to calculate certain functions after capturing an image. Your function need two arrow functions (like in the default value), otherwise useState doesn't recognize it as a function

Camera Props

prop	type	default	description
videoRef	`RefObject<HTMLVideoElement>`	required	Needed to display mediastream from useCapture hook
isAccessingCamera	`boolean`	required	Needed to display camera if mediastream can be accessed
objectFit?	`'cover' \\| 'fill' \\| 'contain' \\| 'none' \\| 'scale-down'`	`'cover`	Changes the cropping of the image
fullscreen?	`boolean?`	`true`	Allows you to disable the fullscreen functionality
flash	`Dispatch<SetStateAction<() => void>>`	required	You can pass it the `setBeforeCapture` value from useCapture to add a flash when capturing an image. Otherwise pass `() => () => void`
inPicture?	`boolean?`	`true`	Allows you to overlay the camera interface on top of the camera stream or below it
children	Your camera interface	required	You can use the provided `CameraInterface` Component as a default

CameraInterface Props

value	type	default	description
handleCapture	`() => void`	required	This function gets called when the capture button is pressed
image	`Blob \\| HTMLCanvasElement \\| string \\| null`	required	Image is used to be displayed on the image detail button
openImage	`() => void`	required	This function gets called to open the image detail component
children	Your image detail component	null	If you place an image detail component in here, it will also be displayed in fullscreen