useDisplayMedia

Hook to capture the contents of a display.

Demo

INFO

The component renders a button that if clicked activate the capturing of the screen selected by user and render it on a video element.

Loading demo…

Show source code

import { useRef } from "react";
import { useDisplayMedia } from "../../../.."

export const UseDisplayMedia = () => {
	const [stream, start, stop] = useDisplayMedia();
	const ref = useRef<HTMLVideoElement>(null);

	const init = async () => {
		await start();
	}

	if (ref.current) {
		stream
			? (ref.current.srcObject = stream)
			: (ref.current.srcObject = null);
	}

	return <div style={{ display: "grid", gridTemplateRows: "auto auto auto", justifyContent: "center", gap: 20, maxHeight: 350, overflow: "auto" }}>
		<button onClick={init}>Start</button>
		<button onClick={stop}>Stop</button>
		<video autoPlay width={300} height={200} ref={ref}/>
	</div>
}

Types

UseDisplayMediaResult

Result tuple returned by useDisplayMedia.

Index	Type	Description
[0]	MediaStream \| undefined	The active display capture stream. undefined before start() is called or after stop().
[1]	(options?: TDisplayMediaStreamOptions) => Promise<void>	start — opens the display-capture picker and starts the stream.
[2]	() => void	stop — stops all tracks and releases the stream.