Webcam component for React. See this for browser compatibility.
Note: Browsers will throw an error if the page is loaded from insecure origin. I.e. Use https.
npm install react-webcam
https://codepen.io/mozmorris/pen/JLZdoP
importReactfrom"react";importWebcamfrom"react-webcam";constWebcamComponent=()=><Webcam/>;The props here are specific to this component but one can pass any prop to the underlying video tag eg className or style
| prop | type | default | notes |
|---|---|---|---|
| audio | boolean | true | enable/disable audio |
| audioConstraints | object | MediaStreamConstraint(s) for the audio | |
| imageSmoothing | boolean | true | pixel smoothing of the screenshot taken å |
| mirrored | boolean | false | show camera preview and get the screenshot mirrored |
| minScreenshotHeight | number | min height of screenshot | |
| minScreenshotWidth | number | min width of screenshot | |
| onUserMedia | function | noop | callback for when component receives a media stream |
| onUserMediaError | function | noop | callback for when component can't receive a media stream with MediaStreamError param |
| screenshotFormat | string | 'image/webp' | format of screenshot |
| screenshotQuality | number | 0.92 | quality of screenshot(0 to 1) |
| videoConstraints | object | MediaStreamConstraints(s) for the video |
getScreenshot - Returns a base64 encoded string of the current webcam image. Example:
constvideoConstraints={width: 1280,height: 720,facingMode: "user"};constWebcamCapture=()=>{constwebcamRef=React.useRef(null);constcapture=React.useCallback(()=>{constimageSrc=webcamRef.current.getScreenshot();},[webcamRef]);return(<><Webcamaudio={false}height={720}ref={webcamRef}screenshotFormat="image/jpeg"width={1280}videoConstraints={videoConstraints}/><buttononClick={capture}>Capture photo</button></>);};classWebcamCaptureextendsReact.Component{render(){constvideoConstraints={facingMode: "user"};return<WebcamvideoConstraints={videoConstraints}/>;}}classWebcamCaptureextendsReact.Component{render(){constvideoConstraints={facingMode: {exact: "environment"}};return<WebcamvideoConstraints={videoConstraints}/>;}}For more information on facingMode, please see the MDN web docs https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackConstraints/facingMode
The Webcam component will fail to load when used inside a cross-origin iframe in newer version of Chrome (> 64). In order to overcome this security restriction a special allow attribute needs to be added to the iframe tag specifying microphone and camera as the required permissions like in the below example:
<iframe src="https://my-website.com/page-with-webcam" allow="camera; microphone;"/>
MIT