WIP - Does not work properly, yet.
Use at your own caution.
React Camera
A flexible camera component for React DOM; take photos using the latest WebRTC API's.
Installation
React Camera is designed to be installed through NPM and imported as an ES6 module.
npm install react-dom-camera
Then import it into your project.
;
Usage
Here is a basic example of how to use React Camera in a React app. This will render the Camera component "out of the box".
;; const App = <Camera />;
Taking a photo 📸
React Camera is setup to take an image of the current frame when the capture button is clicked, however, to access the image you must use the onTakePhoto
prop which passes you the image. The image
can be set as the src
value on an <img>
element for example.
;; const App = <Camera onTakePhoto= console />;
Custom capture button
If you're not a fan of the default capture button you can easily use your own component(s) instead. Use the captureButtonRenderer
prop and pass in a stateless component.
;; const CoolButton = <button onClick=onClick type="button"> Take photo </button>; const App = <Camera captureButtonRenderer= <CoolButton onClick=onClick /> onTakePhoto= console />;
Props
Property | Type | Default | Description |
---|---|---|---|
captureButtonRenderer | function | undefined | Renders a custom capture button that is used to take the photo. |
facingMode | string | ENVIRONMENT | The default facing mode to use, E.g. Environment or User. |
height | number | undefined | The ideal height of the video. |
onStopMediaStream | function | undefined | This function is called when the video stops streaming. |
onTakePhoto | function | undefined | This function is called when the capture button is pressed. The captured image is passed as an argument here. |
responsive | boolean | true | Applies width: 100% to the video element so it fills the container it's in. |
width | number | undefined | The ideal width of the video. |