1---
2category: Sensors
3related: useDevicesList, usePermission
4---
5 
6# useUserMedia
7 
8Reactive [`mediaDevices.getUserMedia`](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia) streaming.
9 
10## Usage
11 
12```vue
13<script setup lang="ts">
14import { useUserMedia } from '@vueuse/core'
15import { useTemplateRef, watchEffect } from 'vue'
16 
17const { stream, start } = useUserMedia()
18start()
19 
20const videoRef = useTemplateRef('video')
21watchEffect(() => {
22  // preview on a video element
23  videoRef.value.srcObject = stream.value
24})
25</script>
26 
27<template>
28  <video ref="video" />
29</template>
30```
31 
32### Devices
33 
34```ts
35import { useDevicesList, useUserMedia } from '@vueuse/core'
36import { computed, reactive } from 'vue'
37 
38const {
39  videoInputs: cameras,
40  audioInputs: microphones,
41} = useDevicesList({
42  requestPermissions: true,
43})
44const currentCamera = computed(() => cameras.value[0]?.deviceId)
45const currentMicrophone = computed(() => microphones.value[0]?.deviceId)
46 
47const { stream } = useUserMedia({
48  constraints: reactive({
49    video: { deviceId: currentCamera },
50    audio: { deviceId: currentMicrophone, }
51  })
52})
53```
54 
55## Type Declarations
56 
57```ts
58export interface UseUserMediaOptions extends ConfigurableNavigator {
59  /**
60   * If the stream is enabled
61   * @default false
62   */
63  enabled?: MaybeRef<boolean>
64  /**
65   * Recreate stream when deviceIds or constraints changed
66   *
67   * @default true
68   */
69  autoSwitch?: MaybeRef<boolean>
70  /**
71   * MediaStreamConstraints to be applied to the requested MediaStream
72   * If provided, the constraints will override videoDeviceId and audioDeviceId
73   *
74   * @default {}
75   */
76  constraints?: MaybeRef<MediaStreamConstraints>
77}
78export interface UseUserMediaReturn extends Supportable {
79  stream: Ref<MediaStream | undefined>
80  start: () => Promise<MediaStream | undefined>
81  stop: () => void
82  restart: () => Promise<MediaStream | undefined>
83  constraints: Ref<MediaStreamConstraints | undefined>
84  enabled: ShallowRef<boolean>
85  autoSwitch: ShallowRef<boolean>
86}
87/**
88 * Reactive `mediaDevices.getUserMedia` streaming
89 *
90 * @see https://vueuse.org/useUserMedia
91 * @param options
92 */
93export declare function useUserMedia(
94  options?: UseUserMediaOptions,
95): UseUserMediaReturn
96```
97