react-hook-recorder

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)

Returns (object)

Types

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

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