@wmik/use-media-recorder NPM

use-media-recorder

React based hooks to utilize the MediaRecorder API for audio, video and screen recording.

Features

👀 Familiar API - Extends the MediaRecorder/MediaStream API with minimal abstraction making it easy to use.
🔴 Media recording - Supports audio 🎤, video 🎥 & screen 🖥️ recording.
🎛️ Configurable - Adjust settings to match your recording requirements.
💅 Headless - Build your own custom user interface to fit your style.

Installation

npm install @wmik/use-media-recorder

Example

import React from 'react';
import useMediaRecorder from '@wmik/use-media-recorder';

function Player({ srcBlob, audio }) {
  if (!srcBlob) {
    return null;
  }

  if (audio) {
    return <audio src={URL.createObjectURL(srcBlob)} controls />;
  }

  return (
    <video
      src={URL.createObjectURL(srcBlob)}
      width={520}
      height={480}
      controls
    />
  );
}

function ScreenRecorderApp() {
  let {
    error,
    status,
    mediaBlob,
    stopRecording,
    getMediaStream,
    startRecording
  } = useMediaRecorder({
    recordScreen: true,
    blobOptions: { type: 'video/webm' },
    mediaStreamConstraints: { audio: true, video: true }
  });

  return (
    <article>
      <h1>Screen recorder</h1>
      {error ? `${status} ${error.message}` : status}
      <section>
        <button
          type="button"
          onClick={getMediaStream}
          disabled={status === 'ready'}
        >
          Share screen
        </button>
        <button
          type="button"
          onClick={startRecording}
          disabled={status === 'recording'}
        >
          Start recording
        </button>
        <button
          type="button"
          onClick={stopRecording}
          disabled={status !== 'recording'}
        >
          Stop recording
        </button>
      </section>
      <Player srcBlob={mediaBlob} />
    </article>
  );
}

Demo

Live demo example

API

`useMediaRecorder` (Default export)

Creates a custom media recorder object using the MediaRecorder API.

`Parameters` (MediaRecorderProps)

Property	Type	Description
blobOptions	`BlobPropertyBag`	Options used for creating a `Blob` object.
recordScreen	`boolean`	Enable/disable screen capture.
customMediaStream	`MediaStream`	Custom stream e.g `canvas.captureStream`
onStart	`function`	Callback to run when recording starts.
onStop	`function`	Callback to run when recording stops. Accepts a `Blob` object as a parameter.
onError	`function`	Callback to run when an error occurs while recording. Accepts an error object as a parameter.
onDataAvailable	`function`	Callback to run when recording data exists.
mediaRecorderOptions	`object`	Options used for creating `MediaRecorder` object.
mediaStreamConstraints*	`MediaStreamConstraints`	Options used for creating a MediaStream object from `getDisplayMedia` and `getUserMedia`.

NOTE: * means it is required

`Returns` (MediaRecorderHookOptions)

Property	Type	Description
error	`Error`	Information about an operation failure. Possible exceptions
status	`string`	Current state of recorder. One of `idle`, `acquiring_media`, `ready`, `recording`, `paused`,`stopping`, `stopped`, `failed`.
mediaBlob	`Blob`	Raw media data.
isAudioMuted	`boolean`	Indicates whether audio is active/inactive.
stopRecording	`function`	End a recording.
getMediaStream	`function`	Request for a media source. Camera, mic and/or screen access. Returns instance of requested media source or `customMediaStream` if was provided in initializing.
clearMediaStream	`function`	Resets the media stream object to `null`.
clearMediaBlob	`function`	Resets the media blob to `null`.
startRecording	`function(timeSlice?)`	Begin a recording. Optional argument `timeSlice` controls chunk size.
pauseRecording	`function`	Stop without ending a recording allowing the recording to continue later.
resumeRecording	`function`	Continue a recording from a previous pause.
muteAudio	`function`	Disable audio.
unMuteAudio	`function`	Enable audio.
liveStream	`MediaStream`	Real-time stream of current recording.

More examples

function LiveStreamPreview({ stream }) {
  let videoPreviewRef = React.useRef();

  React.useEffect(() => {
    if (videoPreviewRef.current && stream) {
      videoPreviewRef.current.srcObject = stream;
    }
  }, [stream]);

  if (!stream) {
    return null;
  }

  return <video ref={videoPreviewRef} width={520} height={480} autoPlay />;
}

<LiveStreamPreview stream={liveStream} />