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

1import React from 'react';
2import useMediaRecorder from '@wmik/use-media-recorder';
3
4function Player({ srcBlob, audio }) {
5  if (!srcBlob) {
6    return null;
7  }
8
9  if (audio) {
10    return <audio src={URL.createObjectURL(srcBlob)} controls />;
11  }
12
13  return (
14    <video
15      src={URL.createObjectURL(srcBlob)}
16      width={520}
17      height={480}
18      controls
19    />
20  );
21}
22
23function ScreenRecorderApp() {
24  let {
25    error,
26    status,
27    mediaBlob,
28    stopRecording,
29    getMediaStream,
30    startRecording
31  } = useMediaRecorder({
32    recordScreen: true,
33    blobOptions: { type: 'video/webm' },
34    mediaStreamConstraints: { audio: true, video: true }
35  });
36
37  return (
38    <article>
39      <h1>Screen recorder</h1>
40      {error ? `${status} ${error.message}` : status}
41      <section>
42        <button
43          type="button"
44          onClick={getMediaStream}
45          disabled={status === 'ready'}
46        >
47          Share screen
48        </button>
49        <button
50          type="button"
51          onClick={startRecording}
52          disabled={status === 'recording'}
53        >
54          Start recording
55        </button>
56        <button
57          type="button"
58          onClick={stopRecording}
59          disabled={status !== 'recording'}
60        >
61          Stop recording
62        </button>
63      </section>
64      <Player srcBlob={mediaBlob} />
65    </article>
66  );
67}

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

1function LiveStreamPreview({ stream }) {
2  let videoPreviewRef = React.useRef();
3
4  React.useEffect(() => {
5    if (videoPreviewRef.current && stream) {
6      videoPreviewRef.current.srcObject = stream;
7    }
8  }, [stream]);
9
10  if (!stream) {
11    return null;
12  }
13
14  return <video ref={videoPreviewRef} width={520} height={480} autoPlay />;
15}
16
17<LiveStreamPreview stream={liveStream} />

Related

• react-media-recorder

License

MIT ©2020