React-image-data-capture NPM

react-image-data-capture

Component to capture camera image. The image data can be retrieved as a blob, a webP or a file object.

npm

Install

npm install react-image-data-capture

Usage

import React from 'react';
import ImageCapture from 'react-image-data-capture';

function MyImageCaptureComponent() {
  const [imgSrc, setImgSrc] = useState(null);
  const [imgFile, setImgFile] = useState(null);
  const onCapture = (imageData) => {
    // read as webP
    setImgSrc(imageData.webP);
    // read as file
    setImgFile(imageData.file);
    // read as blob
    // imageData.blob
  };
  
  // Use useCallback to avoid unexpected behaviour while rerendering
  const onError = useCallback((error) => { console.log(error) }, []);
  
  // Use useMemo to avoid unexpected behaviour while rerendering
  const config = useMemo(() => ({ video: true }), []);
  /*
    { video: true } - Default Camera View
    { video: { facingMode: environment } } - Back Camera
    { video: { facingMode: "user" } } - Front Camera
  */

  // imgFile can be used as a file upload field form submission
  const formData = new FormData();
  formData.append("file", imgFile);
  
  return (
    <>
      <ImageCapture
        onCapture={onCapture}
        onError={onError}
        width={300}
        userMediaConfig={config}
      />
      {imgSrc &&
        <div>
          <div>Captured Image:</div>
          <img src={imgSrc} alt="captured-img" />
        </div>
      }
    </>
  );
}

Examples

To play around with the component, try these interactive sample apps. This will also help to understand how to mount/unmount the component to control the track streaming.

CodeSandbox

Props

Prop	Type	Optional	Default	Description
onCapture	Function	No	-	Callback function with imageData as a param to be triggered on image capture. imageData is an object that contains the blob, webP and file object representation of the captured image.
onError	Function	Yes	-	Callback function with error as a param to be triggered in case of error while accessing the camera.
width	Number	No	-	Width of the camera stream to be rendered in px.
userMediaConfig	Object	No	--	MediaStreamContraints object to be passed to the getUserMedia.