useDisplayMedia

browser

test coverage

Last changed: last month

TIP

This hook uses mediaDevices.getDisplayMedia browser api to provide enhanced functionality. Make sure to check for compatibility with different browsers when using this api

Hook that provides screen sharing functionality

import { useDisplayMedia } from '@siberiacancode/reactuse';

Usage

const { stream, sharing, start, stop } = useDisplayMedia(ref);
// or
const { ref, stream, sharing, start, stop } = useDisplayMedia<HTMLVideoElement>();

Demo

source

Api

Parameters

Name	Type	Default	Note
target	HookTarget	-	The target video element to display the media stream
options.audio?	boolean | MediaTrackConstraints	-	Whether to enable audio sharing
options.immediately?	boolean	false	Whether to start immediately
options.video?	boolean | MediaTrackConstraints	-	Whether to enable video sharing

Returns

UseDisplayMediaReturn

Parameters

Name	Type	Default	Note
options.audio?	boolean | MediaTrackConstraints	-	Whether to enable audio sharing
options.immediately?	boolean	false	Whether to start immediately
options.video?	boolean | MediaTrackConstraints	-	Whether to enable video sharing

Returns

UseDisplayMediaReturn & { ref: StateRef<HTMLVideoElement> }

Source

Source • Demo

Contributors

debabin