考虑以下应用程序(代码简化)
<div id="app">
<video id="my-vid" autoplay></video>
</div>
JS
我正在设置 document.getElementById("my-vid").objectSrc = stream
媒体流(在向用户询问常用的用户媒体等之后)(在纯 JavaScript 中)(即没有任何 vue js 属性绑定(bind))。
它不起作用(浏览器不显示媒体流,但 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>
关于javascript - 为什么设置视频元素 srcObject 在 Vue.js 应用程序中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54789209/