useDisplayMedia

Category

Sensors

Export Size

623 B

Last Changed

5 days ago

Related

useUserMedia

Reactive mediaDevices.getDisplayMedia streaming

Demo

Usage

import { useDisplayMedia } from '@reause/core'

const { stream, start } = useDisplayMedia()
start()

const videoRef = useRef<HTMLVideoElement>(null)
useEffect(() => {
  // preview on a video element
  videoRef.current.srcObject = stream ?? null
}, [stream])

Type Declarations

export interface UseDisplayMediaOptions extends ConfigurableNavigator {
    enabled?: boolean;
    video?: boolean | MediaTrackConstraints | undefined;
    audio?: boolean | MediaTrackConstraints | undefined;
}

export interface UseDisplayMediaReturn {
    isSupported: boolean;
    stream: MediaStream | undefined;
    start: () => Promise<MediaStream | undefined>;
    stop: () => void;
    enabled: boolean;
    setEnabled: Dispatch<SetStateAction<boolean>>;
}

export interface ConfigurableNavigator {
    navigator?: Navigator;
}

export interface UseUserMediaOptions extends ConfigurableNavigator {
    enabled?: boolean;
    autoSwitch?: boolean;
    constraints?: MediaStreamConstraints;
}

export function useDisplayMedia(options?: UseDisplayMediaOptions): UseDisplayMediaReturn

Source

Source · Demo · VueUse

Contributors

Changelog

v0.1.0 on

6061e - fix(core): resolve useDisplayMedia audit findings (#543)

1b5ae - feat(core): add useDisplayMedia (#111)