switch camera using MediaDevices.getUserMedia() in vuejs 2

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

1 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');
},
}


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.