react-record-rtc

A React component and hooks for in-browser camera video recording and photo capture, built on RecordRTC.

Installation

npm install react-record-rtc

react and react-dom (>=17) are peer dependencies — install them in your app if you haven't already.

Usage

Drop-in component

import { Recorder } from 'react-record-rtc';

function App() {
  return (
    <Recorder
      initialFacing="user"
      recordRTCOptions={{ mimeType: 'video/webm;codecs=vp9', videoBitsPerSecond: 2_000_000 }}
      onRecordingComplete={(blob, url) => console.log('recorded', blob, url)}
      onRecordingStateChanged={(state) => console.log('recording state', state)}
      onPhotoCapture={(blob, url) => console.log('photo', blob, url)}
      onPermissionChange={(permission) => console.log('permission', permission)}
    />
  );
}

Recorder renders its own camera preview, record/pause/resume/stop/retry controls, camera-flip buttons (when more than one camera is available), and a take-photo button.

Full RecordRTC access

useVideoRecorder is a thin wrapper, not a fixed subset — nothing RecordRTC offers is out of reach:

• recordRTCOptions is passed straight through to new RecordRTC(stream, options), so mimeType, videoBitsPerSecond, timeSlice + ondataavailable (chunked/streaming recording), disableLogs, etc. all just work.
• pauseRecording/resumeRecording/reset are wrapped directly, alongside recordingState mirroring RecordRTC's own state machine ('inactive' | 'recording' | 'stopped' | 'paused' | 'destroyed').
• The raw RecordRTC instance is returned as recorder while a recording is active/paused — call save(), writeToDisk(), getDataURL(), setRecordingDuration(), getState(), or anything else on it directly.

const { recorder, recordingState, pauseRecording, resumeRecording } = useVideoRecorder(camera, videoRef, {
  recordRTCOptions: { timeSlice: 1000, ondataavailable: (chunk) => uploadChunk(chunk) },
});

// anything not wrapped above is still reachable on the live instance
recorder?.setRecordingDuration(30_000).onRecordingStopped(() => console.log('auto-stopped'));

RecordRTCOptions and RecordingState are re-exported too, so you don't need to install @types/recordrtc yourself just to type your own callbacks.

Headless hooks

For a fully custom UI, use the hooks directly against your own <video> ref:

import { useRef } from 'react';
import { useCameraStream, useVideoRecorder, usePhotoCapture } from 'react-record-rtc';

function CustomRecorder() {
  const videoRef = useRef<HTMLVideoElement>(null);
  const { camera, permission, isLoading } = useCameraStream(videoRef);
  const { isRecording, isPaused, startRecording, pauseRecording, resumeRecording, stopRecording } =
    useVideoRecorder(camera, videoRef);
  const { photoURL, takePhoto } = usePhotoCapture(videoRef);

  return <video ref={videoRef} autoPlay playsInline />;
}

Requirements

getUserMedia/enumerateDevices only work in a secure context (HTTPS, or localhost during development).

License

MIT — see LICENSE.