为什么不设置视频元素 srcObject 在 Vue.js App 中不起作用

Why doesn't setting video element srcObject doesn't work inside Vue.js App

考虑以下应用(代码简化)

<div id="app">
<video id="my-vid" autoplay></video>
</div>

JS

我正在设置 document.getElementById("my-vid").objectSrc = stream 媒体流(在询问用户通常的用户媒体等之后......)在普通 javascript 中(没有任何 vue js 属性绑定)。

它不起作用(浏览器不显示媒体流,但 console.log 仍然显示有效的 MediaStream 对象。

当我将视频元素移到 VueJS 应用程序之外时,它可以工作!

<div id="app">
</div>
<video id="my-vid" autoplay></video>

这可能是什么原因?

我想正确的方法是

document.getElementById("video").srcObject = stream

我就是这样用的,效果还不错..

<template>
  <div class="container">
    <video id="videotag" autoplay></video>
  </div>
</template>

<script>
export default {
  name: "video",
  components: {},
  mounted() {
     navigator.getUserMedia = navigator.getUserMedia ||
            navigator.webkitGetUserMedia ||
            navigator.mozGetUserMedia;

        // Start video camera
        navigator.getUserMedia({
                video: true,
                audio: false
            },
            function (stream) {
              document.getElementById('videotag').srcObject = stream
            },
            function (error) {
              console.error(error)
            }
        )
  }
};
</script>

在 vue 中,你不应该使用 document.getElementById()document.getElementById() 能做的任何事,ref 都能做。尝试...

<div id="app">
   <video ref="myVid" autoplay></video>
</div>

然后在您的脚本中,在 Vue 中...

var me = this;
// Start video camera
navigator.getUserMedia({
        video: true,
        audio: false
    },
    function (stream) {
        me.$refs.myVid.srcObject = stream
    },
    function (error) {
        console.error(error)
    }
)

这是因为 DOM 级别 ID 的范围是整个页面(整个应用程序)。在您的小组件内部,您无法指定其他组件可能使用的 id,并且可能会发生冲突。 Ref 只需要在您的组件中是唯一的。