useDisplayMedia

v0.0.14testeddemo

Reactive mediaDevices.getDisplayMedia (screen share) streaming.

Examples

const { stream, enabled, isSupported } = useDisplayMedia();
videoEl.srcObject = stream.value ?? null;
enabled.value = true; // prompts the screen-share picker

const { start, stop } = useDisplayMedia({ audio: true });
await start();

Demo

Loading demo…

Signature

export function useDisplayMedia(options: UseDisplayMediaOptions ={ ... }

Parameters

Parameter	Type	Default	Description
`options`?	`UseDisplayMediaOptions`	`{}`	Options

Returns

UseDisplayMediaReturnstream, start, stop, enabled and isSupported

Property	Type	Default	Description
`isSupported`	`Readonly<Ref<boolean>>`	—	Whether `navigator.mediaDevices.getDisplayMedia` is available.
`stream`	`ShallowRef<MediaStream \| undefined>`	—	The active `MediaStream`, or `undefined` when not sharing.
`start`	`() => Promise<MediaStream \| undefined>`	—	Request the screen-share picker and start the stream. Resolves to the stream (or `undefined` when unsupported / cancelled). Concurrent calls are deduped and an already-running stream is returned as-is.
`stop`	`() => void`	—	Stop every track and clear the stream.
`enabled`	`ShallowRef<boolean>`	—	Two-way switch mirroring the live state of the stream. Set it to `true` to start sharing and `false` to stop.