react-webcam
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.
Installation
npm install react-webcam
Demo
https://codepen.io/mozmorris/pen/JLZdoP
Usage
;; Component { return <Webcam />; }
Props
prop | type | default | notes |
---|---|---|---|
className | string | '' | CSS class of video element |
audio | boolean | true | enable/disable audio |
height | number | 480 | height of video element |
width | number | 640 | width of video element |
screenshotWidth | number | width of screenshot | |
style | object | style prop passed to video element | |
screenshotFormat | string | 'image/webp' | format 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 |
screenshotQuality | number | 0.92 | quality of screenshot(0 to 1) |
audioConstraints | object | MediaStreamConstraint(s) for the audio | |
videoConstraints | object | MediaStreamConstraints(s) for the video |
Methods
getScreenshot
- Returns a base64 encoded string of the current webcam image. Example:
Component { thiswebcam = webcam; }; { const imageSrc = thiswebcam; }; { const videoConstraints = width: 1280 height: 720 facingMode: "user" ; return <div> <Webcam audio=false height=350 ref=thissetRef screenshotFormat="image/jpeg" width=350 videoConstraints=videoConstraints /> <button onClick=thiscapture>Capture photo</button> </div> ; }
Choosing a camera
User/Selfie/forward facing camera
Component { const videoConstraints = facingMode: "user" ; return <Webcam videoConstraints=videoConstraints />; }
Environment/Facing-Out camera
Component { const videoConstraints = facingMode: exact: "environment" ; return <Webcam videoConstraints=videoConstraints />; }
For more information on facingMode
, please see the MDN web docs https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackConstraints/facingMode
License
MIT
Credits
Many thanks to @cezary for his work on this component.