react-webcam-mirror
v1.0.7
Published
React webcam component
Downloads
17
Maintainers
Readme
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
import React from "react";
import Webcam from "react-webcam";
class Component extends React.Component {
render() {
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:
class WebcamCapture extends React.Component {
setRef = webcam => {
this.webcam = webcam;
};
capture = () => {
const imageSrc = this.webcam.getScreenshot();
};
render() {
const videoConstraints = {
width: 1280,
height: 720,
facingMode: "user"
};
return (
<div>
<Webcam
audio={false}
height={350}
ref={this.setRef}
screenshotFormat="image/jpeg"
width={350}
videoConstraints={videoConstraints}
/>
<button onClick={this.capture}>Capture photo</button>
</div>
);
}
}
Choosing a camera
User/Selfie/forward facing camera
class WebcamCapture extends React.Component {
render() {
const videoConstraints = {
facingMode: "user"
};
return <Webcam videoConstraints={videoConstraints} />;
}
}
Environment/Facing-Out camera
class WebcamCapture extends React.Component {
render() {
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.