useUserMedia

GitHub

Custom hook that captures audio and video from the user's device. It handles permission errors, stream management, and cleanup automatically.

Installation

npx sse-hooks add use-user-media

yarn dlx sse-hooks add use-user-media

pnpm dlx sse-hooks add use-user-media

deno run -A npm:sse-hooks add use-user-media

bunx sse-hooks add use-user-media

Usage

example.ts

import { useUserMedia } from "./{hooks file}";

const { stream, error, startCapture, stopCapture } = useUserMedia();

return (
  <div>
    {error && <p>Error: {error}</p>}
    <video
      autoPlay
      muted
      playsInline
      ref={(node) => {
        if (node && stream) node.srcObject = stream;
      }}
    />
    <button onClick={() => startCapture()}>Start Camera</button>
    <button onClick={stopCapture}>Stop Camera</button>
  </div>
);

API

Parameters

Prop	Default	Type
`initialConstraints`	`DEFAULT_CONSTRAINTS`	`UseUserMediaConstraints` The initial constraints for audio and video.

Returns

Return Value	Default	Type
`error`	-	`string \| null` An error message string if the media capture failed, or null otherwise.
`isLoading`	-	`boolean` A boolean indicating if the media stream is currently loading (requesting permission).
`isSupported`	-	`boolean` A boolean indicating if the `getUserMedia` API is supported in the current environment.
`startCapture`	-	`(constraints: UseUserMediaConstraints) => Promise<void>` Function to start capturing media. Accepts optional constraints to override defaults.
`stopCapture`	-	`() => void` Function to stop the current media capture and release tracks.
`stream`	-	`MediaStream \| null` The current MediaStream object, or null if no stream is active.

Types Aliases

No specific type aliases defined for this component.

Changelog

c165d — feat: enhance useRoleGuard and useSSR hooks with additional options and documentation

30da4 — feat: add new hooks and their metadata

b17e8 — feat: add computed and reactive hooks with support for audio recording and media session management

useScreenShare

Custom hook that captures the user's screen or specific application window. It handles permission errors, stream management, native stop events, and cleanup.

useWindowSize

Custom hook that tracks the size of the window.