@toolsify/recorder

A lightweight library for recording media streams in React applications. This library provides hooks and components to simplify media recording and previewing.

Features

• Record audio, video, or screen streams.
• Pause, resume, and stop recordings.
• Mute/unmute audio during recording.
• Preview live media streams.
• Built-in support for extendable-media-recorder and extendable-media-recorder-wav-encoder.

Installation

Install the package using npm or yarn:

npm install @toolsify/recorder
# or
yarn add @toolsify/recorder

Components

PreviewEl

A React component for previewing live media streams.

Props

• stream (MediaStream): The media stream to preview.
• props (Optional): Additional props for the <video> element, excluding src, controls, and autoPlay.

Example

import React from "react";
import { PreviewEl } from "@toolsify/recorder";

const App = () => {
  const { preview } = useMediaRecorder({ audio: true, video: true,});
  return <PreviewEl stream={preview?.video} />;
};

export default App;

Hooks

useMediaRecorder

A custom React hook for managing media recording.

Option	Type	Description
audio	`boolean	MediaTrackConstraints`
video	`boolean	MediaTrackConstraints`
screen	boolean	Enable screen recording.
onStop	function	Callback invoked when recording stops. Receives the blob URL and blob as arguments.
onStart	function	Callback invoked when recording starts.
blobPropertyBag	BlobPropertyBag	Options for the recorded blob.
options	MediaRecorderOptions	Options for the MediaRecorder.

Return Value	Type	Description
start	function	Start recording.
stop	function	Stop recording.
pause	function	Pause recording.
resume	function	Resume recording.
mute	function	Mute/unmute audio.
isMuted	boolean	Boolean indicating if audio is muted.
status	string	Current recording status.
error	`string	null`
blobUrl	`string	null`
preview	object	Object containing video and audio streams for preview.
clearBlob	function	Clear the recorded blob URL.

Example

import React from "react";
import { useMediaRecorder } from "@toolsify/recorder";

const App = () => {
  const {
    start,
    stop,
    pause,
    resume,
    mute,
    isMuted,
    status,
    blobUrl,
  } = useMediaRecorder({ audio: true, video: true });

  return (
    <div>
      <button onClick={start}>Start</button>
      <button onClick={pause}>Pause</button>
      <button onClick={resume}>Resume</button>
      <button onClick={stop}>Stop</button>
      <button onClick={() => mute(!isMuted)}>
        {isMuted ? "Unmute" : "Mute"}
      </button>
      {blobUrl && <video src={blobUrl} controls />}
    </div>
  );
};

export default App;

Types

IRMediaRecorder

Property	Type	Description
error	`string	null`
status	string	Current recording status.
start	function	Start recording.
stop	function	Stop recording.
pause	function	Pause recording.
resume	function	Resume recording.
mute	function	Mute/unmute audio.
isMuted	boolean	Boolean indicating if audio is muted.
blobUrl	`string	null`
preview	object	Object containing video and audio streams for preview.
clearBlob	function	Clear the recorded blob URL.

IRecorderOptions

Property	Type	Description
audio	boolean	Enable or configure audio recording.
video	boolean	Enable or configure video recording.
screen	boolean	Enable screen recording.
onStop	function	Callback invoked when recording stops.
onStart	function	Callback invoked when recording starts.
blobPropertyBag	BlobPropertyBag	Options for the recorded blob.
options	MediaRecorderOptions	Options for the MediaRecorder.

Development

Folder Structure

src/
├── components/
│   └── Preview.tsx          # Component for previewing media streams
├── hooks/
│   └── useMediaRecorder.ts  # Hook for managing media recording
├── types/
│   └── index.tsx             # Type definitions
└── index.tsx                 # Library entry point

Build Locally

• build: Build the library using tsup.
• dev: Watch for changes and rebuild the library.
• clean: Remove build artifacts and dependencies.

License

This project is licensed under the MIT License.