react-record-rtc

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

Live demo: https://potlid.github.io/react-recorder

This repo is an npm workspace with two packages:

• library/ — the published package, react-record-rtc.
• example/ — a Create React App demo that consumes the built package, exactly like any other consumer would.

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.

RecordRTCOptions and RecordingState are re-exported too, so consumers don't need to install @types/recordrtc themselves just to type their own callbacks. See library/README.md for a fuller example.

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 />;
}

Local development

npm install              # installs both workspaces
npm run example          # builds the library, then starts the demo app at localhost:3000

Other useful scripts (run from the repo root):

• npm run build — build the library only (library/dist).
• npm run dev — rebuild the library on every change (tsup --watch).
• npm run typecheck — typecheck the library.
• npm test — build the library, then run the example app's test suite against it.

Publishing

Publishing to npm is a manual step (not automated in CI):

cd library
npm version <patch|minor|major>
npm publish

License

MIT — see LICENSE.