跳到主要内容

useUserMedia

分类
导出大小
633 B
上次更改
上个月
相关

响应式 mediaDevices.getUserMedia 流媒体。

演示

用法

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>

设备

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
, }
}) })

类型声明

显示类型声明
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.cn/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
>

来源

源代码演示文档

贡献者

Anthony Fu
IlyaL
Anthony Fu
bab
SerKo
OrbisK
Waleed Khaled
Martin
Jelf
wheat
Shinigami
Alex Kozack

更新日志

4b3e9 - 修复:对约束添加深度监听 (#5046)
v12.8.0
7432f - feat(types): 废弃 MaybeRefMaybeRefOrGetter,转而使用 Vue 的原生类型 (#4636)
v12.3.0
59f75 - feat(toValue): 废弃 @vueuse/shared 中的 toValue,转而使用 Vue 的原生函数
0a9ed - feat!: 放弃对 Vue 2 的支持,优化打包并清理 (#4349)
v10.8.0
6d44d - 修复:在作用域销毁时停止流媒体 (#3757)

根据 MIT 许可证发布。