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

``bash
npm install react-image-data-capture
`

Usage

`jsx
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 (
<>
onCapture={onCapture}
onError={onError}
width={300}
userMediaConfig={config}
/>
{imgSrc &&


Captured Image:

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

License

MIT © mayank8aug