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 |

License

MIT