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"