@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 | Enable or configure audio recording. | | video | boolean | MediaTrackConstraints | Enable or configure video recording. | | 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 | Current error state. | | blobUrl | string | null | URL of the recorded media blob. | | 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 | Current error state. | | 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 | URL of the recorded media blob. | | 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.