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。首先，您必须停止正在运行的视频流。然后更改视频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');
    },
}

在vuejs 2中使用MediaDevices.getUserMedia（）切换摄像头

1 个答案: