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

Related

• react-media-recorder

License

MIT ©2020