WebRTCコールバック内でプロパティが変更されたときにVue.js更新がトリガーされない

Question

カメラとマイクの権限をユーザーから取得し、そのストリームをキャンバスに表示する小さなVue.jsコンポーネントを作成しようとしています。十分に簡単ですね。

実際には、私はvideoタグのsrcプロパティを更新するためにVue.jsを取得できませんでしたので、変更がVueによって取得されているかどうかをテストするために単純なstatusメッセージを追加しました。彼らはそうではありません。 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によると、あなたは...のような

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

をそれを使用する必要があります Promiseを返し getUserMedia

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