Vue.js 将媒体源流绑定到视频元素 Vue 3 组合 API

发布于07月28日

我试图使用Vue 3将摄像头提要绑定到视频元素，但我似乎甚至无法使用基本示例.有人能告诉我我错过了什么吗？

import { ref, reactive } from 'vue'
let stream: any = reactive({})
let constraints = {
    audio: false,
    video: {
      width: { min: 1024, ideal: 1280, max: 1920 },
      height: { min: 576, ideal: 720, max: 1080 },
      facingMode: 'environment'
    }
  }
stream = await navigator.mediaDevices.getUserMedia(constraints)

然后在我的模板中，我try 了以下两种方法来绑定

<video :srcObject.prop="stream" width="300" height="200" autoplay></video>
<video :srcObject.prope.camel="stream" autoplay playsinline></video>

解决方案

将stream设为ref而不是reactive，并将其value属性设置为getUserMedia()的结果.

此外，为了确保用户的资源仅在必要时激活，在组件的mounted钩子中调用getUserMedia()，并在beforeUnmount钩子中停止流.

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'

const stream = ref(null)
const constraints = {
  audio: false,
  video: {
    width: { min: 1024, ideal: 1280, max: 1920 },
    height: { min: 576, ideal: 720, max: 1080 },
    facingMode: 'environment',
  },
}

onMounted(async () => {
  stream.value = await navigator.mediaDevices.getUserMedia(constraints)
})

onBeforeUnmount(() => {
  stream.value.getTracks().forEach(track => track.stop())
})
</script>

<template>
  <video :srcObject="stream" width="300" height="200" autoplay></video>
</template>

demo