useUserMedia

反应式 mediaDevices.getUserMedia 流式传输。

¥Reactive mediaDevices.getUserMedia streaming.

示例

源代码playground (beta)

用法

¥Usage

import { useUserMedia } from '@vueuse/core'

const { stream, start } = useUserMedia()

start()

const video = document.getElementById('video')

watchEffect(() => {
  // preview on a video element
  video.srcObject = stream.value
})

设备

¥Devices

import { useDevicesList, useUserMedia } from '@vueuse/core'

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