React screen recorder

Record screens, windows, and browser tabs in React.

Use `useDisplayMedia()` for browser screen sharing and `useMediaRecorder()` for recording controls, Blob/File output, playback previews, and uploads.

Screen recorder example

import { useDisplayMedia, useMediaRecorder, useObjectUrl } from 'react-webcam-kit';

export function ScreenRecorder() {
  const screen = useDisplayMedia({ audio: true, video: true });
  const recorder = useMediaRecorder({
    fileName: 'screen-recording',
    fileType: 'webm',
    quality: 'hd',
    stream: screen.stream,
  });
  const playbackUrl = useObjectUrl(recorder.blob);

  return (
    <>
      <button onClick={() => screen.start()}>Share screen</button>
      <button disabled={!screen.stream} onClick={() => recorder.start()}>Record</button>
      <button onClick={recorder.stop}>Stop recording</button>
      {playbackUrl ? <video src={playbackUrl} controls /> : null}
    </>
  );
}

Screen recording features

• Request screen, window, or tab capture with `useDisplayMedia()`.
• Record the display stream with `useMediaRecorder()`.
• Handle browser stop-sharing events with `status` and `onStop`.
• Preview recorded Blobs with `useObjectUrl()`.
• Upload recordings with `createUploadFormData()`.

Browser screen capture must start from a user action. Display audio support depends on the browser and the selected screen-sharing surface.

Related guides