Почему не устанавливается элемент видео srcObject не работает внутри приложения Vue.js

Question

Рассмотрим следующее приложение (упрощенный код)

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

JS

Я настраиваю document.getElementById("my-vid").objectSrc = stream поток мультимедиа (после запроса у обычного пользователя)media и т. д.) в простом javascript (то есть без привязки какого-либо свойства vue js).

Не работает (браузер не отображает поток мультимедиа, но console.log по-прежнему показывает действительный MediaStream object.

Когда я перемещаю элемент видео за пределы приложения VueJS, однако, оно работает!

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

В чем может быть причиназа что?

Answer 1

В 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 ограничен всей страницей (целым приложением).Внутри вашего маленького компонента вы не можете определить, какие идентификаторы могут использовать другие компоненты, и возможны конфликты.Ссылка должна быть уникальной только внутри вашего компонента.

Answer 2

Полагаю, правильный путь -

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>