useMediaDevices

See: MediaDevices interface methods, that give access to any hardware source of media data.

Demo

INFO

The component uses useMediaDevices to get list of all media devices and groups them into CAMERA SPEAKERS and MICROPHONE sections.

Loading demo…

Show source code

import { useState } from "react";
import { useMediaDevices } from "../../../.."

export const UseMediaDevices = () => {
	const action = useMediaDevices("devicesList");
	const [devices, setDevices] = useState<MediaDeviceInfo[]>([]);

	const onClick = async () => {
		try {
			const devices = await action(async () => {
				setDevices(await action());
			});
			setDevices(devices.reduce((prev, curr) => {
				if (prev.every(el => el.deviceId !== curr.deviceId)) {
					prev.push(curr);
				}
				return prev;
			}, [] as MediaDeviceInfo[]));
		} catch (error) {
			alert((error as Error).message);
		}
	}

	return <div style={{ display: "grid", gridTemplateRows: "auto auto", justifyContent: "center", gap: 50, maxHeight: 350, overflow: "auto" }}>
		<button onClick={onClick}>Acquire</button>
		<div style={{ display: "grid", gridTemplateColumns: "auto auto auto", justifyContent: "center", gap: 50, maxHeight: 350, overflow: "auto" }}>
			<div style={{textAlign: "center"}}>
				<p>Camera {devices.filter(el => el.kind === "videoinput").length}</p>
				<ul>
					{
						devices.filter(el => el.kind === "videoinput").map(el => <li key={el.label}>{el.label}</li>)
					}
				</ul>
			</div>
			<div style={{textAlign: "center"}}>
				<p>Spearker {devices.filter(el => el.kind === "audiooutput").length}</p>
				<ul>
					{
						devices.filter(el => el.kind === "audiooutput").map(el => <li key={el.label}>{el.label}</li>)
					}
				</ul>
			</div>
			<div style={{textAlign: "center"}}>
				<p>Microphones {devices.filter(el => el.kind === "audioinput").length}</p>
				<ul>
					{
						devices.filter(el => el.kind === "audioinput").map(el => <li key={el.label}>{el.label}</li>)
					}
				</ul>
			</div>
		</div>
	</div>
}

Types

UseMediaDevicesProps

Prop accepted by useMediaDevices

export type UseMediaDevicesProps = "devicesList" | "supportedConstraintsList" | "DisplayCapture" | "mediaInputCapture";

UseMediaDevicesResult

Represents the return type of useMediaDevices, which varies depending on the action parameter passed to the hook. Each variant corresponds to a specific MediaDevices API method.

export type UseMediaDevicesResult = (
	(onDevicesChange?: ((evt: Event) => void | Promise<void>) | undefined) => Promise<MediaDeviceInfo[]>) |
	((onDevicesChange?: ((evt: Event) => void | Promise<void>) | undefined) => MediaTrackSupportedConstraints) |
	((options?: DisplayMediaStreamOptions, onDevicesChange?: ((evt: Event) => void | Promise<void>) | undefined) => Promise<MediaStream>) |
	((constraints?: MediaStreamConstraints, onDevicesChange?: ((evt: Event) => void | Promise<void>) | undefined) => Promise<MediaStream>
);

CaptureController

The CaptureController interface provides methods that can be used to further manipulate a capture session separate from its initiation via MediaDevices.getDisplayMedia().

Property	Type	Required	Description
setFocusBehavior	( focusBehavior: "focus-captured-surface" \| "no-focus-change" ) => void	✓	controls whether the captured tab or window will be focused when an associated MediaDevices.getDisplayMedia() Promise fulfills, or whether the focus will remain with the tab containing the capturing app.

TDisplayMediaStreamOptions

export type TDisplayMediaStreamOptions = DisplayMediaStreamOptions & {
	controller?: CaptureController;
}