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에 따르면, getUserMedia 그래서 당신은 같은 그것을 사용되어야 Promise을 반환

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

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