Webcam video and audio recording component for React. Uses classes so all React versions are supported. Works in all latest browser versions, although Safari requires MediaRecorder to be enabled in the experimental features.
yarn add react-record-webcam
import Webcam from 'react-record-webcam'
...
<Webcam />
You can use the below default class names or pass your own namespace to replace the default react-record-webcam
.
className |
---|
react-record-webcam__wrapper |
react-record-webcam__status |
react-record-webcam__video |
react-record-webcam__controls |
react-record-webcam__controls-button |
Prop | Example |
---|---|
cssNamespace: string |
Set a namespace for the component CSS classes |
downloadFileName: string |
Filename for video download |
getStatus |
Callback to get webcam status |
recordingLength: number |
Set max recording length in seconds |
namespace: string |
Pass own CSS namespace |
options: object |
Options for recording video |
`type: video | |
`mimeType: video/mp4 | |
video: { minWidth, minHeight, maxWidth, maxHeight, minAspectRatio } |
|
statusMessages: object |
Pass own status messages to recorder |
{ INIT, CLOSED, OPEN, RECORDING, PREVIEW, ERROR } |
|
controlLabels: object |
Pass custom labels to control buttons |
{ CLOSE, DOWNLOAD, OPEN, RETAKE, START, STOP } |
|
render |
Render prop that passes status and controls |
isWebcamOn |
|
isRecording |
|
isPreview |
|
openCamera |
|
closeCamera |
|
start |
|
stop |
|
retake |
|
download |
|
status |