Is Vue.js component creation becoming a challenge for you? Imagine creating a small component that requires permissions for the camera and microphone from the user, displaying that stream on a canvas. Sounds simple, right?
However, let's face reality - I faced an issue where Vue.js wasn't updating the src property of my video tag as expected. To troubleshoot, I added a status message to see if any changes are being detected by Vue. Spoiler alert: they weren't. How do we ensure that Vue picks up property changes within the getUserMedia callback?
If you're interested, check out this fiddle: https://jsfiddle.net/49r0c4cf/
Furthermore, here's the code snippet:
<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 = 'FETCHING';
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>