Awesome Open Source
Awesome Open Source

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

License

MIT ©2020

Alternatives To Use Media Recorder
Select To Compare


Alternative Project Comparisons
Related Awesome Lists
Top Programming Languages

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,114,612
Reactjs (170,305
Recording (4,943
Recorder (2,019
Mediarecorder (141