This content originally appeared on DEV Community and was authored by DEV Community
Step1 Create a react app with create-react-app
$ yarn create react-app webcam-app --template typescript
Step2 Install react-webcam (@types/react-webcam)
mozmorris
/
react-webcam
Webcam component
react-webcam
DEMO: https://codepen.io/mozmorris/pen/JLZdoP
https://www.npmjs.com/package/react-webcam
Webcam component for React. See http://caniuse.com/#feat=stream for browser compatibility.
Note: Browsers will throw an error if the page is loaded from insecure origin. I.e. Use https.
Installation
# with npm
npm install react-webcam
# with yarn
yarn add react-webcam
Demo
https://codepen.io/mozmorris/pen/JLZdoP
Usage
import React from "react";
import Webcam from "react-webcam";
const WebcamComponent = () => <Webcam />;
Props
The props here are specific to this component but one can pass any prop to the underlying video tag eg className, style, muted, etc
| prop | type | default | notes |
|---|---|---|---|
| audio | boolean | false | enable/disable audio |
| audioConstraints | object | MediaStreamConstraint(s) for the audio | |
| forceScreenshotSourceSize | boolean | false | uses size of underlying source video stream (and thus ignores other size related props) |
| imageSmoothing | boolean | true | pixel smoothing of the screenshot taken |
| mirrored | boolean | false | show camera preview and get the screenshot mirrored |
| minScreenshotHeight | number | min |
$ yarn add react-webcam @types/react-webcam
Step3 Create a simple component
src/components/WebCamDisplay/index.tsx
import { useRef } from "react";
import Webcam from "react-webcam";
export const WebCamDisplay = () => {
const webcam = useRef<Webcam>(null);
return (
<>
<Webcam audio={false} ref={webcam} />
</>
);
};
$ yarn start
Codesandbox
https://codesandbox.io/s/agitated-stonebraker-h11sl?file=/src/components/WebCamDisplay/index.tsx
This content originally appeared on DEV Community and was authored by DEV Community
DEV Community | Sciencx (2021-07-29T01:35:25+00:00) Use Webcam with React easily. Retrieved from https://www.scien.cx/2021/07/29/use-webcam-with-react-easily/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.