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

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

0 голосов
/ 21 мая 2018

Я пытаюсь разработать веб-сайт, на котором я могу переключать камеру с хрома на мобильных устройствах.В настоящее время я использую vuejs 2 framework и 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();
    }
}

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

1 Ответ

0 голосов
/ 01 июля 2018

Я получил свое решение.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');
    },
}
...