我正在尝试创建一个小型 Vue.js 组件,该组件从用户那里获取摄像头和麦克风的权限,并在 Canvas 上显示该流。很简单,对吧?
但实际上,我无法让 Vue.js 更新我的 video
标签的 src 属性,所以我添加了一个简单的 status
消息来测试是否发生了变化正在被 Vue 拾取。他们不是。我如何确保 Vue 在 getUserMedia
回调中获取属性更改?
请看这里的 fiddle :https://jsfiddle.net/49r0c4cf/
代码如下:
<template>
<div>
<button @click="getPermissions()" >Get permissions</button>
<video v-bind:src="videoStreamSrc" autoplay></video>
<h1>{{status}}</h1>
</div>
</template>
<script>
export default {
data() {
return {
videoStreamSrc: null,
status: 'default',
};
},
methods: {
getPermissions() {
this.status = 'FETHCING';
const vm = this;
navigator.mediaDevices.getUserMedia({
video: true,
audio: true,
}, () => {
// vm.videoStreamSrc = window.URL.createObjectURL(localMediaStream);
vm.$set('status', 'DONE');
}, (err) => {
// eslint-disable-next-line
console.error(err);
});
},
},
};
</script>
最佳答案
根据 this documentation , getUserMedia
返回 Promise
所以你应该像...一样使用它
navigator.mediaDevices.getUserMedia({
video: true,
autio: true
}).then(stream => {
this.status = 'DONE'
}, err => {
console.error(err)
})
关于javascript - 当 WebRTC 回调中的属性更改时,不会触发 Vue.js 更新,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42618798/