當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/