javascript - 当 WebRTC 回调中的属性更改时,不会触发 Vue.js 更新

标签 javascript vue.js webrtc

我正在尝试创建一个小型 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)
})

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

关于javascript - 当 WebRTC 回调中的属性更改时,不会触发 Vue.js 更新,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42618798/

相关文章:

javascript - 在vue组件上编辑数据时如何显示输入类型日期的值?

WebRTC 无法解码从 Datachannel 发送的文本消息

javascript - 从静态方法 ES6 调用私有(private)方法

javascript - JQuery 不读取动态创建的元素属性

php - 部署的laravel网站无法上传图片

断开连接时的 Firebase 更新

javascript - 如何让用户随时允许或拒绝摄像头/麦克风访问以及如何更改设备源?

WebRTC 或 Sip.js

javascript - HTML 文本输入 * "value";在不同的文本输入中显示

javascript - 从组件内更改 vue 实例变量