Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

@wmik/use-media-recorder

1.0.0-alpha.3 • Public • Published

use-media-recorder

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

Features

  • 📦 Lightweight
  • 🛠️ Customizable
  • 🎥 Video recording
  • 🎤 Audio recording
  • 🖥️ Screen recording

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/mp4' },
    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.
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, stopping, stopped, failed.
mediaBlob Blob Raw media data.
isAudioMuted boolean Indicated whether audio is active/inactive.
stopRecording function End a recording.
getMediaStream function Request for a media source. Camera, mic and/or screen access.
clearMediaStream function Resets the media stream object to null.
startRecording function Begin a recording.
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 MUTED stream of current recording. Muted to prevent audio feedback.

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

Install

npm i @wmik/use-media-recorder

DownloadsWeekly Downloads

3

Version

1.0.0-alpha.3

License

MIT

Unpacked Size

15.4 kB

Total Files

5

Last publish

Collaborators

  • avatar