VueUse (original) (raw)
useUserMedia
Category
Export Size
633 B
Last Changed
3 months ago
Related
Reactive mediaDevices.getUserMedia streaming.
Demo
Usage
vue
<script setup lang="ts">
import {
useUserMedia
} from '@vueuse/core'
import {
useTemplateRef
,
watchEffect
} from 'vue'
const {
stream
,
start
} =
useUserMedia
()
start
()
const
videoRef
=
useTemplateRef
('video')
watchEffect
(() => {
// preview on a video element
videoRef
.
value
.
srcObject
=
stream
.
value
})
</script>
<template>
<
video
ref
="
video
" />
</template>Devices
ts
import {
useDevicesList
,
useUserMedia
} from '@vueuse/core'
import {
computed
,
reactive
} from 'vue'
const {
videoInputs
:
cameras
,
audioInputs
:
microphones
,
} =
useDevicesList
({
requestPermissions
: true,
})
const
currentCamera
=
computed
(() =>
cameras
.
value
[0]?.
deviceId
)
const
currentMicrophone
=
computed
(() =>
microphones
.
value
[0]?.
deviceId
)
const {
stream
} =
useUserMedia
({
constraints
:
reactive
({
video
: {
deviceId
:
currentCamera
},
audio
: {
deviceId
:
currentMicrophone
, }
})
})Type Declarations
Show Type Declarations
ts
export interface UseUserMediaOptions extends ConfigurableNavigator {
/**
* If the stream is enabled
* @default false
*/
enabled
?:
MaybeRef
<boolean>
/**
* Recreate stream when deviceIds or constraints changed
*
* @default true
*/
autoSwitch
?:
MaybeRef
<boolean>
/**
* MediaStreamConstraints to be applied to the requested MediaStream
* If provided, the constraints will override videoDeviceId and audioDeviceId
*
* @default {}
*/
constraints
?:
MaybeRef
<MediaStreamConstraints>
}
/**
* Reactive `mediaDevices.getUserMedia` streaming
*
* @see https://vueuse.org/useUserMedia
* @param options
*/
export declare function
useUserMedia
(
options
?: UseUserMediaOptions): {
isSupported
:
ComputedRef
<boolean>
stream
:
Ref
<MediaStream | undefined, MediaStream | undefined>
start
: () =>
Promise
<MediaStream | undefined>
stop
: () => void
restart
: () =>
Promise
<MediaStream | undefined>
constraints
:
Ref
<
| MediaStreamConstraints
| {
audio
?:
| boolean
| {
advanced
?:
| {
aspectRatio
?:
| number
| {
exact
?: number | undefined
ideal
?: number | undefined
max
?: number | undefined
min
?: number | undefined
}
| undefined
autoGainControl
?:
| boolean
| {
exact
?: boolean | undefined
ideal
?: boolean | undefined
}
| undefined
backgroundBlur
?:
| boolean
| {
exact
?: boolean | undefined
ideal
?: boolean | undefined
}
| undefined
channelCount
?:
| number
| {
exact
?: number | undefined
ideal
?: number | undefined
max
?: number | undefined
min
?: number | undefined
}
| undefined
deviceId
?:
| string
| string[]
| {
exact
?: string | string[] | undefined
ideal
?: string | string[] | undefined
}
| undefined
displaySurface
?:
| string
| string[]
| {
exact
?: string | string[] | undefined
ideal
?: string | string[] | undefined
}
| undefined
echoCancellation
?:
| boolean
| {
exact
?: boolean | undefined
ideal
?: boolean | undefined
}
| undefined
facingMode
?:
| string
| string[]
| {
exact
?: string | string[] | undefined
ideal
?: string | string[] | undefined
}
| undefined
frameRate
?:
| number
| {
exact
?: number | undefined
ideal
?: number | undefined
max
?: number | undefined
min
?: number | undefined
}
| undefined
groupId
?:
| string
| string[]
| {
exact
?: string | string[] | undefined
ideal
?: string | string[] | undefined
}
| undefined
height
?:
| number
| {
exact
?: number | undefined
ideal
?: number | undefined
max
?: number | undefined
min
?: number | undefined
}
| undefined
noiseSuppression
?:
| boolean
| {
exact
?: boolean | undefined
ideal
?: boolean | undefined
}
| undefined
sampleRate
?:
| number
| {
exact
?: number | undefined
ideal
?: number | undefined
max
?: number | undefined
min
?: number | undefined
}
| undefined
sampleSize
?:
| number
| {
exact
?: number | undefined
ideal
?: number | undefined
max
?: number | undefined
min
?: number | undefined
}
| undefined
width
?:
| number
| {
exact
?: number | undefined
ideal
?: number | undefined
max
?: number | undefined
min
?: number | undefined
}
| undefined
}[]
| undefined
aspectRatio
?:
| number
| {
exact
?: number | undefined
ideal
?: number | undefined
max
?: number | undefined
min
?: number | undefined
}
| undefined
autoGainControl
?:
| boolean
| {
exact
?: boolean | undefined
ideal
?: boolean | undefined
}
| undefined
backgroundBlur
?:
| boolean
| {
exact
?: boolean | undefined
ideal
?: boolean | undefined
}
| undefined
channelCount
?:
| number
| {
exact
?: number | undefined
ideal
?: number | undefined
max
?: number | undefined
min
?: number | undefined
}
| undefined
deviceId
?:
| string
| string[]
| {
exact
?: string | string[] | undefined
ideal
?: string | string[] | undefined
}
| undefined
displaySurface
?:
| string
| string[]
| {
exact
?: string | string[] | undefined
ideal
?: string | string[] | undefined
}
| undefined
echoCancellation
?:
| boolean
| {
exact
?: boolean | undefined
ideal
?: boolean | undefined
}
| undefined
facingMode
?:
| string
| string[]
| {
exact
?: string | string[] | undefined
ideal
?: string | string[] | undefined
}
| undefined
frameRate
?:
| number
| {
exact
?: number | undefined
ideal
?: number | undefined
max
?: number | undefined
min
?: number | undefined
}
| undefined
groupId
?:
| string
| string[]
| {
exact
?: string | string[] | undefined
ideal
?: string | string[] | undefined
}
| undefined
height
?:
| number
| {
exact
?: number | undefined
ideal
?: number | undefined
max
?: number | undefined
min
?: number | undefined
}
| undefined
noiseSuppression
?:
| boolean
| {
exact
?: boolean | undefined
ideal
?: boolean | undefined
}
| undefined
sampleRate
?:
| number
| {
exact
?: number | undefined
ideal
?: number | undefined
max
?: number | undefined
min
?: number | undefined
}
| undefined
sampleSize
?:
| number
| {
exact
?: number | undefined
ideal
?: number | undefined
max
?: number | undefined
min
?: number | undefined
}
| undefined
width
?:
| number
| {
exact
?: number | undefined
ideal
?: number | undefined
max
?: number | undefined
min
?: number | undefined
}
| undefined
}
| undefined
peerIdentity
?: string | undefined
preferCurrentTab
?: boolean | undefined
video
?:
| boolean
| {
advanced
?:
| {
aspectRatio
?:
| number
| {
exact
?: number | undefined
ideal
?: number | undefined
max
?: number | undefined
min
?: number | undefined
}
| undefined
autoGainControl
?:
| boolean
| {
exact
?: boolean | undefined
ideal
?: boolean | undefined
}
| undefined
backgroundBlur
?:
| boolean
| {
exact
?: boolean | undefined
ideal
?: boolean | undefined
}
| undefined
channelCount
?:
| number
| {
exact
?: number | undefined
ideal
?: number | undefined
max
?: number | undefined
min
?: number | undefined
}
| undefined
deviceId
?:
| string
| string[]
| {
exact
?: string | string[] | undefined
ideal
?: string | string[] | undefined
}
| undefined
displaySurface
?:
| string
| string[]
| {
exact
?: string | string[] | undefined
ideal
?: string | string[] | undefined
}
| undefined
echoCancellation
?:
| boolean
| {
exact
?: boolean | undefined
ideal
?: boolean | undefined
}
| undefined
facingMode
?:
| string
| string[]
| {
exact
?: string | string[] | undefined
ideal
?: string | string[] | undefined
}
| undefined
frameRate
?:
| number
| {
exact
?: number | undefined
ideal
?: number | undefined
max
?: number | undefined
min
?: number | undefined
}
| undefined
groupId
?:
| string
| string[]
| {
exact
?: string | string[] | undefined
ideal
?: string | string[] | undefined
}
| undefined
height
?:
| number
| {
exact
?: number | undefined
ideal
?: number | undefined
max
?: number | undefined
min
?: number | undefined
}
| undefined
noiseSuppression
?:
| boolean
| {
exact
?: boolean | undefined
ideal
?: boolean | undefined
}
| undefined
sampleRate
?:
| number
| {
exact
?: number | undefined
ideal
?: number | undefined
max
?: number | undefined
min
?: number | undefined
}
| undefined
sampleSize
?:
| number
| {
exact
?: number | undefined
ideal
?: number | undefined
max
?: number | undefined
min
?: number | undefined
}
| undefined
width
?:
| number
| {
exact
?: number | undefined
ideal
?: number | undefined
max
?: number | undefined
min
?: number | undefined
}
| undefined
}[]
| undefined
aspectRatio
?:
| number
| {
exact
?: number | undefined
ideal
?: number | undefined
max
?: number | undefined
min
?: number | undefined
}
| undefined
autoGainControl
?:
| boolean
| {
exact
?: boolean | undefined
ideal
?: boolean | undefined
}
| undefined
backgroundBlur
?:
| boolean
| {
exact
?: boolean | undefined
ideal
?: boolean | undefined
}
| undefined
channelCount
?:
| number
| {
exact
?: number | undefined
ideal
?: number | undefined
max
?: number | undefined
min
?: number | undefined
}
| undefined
deviceId
?:
| string
| string[]
| {
exact
?: string | string[] | undefined
ideal
?: string | string[] | undefined
}
| undefined
displaySurface
?:
| string
| string[]
| {
exact
?: string | string[] | undefined
ideal
?: string | string[] | undefined
}
| undefined
echoCancellation
?:
| boolean
| {
exact
?: boolean | undefined
ideal
?: boolean | undefined
}
| undefined
facingMode
?:
| string
| string[]
| {
exact
?: string | string[] | undefined
ideal
?: string | string[] | undefined
}
| undefined
frameRate
?:
| number
| {
exact
?: number | undefined
ideal
?: number | undefined
max
?: number | undefined
min
?: number | undefined
}
| undefined
groupId
?:
| string
| string[]
| {
exact
?: string | string[] | undefined
ideal
?: string | string[] | undefined
}
| undefined
height
?:
| number
| {
exact
?: number | undefined
ideal
?: number | undefined
max
?: number | undefined
min
?: number | undefined
}
| undefined
noiseSuppression
?:
| boolean
| {
exact
?: boolean | undefined
ideal
?: boolean | undefined
}
| undefined
sampleRate
?:
| number
| {
exact
?: number | undefined
ideal
?: number | undefined
max
?: number | undefined
min
?: number | undefined
}
| undefined
sampleSize
?:
| number
| {
exact
?: number | undefined
ideal
?: number | undefined
max
?: number | undefined
min
?: number | undefined
}
| undefined
width
?:
| number
| {
exact
?: number | undefined
ideal
?: number | undefined
max
?: number | undefined
min
?: number | undefined
}
| undefined
}
| undefined
}
| undefined,
|
MaybeRef
<MediaStreamConstraints>
| {
audio
?:
| boolean
| {
advanced
?:
| {
aspectRatio
?:
| number
| {
exact
?: number | undefined
ideal
?: number | undefined
max
?: number | undefined
min
?: number | undefined
}
| undefined
autoGainControl
?:
| boolean
| {
exact
?: boolean | undefined
ideal
?: boolean | undefined
}
| undefined
backgroundBlur
?:
| boolean
| {
exact
?: boolean | undefined
ideal
?: boolean | undefined
}
| undefined
channelCount
?:
| number
| {
exact
?: number | undefined
ideal
?: number | undefined
max
?: number | undefined
min
?: number | undefined
}
| undefined
deviceId
?:
| string
| string[]
| {
exact
?: string | string[] | undefined
ideal
?: string | string[] | undefined
}
| undefined
displaySurface
?:
| string
| string[]
| {
exact
?: string | string[] | undefined
ideal
?: string | string[] | undefined
}
| undefined
echoCancellation
?:
| boolean
| {
exact
?: boolean | undefined
ideal
?: boolean | undefined
}
| undefined
facingMode
?:
| string
| string[]
| {
exact
?: string | string[] | undefined
ideal
?: string | string[] | undefined
}
| undefined
frameRate
?:
| number
| {
exact
?: number | undefined
ideal
?: number | undefined
max
?: number | undefined
min
?: number | undefined
}
| undefined
groupId
?:
| string
| string[]
| {
exact
?: string | string[] | undefined
ideal
?: string | string[] | undefined
}
| undefined
height
?:
| number
| {
exact
?: number | undefined
ideal
?: number | undefined
max
?: number | undefined
min
?: number | undefined
}
| undefined
noiseSuppression
?:
| boolean
| {
exact
?: boolean | undefined
ideal
?: boolean | undefined
}
| undefined
sampleRate
?:
| number
| {
exact
?: number | undefined
ideal
?: number | undefined
max
?: number | undefined
min
?: number | undefined
}
| undefined
sampleSize
?:
| number
| {
exact
?: number | undefined
ideal
?: number | undefined
max
?: number | undefined
min
?: number | undefined
}
| undefined
width
?:
| number
| {
exact
?: number | undefined
ideal
?: number | undefined
max
?: number | undefined
min
?: number | undefined
}
| undefined
}[]
| undefined
aspectRatio
?:
| number
| {
exact
?: number | undefined
ideal
?: number | undefined
max
?: number | undefined
min
?: number | undefined
}
| undefined
autoGainControl
?:
| boolean
| {
exact
?: boolean | undefined
ideal
?: boolean | undefined
}
| undefined
backgroundBlur
?:
| boolean
| {
exact
?: boolean | undefined
ideal
?: boolean | undefined
}
| undefined
channelCount
?:
| number
| {
exact
?: number | undefined
ideal
?: number | undefined
max
?: number | undefined
min
?: number | undefined
}
| undefined
deviceId
?:
| string
| string[]
| {
exact
?: string | string[] | undefined
ideal
?: string | string[] | undefined
}
| undefined
displaySurface
?:
| string
| string[]
| {
exact
?: string | string[] | undefined
ideal
?: string | string[] | undefined
}
| undefined
echoCancellation
?:
| boolean
| {
exact
?: boolean | undefined
ideal
?: boolean | undefined
}
| undefined
facingMode
?:
| string
| string[]
| {
exact
?: string | string[] | undefined
ideal
?: string | string[] | undefined
}
| undefined
frameRate
?:
| number
| {
exact
?: number | undefined
ideal
?: number | undefined
max
?: number | undefined
min
?: number | undefined
}
| undefined
groupId
?:
| string
| string[]
| {
exact
?: string | string[] | undefined
ideal
?: string | string[] | undefined
}
| undefined
height
?:
| number
| {
exact
?: number | undefined
ideal
?: number | undefined
max
?: number | undefined
min
?: number | undefined
}
| undefined
noiseSuppression
?:
| boolean
| {
exact
?: boolean | undefined
ideal
?: boolean | undefined
}
| undefined
sampleRate
?:
| number
| {
exact
?: number | undefined
ideal
?: number | undefined
max
?: number | undefined
min
?: number | undefined
}
| undefined
sampleSize
?:
| number
| {
exact
?: number | undefined
ideal
?: number | undefined
max
?: number | undefined
min
?: number | undefined
}
| undefined
width
?:
| number
| {
exact
?: number | undefined
ideal
?: number | undefined
max
?: number | undefined
min
?: number | undefined
}
| undefined
}
| undefined
peerIdentity
?: string | undefined
preferCurrentTab
?: boolean | undefined
video
?:
| boolean
| {
advanced
?:
| {
aspectRatio
?:
| number
| {
exact
?: number | undefined
ideal
?: number | undefined
max
?: number | undefined
min
?: number | undefined
}
| undefined
autoGainControl
?:
| boolean
| {
exact
?: boolean | undefined
ideal
?: boolean | undefined
}
| undefined
backgroundBlur
?:
| boolean
| {
exact
?: boolean | undefined
ideal
?: boolean | undefined
}
| undefined
channelCount
?:
| number
| {
exact
?: number | undefined
ideal
?: number | undefined
max
?: number | undefined
min
?: number | undefined
}
| undefined
deviceId
?:
| string
| string[]
| {
exact
?: string | string[] | undefined
ideal
?: string | string[] | undefined
}
| undefined
displaySurface
?:
| string
| string[]
| {
exact
?: string | string[] | undefined
ideal
?: string | string[] | undefined
}
| undefined
echoCancellation
?:
| boolean
| {
exact
?: boolean | undefined
ideal
?: boolean | undefined
}
| undefined
facingMode
?:
| string
| string[]
| {
exact
?: string | string[] | undefined
ideal
?: string | string[] | undefined
}
| undefined
frameRate
?:
| number
| {
exact
?: number | undefined
ideal
?: number | undefined
max
?: number | undefined
min
?: number | undefined
}
| undefined
groupId
?:
| string
| string[]
| {
exact
?: string | string[] | undefined
ideal
?: string | string[] | undefined
}
| undefined
height
?:
| number
| {
exact
?: number | undefined
ideal
?: number | undefined
max
?: number | undefined
min
?: number | undefined
}
| undefined
noiseSuppression
?:
| boolean
| {
exact
?: boolean | undefined
ideal
?: boolean | undefined
}
| undefined
sampleRate
?:
| number
| {
exact
?: number | undefined
ideal
?: number | undefined
max
?: number | undefined
min
?: number | undefined
}
| undefined
sampleSize
?:
| number
| {
exact
?: number | undefined
ideal
?: number | undefined
max
?: number | undefined
min
?: number | undefined
}
| undefined
width
?:
| number
| {
exact
?: number | undefined
ideal
?: number | undefined
max
?: number | undefined
min
?: number | undefined
}
| undefined
}[]
| undefined
aspectRatio
?:
| number
| {
exact
?: number | undefined
ideal
?: number | undefined
max
?: number | undefined
min
?: number | undefined
}
| undefined
autoGainControl
?:
| boolean
| {
exact
?: boolean | undefined
ideal
?: boolean | undefined
}
| undefined
backgroundBlur
?:
| boolean
| {
exact
?: boolean | undefined
ideal
?: boolean | undefined
}
| undefined
channelCount
?:
| number
| {
exact
?: number | undefined
ideal
?: number | undefined
max
?: number | undefined
min
?: number | undefined
}
| undefined
deviceId
?:
| string
| string[]
| {
exact
?: string | string[] | undefined
ideal
?: string | string[] | undefined
}
| undefined
displaySurface
?:
| string
| string[]
| {
exact
?: string | string[] | undefined
ideal
?: string | string[] | undefined
}
| undefined
echoCancellation
?:
| boolean
| {
exact
?: boolean | undefined
ideal
?: boolean | undefined
}
| undefined
facingMode
?:
| string
| string[]
| {
exact
?: string | string[] | undefined
ideal
?: string | string[] | undefined
}
| undefined
frameRate
?:
| number
| {
exact
?: number | undefined
ideal
?: number | undefined
max
?: number | undefined
min
?: number | undefined
}
| undefined
groupId
?:
| string
| string[]
| {
exact
?: string | string[] | undefined
ideal
?: string | string[] | undefined
}
| undefined
height
?:
| number
| {
exact
?: number | undefined
ideal
?: number | undefined
max
?: number | undefined
min
?: number | undefined
}
| undefined
noiseSuppression
?:
| boolean
| {
exact
?: boolean | undefined
ideal
?: boolean | undefined
}
| undefined
sampleRate
?:
| number
| {
exact
?: number | undefined
ideal
?: number | undefined
max
?: number | undefined
min
?: number | undefined
}
| undefined
sampleSize
?:
| number
| {
exact
?: number | undefined
ideal
?: number | undefined
max
?: number | undefined
min
?: number | undefined
}
| undefined
width
?:
| number
| {
exact
?: number | undefined
ideal
?: number | undefined
max
?: number | undefined
min
?: number | undefined
}
| undefined
}
| undefined
}
| undefined
>
enabled
:
|
Ref
<boolean, boolean>
|
ShallowRef
<boolean, boolean>
|
WritableComputedRef
<boolean, boolean>
|
ShallowRef
<true, true>
|
ShallowRef
<false, false>
autoSwitch
:
|
Ref
<boolean, boolean>
|
ShallowRef
<boolean, boolean>
|
WritableComputedRef
<boolean, boolean>
|
ShallowRef
<true, true>
|
ShallowRef
<false, false>
}
export type
UseUserMediaReturn
=
ReturnType
<typeof
useUserMedia
>Source
Contributors
Changelog
4b3e9 - fix: add deep watch to constraints (#5046)
7432f - feat(types): deprecate MaybeRef and MaybeRefOrGetter in favor of Vue's native (#4636)
59f75 - feat(toValue): deprecate toValue from @vueuse/shared in favor of Vue's native
0a9ed - feat!: drop Vue 2 support, optimize bundles and clean up (#4349)