React camera recording

Record webcam video in React.

Use `useWebcam()` for the camera stream and `useMediaRecorder()` for quality presets, recording controls, chunks, final Blob/File output, upload helpers, and browser-aware MIME configuration.

Record and download a video

import {
  downloadBlob,
  getRecordingPresetConstraints,
  getSupportedMimeType,
  useMediaRecorder,
  useObjectUrl,
  useWebcam,
} from 'react-webcam-kit';

const mimeType = getSupportedMimeType([
  'video/webm;codecs=vp9,opus',
  'video/webm;codecs=vp8,opus',
  'video/webm',
]);

export function Recorder() {
  const camera = useWebcam({
    audio: true,
    videoConstraints: getRecordingPresetConstraints('hd'),
  });
  const recorder = useMediaRecorder({
    stream: camera.stream,
    mimeType: mimeType ?? undefined,
    fileName: 'camera-recording',
    fileType: 'webm',
    quality: 'hd',
  });
  const playbackUrl = useObjectUrl(recorder.blob);

  return (
    <>
      <video ref={camera.videoRef} autoPlay playsInline muted />
      <button onClick={() => recorder.start()}>Record</button>
      <button onClick={recorder.stop}>Stop</button>
      <button disabled={!recorder.file} onClick={() => recorder.file && downloadBlob(recorder.file)}>
        Download
      </button>
      {playbackUrl ? <video src={playbackUrl} controls /> : null}
    </>
  );
}

Recording features

• Start, stop, pause, resume, reset, and cancel recording sessions.
• Use low, medium, high, HD, and full-HD recording quality presets.
• Show recording duration with `duration` and `formatDuration()`.
• Enforce recording limits with `maxDuration` and `recordingTimeLimitReached`.
• Expose chunks, final Blob, optional File output, status, and errors.
• Create upload-ready FormData with `createUploadFormData()`.
• Mute and unmute audio tracks without changing preview video mute state.
• Choose supported MediaRecorder MIME types before recording.

MediaRecorder support varies by browser. Use `getSupportedMimeType()` before forcing a MIME type in production apps.

Related guides