useDisplayMedia
Reactive mediaDevices.getDisplayMedia streaming.
Usage
<script setup lang="ts">
import { useDisplayMedia } from '@vueuse/core'
import { useTemplateRef } from 'vue'
const { stream, start } = useDisplayMedia()
// start streaming
start()
const videoRef = useTemplateRef('video')
watchEffect(() => {
// preview on a video element
videoRef.value.srcObject = stream.value
})
</script>
<template>
<video ref="video" />
</template>Type Declarations
export interface UseDisplayMediaOptions extends ConfigurableNavigator {
/**
* If the stream is enabled
* @default false
*/
enabled?: MaybeRef<boolean>
/**
* If the stream video media constraints
*/
video?: boolean | MediaTrackConstraints | undefined
/**
* If the stream audio media constraints
*/
audio?: boolean | MediaTrackConstraints | undefined
}
export interface UseDisplayMediaReturn extends Supportable {
stream: ShallowRef<MediaStream | undefined>
start: () => Promise<MediaStream | undefined>
stop: () => void
enabled: ShallowRef<boolean>
}
/**
* Reactive `mediaDevices.getDisplayMedia` streaming
*
* @see https://vueuse.org/useDisplayMedia
* @param options
*/
export declare function useDisplayMedia(
options?: UseDisplayMediaOptions,
): UseDisplayMediaReturn