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

Vue.js相关问答推荐

Vue3组合-如何在组件卸载时注销回调

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

推荐答案

解决方案

Vue.js相关问答推荐

Vue3组合-如何在组件卸载时注销回调

Select 项目后，Vuetify v-select在select后面显示数字1

如何将外部 svg 转换为 Vue3 组件？

NUXT 3 在客户端获取数据

Vuetify/Nuxt 生产环境组件在开发环境中无法正常工作

使用 nuxt.js 组件自动导入对性能不利吗？

Rails Webpacker 还是 Vue-CLI？

Webpack - MiniCssExtractPlugin 不提取文件

无需直接 DOM 操作即可绘制d3-axis

vuejs vue-cli 如何使用 console.log 而不会出现任何错误

Vue Table 2 - 自定义过滤器

Vue：需要禁用页面上的所有输入

[Vue 警告]：渲染函数中的错误：TypeError：无法读取属性 'first_name' of null

带有子菜单的 Vuetify 导航抽屉

VueJS 通过渲染传递数据

如何确定 Vue 何时完成更新 DOM？

Laravel 和 Vue - handler.call 不是函数

使用 Vue.js 获取所有选中复选框的列表

Vue-i18n - 无法读取未定义的属性配置

Vue-meta：metaInfo 无权访问计算(computed)属性