在 WebRTC 回调中更改属性时未触发 Vue.js 更新

Question

我正在尝试创建一个小型 Vue.js 组件，该组件从用户那里获取摄像头和麦克风的权限，并在画布上显示该流。够简单吧？

但实际上，我无法让 Vue.js 更新我的 video 标记的 src 属性，所以我添加了一个简单的 status 消息来测试 Vue 是否正在接收这些更改。他们不是。如何确保 Vue 在 getUserMedia 回调中获取属性更改？

请看这里的小提琴：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>

Answer 1

根据this documentation，getUserMedia 返回一个Promise，所以你应该像...一样使用它。

navigator.mediaDevices.getUserMedia({
  video: true,
  autio: true
}).then(stream => {
  this.status = 'DONE'
}, err => {
  console.error(err)
})

https://jsfiddle.net/49r0c4cf/1/