Skip to content

useUserMedia

反应式 mediaDevices.getUserMedia 流式传输。

¥Reactive mediaDevices.getUserMedia streaming.

示例

用法

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