Переключить камеру с помощью MediaDevices.getUserMedia() в vuejs 2

Question

Я пытаюсь разработать веб-сайт, где я могу переключать камеру с хрома в мобильных устройствах. Сейчас я использую фреймворк vuejs 2 и использую MediaDevices.getUserMedia() для получения изображения. Отсюда я понимаю, как я собираюсь использовать свой код. Индивидуально работает как передняя, ​​так и задняя камера. Но там, где я пытаюсь переключиться, он не работает. Вот мой код:

<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();
    }
}

Может кто-нибудь помочь мне, как я могу изменить камеру? ТИА

Answer 1

Я получил свое решение. MediaDevices.getUserMedia() не может напрямую изменить облицовку видео. Сначала нужно остановить запущенный видеопоток. А затем смените видео на облицовочный режим. Вот мой код:

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