react-hook-recorder

A simple react hook using MediaRecorder API

Demo

https://codesandbox.io/s/react-hook-recorder-gbz6z

Example

import React, { useCallback, useState } from "react";
import useRecorder from "react-hook-recorder";

function Recorder() {
  const [url, setUrl] = useState("");
  const onStop = useCallback((blob, blobUrl) => {
    setUrl(blobUrl);
  }, []);

  const { startRecording, stopRecording, register, status } = useRecorder();

  return (
    <div>
      <video ref={register} autoPlay muted playsInline />
      {url && (
        <>
          Recorded video&nbsp;:
          <video controls src={url} />
        </>
      )}
      {status !== "init" && (
        <>
          <button onClick={startRecording} disabled={status === "recording"}>
            Start Recording
          </button>
          <button
            onClick={stopRecording(onStop)}
            disabled={status !== "recording"}
          >
            Stop Recording
          </button>
        </>
      )}
      <div>
        <strong>Status :</strong>&nbsp;
        {status}
      </div>
    </div>
  );
}

export default Recorder;

API

useRecorder

Args (mediaStreamConstraints: MediaStreamConstraints, mediaRecorderOptions: MediaRecorderOptions)

Property	Required	Type	Description
mediaStreamConstraints	false	object	MediaStreamConstraints object
mediaRecorderOptions	false	object	MediaRecorder object

Returns (object)

Property	Type	Args	Description
mediaRecorder	MediaRecorder		MediaRecorder instance ref
stream	MediaStream		MediaStream instance ref
startRecording	function		function to start recording
stopRecording	function	function(blob: Blob, url: string) => void	function to stop recording
register	function	HTMLVideoElement	function to register video element
status	RecorderStatus		return recorder status
error	RecorderError		return recorder error

Types

enum RecorderStatus : "idle" | "init" | "recording"

enum RecorderError : "stream-init" | "recorder-init"