smronju / vue-webcam

A Vue component for capturing image from webcam.
MIT License
63 stars 38 forks source link

Switch to back smartphone camera #9

Closed andrii-trush closed 6 years ago

andrii-trush commented 6 years ago

Are there any opportunity to use back camera instead of frontend

sydCPT commented 6 years ago

Hi @andrii-trush

The simplest way to achieve this is by changing the following line in the VueWebcam.js node_module file (I think it's around line 100) from: navigator.getUserMedia({ video: true }, (stream) => { to: navigator.getUserMedia({ video: {facingMode: 'environment'} }, (stream) => {

Hope that helps

rassemdev commented 6 years ago

@sydCPT is there any way to do this without changing the core code? By adding any click event?

rassemdev commented 6 years ago

@andrii-trush i got some idea from this library and made write my code manually to take image and switch camera. Here is my code. Hope this will help

<template>
        <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>
</template>
<script>
export default() {
data() {
localstream: ''
},
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;
        });
    }
    }
},
beforeDestroy() {
    this.localstream.getTracks()[0].stop();
},
}
</script>