vuejs2 - 在 vuejs 2 中使用 MediaDevices.getUserMedia() 切换相机

Question

我正在尝试开发一个网站，可以在移动设备中从 Chrome 切换相机。当前我使用 vuejs 2 框架并使用 MediaDevices.getUserMedia() 来拍摄图像。来自 here我明白我将如何使用我的代码。前置和后置摄像头单独工作。但我试图在其中进行切换，但它不起作用。这是我的代码:

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

谁能帮我看看如何更换相机？ TIA

Answer 1

我得到了我的解决方案。 MediaDevices.getUserMedia() 无法直接更改视频faceingMode。首先，您必须停止正在运行的视频流。然后更改视频面向模式。这是我的代码:

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