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

Question

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

<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>

原因可能是什么？

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>