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

我正在尝试开发一个网站，在那里我可以在移动设备中从chrome切换相机。当前im使用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();
    }
}

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

后置摄像机
前置摄像机
导出默认值{
数据（）{
视频：{}，
正面：对
},
方法：{
摄影机（）{
if（navigator.mediaDevices&&navigator.mediaDevices.getUserMedia）{
navigator.mediaDevices.getUserMedia（{video:{facingMode:{this.front？“user:“environment”）}）。然后（stream=>{
this.video.src=window.URL.createObjectURL（流）；
这个.video.play（）；
});
}
},
changeCamera（）{
this.front=！this.front；
}
},
安装的（）{
这台照相机（）；
}
}

---

谁能帮我换一下照相机吗？TIA

我找到了解决办法。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();
    }
}

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