React.js Hooks Project to Build Webcam Video Recorder Using react-record-webcam Library in TS

 

TypeScript

Webcam recording hook and component for React. Works in all latest browser versions, although Safari requires MediaRecorder to be enabled in the experimental features.

Demo

Add package

 

 

Or

Use hook

 

 

 

 

Options
filename: string Filename for download
recordingLength: number Length of recording in seconds
fileType: 'mp4' | 'webm' File container for download. Will also set mimeType.
aspectRatio: number Video aspect ratio, default is 1.77
codec: object { audio: 'aac' | 'opus', video: 'av1' | 'avc' | 'vp8' }
width: number Video width
height: number Video height
disableLogs: boolean Disable status logs from console

 

 

 

FULL TYPESCRIPT EXAMPLE TO RECORD & DOWNLOAD VIDEO

 

 

index.tsx

 

 

 

 

App.css

 

 

 

 

index.tsx

 

 

 

 

Make a tsconfig.json file inside the root directory and copy paste the below code

 

 

tsconfig.json

 

 

Leave a Reply