switch camera using MediaDevices.getUserMedia() in vuejs 2 - vuejs2

Question

I'm trying to develop a website where i can switch camera from chrome in mobile devices. Current im using vuejs 2 framework and using MediaDevices.getUserMedia() to take image. From here i understand how am i gonna use my code. Individually both of front and back camera working. But where im trying to switch between then its not working. Here is my code:
<template>
<div class="container" id="scanIdCardPage">
<div class="scanIdCardDiv">
<div class="scanCardContainer" v-show="afterTakingPhoto">
<video ref="video" id="video" :style="{width: divWidth}" autoplay></video>
<canvas ref="canvas" id="canvas" width="320" height="240" style="display: none;"></canvas>
</div>
</div>
</div>
<div class="takePhotoBtnDiv">
<div>
<button type="button" class="btn btn-info" #click="camera('environment')">Back Camera</button>
<button type="button" class="btn btn-info" #click="camera('user')">front Camera</button>
</div>
</div>
</div>
</template>
export default {
data() {
video: {},
front: true
},
methods: {
Camera() {
if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia({ video: { facingMode: (this.front? "user" : "environment") }}).then(stream => {
this.video.src = window.URL.createObjectURL(stream);
this.video.play();
});
}
},
changeCamera() {
this.front = !this.front;
}
},
mounted() {
this.Camera();
}
}
Can anyone help me out how do i change the camera? TIA

Answer 1

I got my solution. MediaDevices.getUserMedia() can't directly change video facingMode. First you have to stop the running video stream. And then change the video facingMode. Here is my code:
export default() {
data() {
},
methods: {
camera(face) {
this.stop();
this.gum(face);
},
stop() {
return video.srcObject && video.srcObject.getTracks().map(t => t.stop());
},
gum(face) {
if(face === 'user') {
return navigator.mediaDevices.getUserMedia({video: {facingMode: face}})
.then(stream => {
video.srcObject = stream;
this.localstream = stream;
});
}
if(face === 'environment') {
return navigator.mediaDevices.getUserMedia({video: {facingMode: {exact: face}}})
.then(stream => {
video.srcObject = stream;
this.localstream = stream;
});
}
}
},
mounted() {
this.camera('environment');
},
}