1---
2category: Sensors
3related: useUserMedia
4---
5 
6# useDisplayMedia
7 
8Reactive [`mediaDevices.getDisplayMedia`](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getDisplayMedia) streaming.
9 
10## Usage
11 
12```vue
13<script setup lang="ts">
14import { useDisplayMedia } from '@vueuse/core'
15import { useTemplateRef } from 'vue'
16 
17const { stream, start } = useDisplayMedia()
18 
19// start streaming
20start()
21 
22const videoRef = useTemplateRef('video')
23watchEffect(() => {
24  // preview on a video element
25  videoRef.value.srcObject = stream.value
26})
27</script>
28 
29<template>
30  <video ref="video" />
31</template>
32```
33 
34## Type Declarations
35 
36```ts
37export interface UseDisplayMediaOptions extends ConfigurableNavigator {
38  /**
39   * If the stream is enabled
40   * @default false
41   */
42  enabled?: MaybeRef<boolean>
43  /**
44   * If the stream video media constraints
45   */
46  video?: boolean | MediaTrackConstraints | undefined
47  /**
48   * If the stream audio media constraints
49   */
50  audio?: boolean | MediaTrackConstraints | undefined
51}
52export interface UseDisplayMediaReturn extends Supportable {
53  stream: ShallowRef<MediaStream | undefined>
54  start: () => Promise<MediaStream | undefined>
55  stop: () => void
56  enabled: ShallowRef<boolean>
57}
58/**
59 * Reactive `mediaDevices.getDisplayMedia` streaming
60 *
61 * @see https://vueuse.org/useDisplayMedia
62 * @param options
63 */
64export declare function useDisplayMedia(
65  options?: UseDisplayMediaOptions,
66): UseDisplayMediaReturn
67```
68