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

Question

考虑以下应用程序（代码简化）

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

JS

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

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

但是，当我将视频元素移到VueJS应用之外时， 它可以工作！

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

可能是什么原因呢？

Answer 1

我想正确的方法是

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>

Answer 2

在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，并且可能会发生冲突。 引用仅在您的组件中必须唯一。