use-all-recorder React Hook

use-all-recorder is a custom React hook that provides functionality to record audio & video.

It allows you to start, stop, pause, resume, and get the state of the recording.

Usage

npm i use-all-recorder

import useRecorder from "use-all-recorder";
import { useRef } from "react";
function App() {
  const [recordState, setRecordState] = useState("Loading...");
  const [start, stop, pause, resume, getState] = useRecorder({
    mediaStreamConstraints: {
      audio: true,
    },
    onInit: () => console.log("recorder initialized"),
    onFailedToLoad: () => console.log("recorder failed to load"),
    onStateChange: setRecordState,
  });

  return (
    <>
      <h1>Recording State : {recordState}</h1>
      <button disabled={recordState !== "inactive"} onClick={() => start()}>
        Start
      </button>
      <button disabled={recordState !== "recording"} onClick={() => pause()}>
        Pause
      </button>
      <button disabled={recordState !== "paused"} onClick={() => resume()}>
        Resume
      </button>
      <button
        disabled={recordState !== "recording"}
        onClick={() => {
          stop().then((myRecordingBlob) => {
            //Please note post stop recording state will be inactive
            console.log(
              "saved recording : ",
              myRecordingBlob,
              URL.createObjectURL(myRecordingBlob)
            );
          });
        }}
      >
        Stop
      </button>
    </>
  );
}