SSE Hooks

useScreenShare

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

Installation

npx sse-hooks add use-screen-share

yarn dlx sse-hooks add use-screen-share

pnpm dlx sse-hooks add use-screen-share

deno run -A npm:sse-hooks add use-screen-share

bunx sse-hooks add use-screen-share

Usage

example.ts

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

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

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

API

Parameters

Prop	Default	Type
`initialOptions`	`DEFAULT_OPTIONS`	`UseScreenShareOptions` The initial options for screen sharing (video/audio).

Returns

Return Value	Default	Type
`error`	-	`string \| null`
`isLoading`	-	`boolean`
`isSupported`	-	`boolean`
`startCapture`	-	`(options: UseScreenShareOptions) => Promise<void>`
`stopCapture`	-	`() => void`
`stream`	-	`MediaStream \| null`

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

2f161 — feat: add useConferenceSystem, useKbd, useMediaQuality, useNetworkInformation, usePortal, useRoleGuard, useScreenShare, useSymbol hooks

useScreen

Custom hook that tracks the `screen` dimensions and properties.

useUserMedia

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