Vize

use-display-media

Capture a screen, window, or tab with getDisplayMedia.

Package @vizejs/composable/use-display-media
Own the source vize lib pull composable:use-display-media
Runtime exports useDisplayMedia
Gzip budget 3584 B

Usage

import { useDisplayMedia } from "@vizejs/composable/use-display-media";

Runtime contract

Utility Category Stability SSR Hydration Cleanup Targets Host globals Uses
useDisplayMedia media experimental deterministic-fallback caller-managed caller, reactive-scope web, desktop window useMediaStream

API

useDisplayMedia

Capture a screen, window, or tab with getDisplayMedia. Shares the stream lifecycle of useMediaStream (from use-user-media): classified failures ("permission-denied" when the user dismisses the picker), latest-wins requests, and automatic return to "idle" when the user ends sharing from the browser UI (every track ended). Tracks are stopped when the owning reactive scope stops. Server rendering: nothing is captured; status is "idle" and supported is false.

function useDisplayMedia(options: UseDisplayMediaOptions = {}): MediaStreamControls
const screen = useDisplayMedia({ audio: true });
const share = () => screen.start();

Types

DisplayMediaHost

Minimal MediaDevices consumed by useDisplayMedia.

Member Type Description
getDisplayMedia (options?: DisplayMediaStreamOptions) => Promise<MediaStreamLike> Ask the user to pick a screen, window, or tab to capture.

UseDisplayMediaOptions

Options for useDisplayMedia.

Member Type Description
video? MaybeRefOrGetter<boolean | MediaTrackConstraints> Video capture constraints.
audio? MaybeRefOrGetter<boolean | MediaTrackConstraints> Audio capture constraints (tab or system audio where supported).
enabled? MaybeRefOrGetter<boolean> Start while true, stop while false. Browsers require a user gesture for screen capture, so prefer calling start from an event handler.
host? MaybeRefOrGetter<DisplayMediaHost | null | undefined> MediaDevices capability for alternate runtimes and tests.