VueUseuseDisplayMedia
Reactive mediaDevices.getDisplayMedia streaming.
Demo
Usage
ts
import { useDisplayMedia } from '@vueuse/core'
const { stream, start } = useDisplayMedia()
// start streaming
start()
import { useDisplayMedia } from '@vueuse/core'
const { stream, start } = useDisplayMedia()
// start streaming
start()
ts
const video = document.getElementById('video')
watchEffect(() => {
// preview on a video element
video.srcObject = stream.value
})
const video = document.getElementById('video')
watchEffect(() => {
// preview on a video element
video.srcObject = stream.value
})
Type Declarations
typescript
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
}
/**
* Reactive `mediaDevices.getDisplayMedia` streaming
*
* @see https://vueuse.org/useDisplayMedia
* @param options
*/
export declare function useDisplayMedia(options?: UseDisplayMediaOptions): {
isSupported: Ref<boolean>
stream: Ref<MediaStream | undefined>
start: () => Promise<MediaStream | undefined>
stop: () => void
enabled: Ref<boolean>
}
export type UseDisplayMediaReturn = ReturnType<typeof useDisplayMedia>
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
}
/**
* Reactive `mediaDevices.getDisplayMedia` streaming
*
* @see https://vueuse.org/useDisplayMedia
* @param options
*/
export declare function useDisplayMedia(options?: UseDisplayMediaOptions): {
isSupported: Ref<boolean>
stream: Ref<MediaStream | undefined>
start: () => Promise<MediaStream | undefined>
stop: () => void
enabled: Ref<boolean>
}
export type UseDisplayMediaReturn = ReturnType<typeof useDisplayMedia>
Source
Contributors
Anthony Fu
Jelf
wheat
Abderrahim SOUBAI-ELIDRISI