rooks/dist/esm/hooks/useMediaRecorder.d.ts

Collection of awesome react hooks

/**
 * Recording state
 */
type RecordingState = "idle" | "recording" | "paused" | "stopped";
/**
 * Options for media recording
 */
interface MediaRecorderOptions {
    /**
     * MIME type for the recording
     */
    mimeType?: string;
    /**
     * Audio bits per second
     */
    audioBitsPerSecond?: number;
    /**
     * Video bits per second
     */
    videoBitsPerSecond?: number;
    /**
     * Overall bits per second
     */
    bitsPerSecond?: number;
}
/**
 * Return value for the useMediaRecorder hook
 */
interface UseMediaRecorderReturnValue {
    /**
     * Start recording
     */
    startRecording: () => void;
    /**
     * Stop recording
     */
    stopRecording: () => void;
    /**
     * Pause recording
     */
    pauseRecording: () => void;
    /**
     * Resume recording
     */
    resumeRecording: () => void;
    /**
     * Current recording state
     */
    recordingState: RecordingState;
    /**
     * Recorded data as a Blob
     */
    data: Blob | null;
    /**
     * URL to the recorded data
     */
    dataUrl: string | null;
    /**
     * Any error that occurred
     */
    error: Error | null;
    /**
     * Whether MediaRecorder API is supported
     */
    isSupported: boolean;
}
/**
 * useMediaRecorder hook
 *
 * Audio/video recording using the MediaRecorder API.
 * Provides methods to record, pause, resume, and stop media capture.
 *
 * @param stream - MediaStream to record (from getUserMedia, getDisplayMedia, etc.)
 * @param options - Recording options
 * @returns Object containing recording controls and state
 *
 * @example
 * ```tsx
 * import { useMediaRecorder } from "rooks";
 * import { useEffect, useState } from "react";
 *
 * function AudioRecorder() {
 *   const [stream, setStream] = useState<MediaStream | null>(null);
 *
 *   useEffect(() => {
 *     navigator.mediaDevices.getUserMedia({ audio: true })
 *       .then(setStream)
 *       .catch(console.error);
 *   }, []);
 *
 *   const {
 *     startRecording,
 *     stopRecording,
 *     pauseRecording,
 *     resumeRecording,
 *     recordingState,
 *     dataUrl,
 *     error,
 *     isSupported,
 *   } = useMediaRecorder(stream, { mimeType: "audio/webm" });
 *
 *   if (!isSupported) {
 *     return <div>MediaRecorder not supported</div>;
 *   }
 *
 *   return (
 *     <div>
 *       <h2>Audio Recorder</h2>
 *       <p>Status: {recordingState}</p>
 *       <button onClick={startRecording} disabled={recordingState === "recording"}>
 *         Start
 *       </button>
 *       <button onClick={pauseRecording} disabled={recordingState !== "recording"}>
 *         Pause
 *       </button>
 *       <button onClick={resumeRecording} disabled={recordingState !== "paused"}>
 *         Resume
 *       </button>
 *       <button onClick={stopRecording} disabled={recordingState === "idle"}>
 *         Stop
 *       </button>
 *       {dataUrl && <audio src={dataUrl} controls />}
 *       {error && <p>Error: {error.message}</p>}
 *     </div>
 *   );
 * }
 * ```
 *
 * @see https://rooks.vercel.app/docs/hooks/useMediaRecorder
 */
declare function useMediaRecorder(stream: MediaStream | null, options?: MediaRecorderOptions): UseMediaRecorderReturnValue;
export { useMediaRecorder };
export type { UseMediaRecorderReturnValue, MediaRecorderOptions, RecordingState, };