bensonruan / webcam-easy

javascript access webcam stream and take photo
https://bensonruan.com/how-to-access-webcam-and-take-photo-with-javascript
MIT License
240 stars 110 forks source link

Letters are reversed #13

Open thainguyenit opened 3 years ago

thainguyenit commented 3 years ago

Hi, Please help me, how to fix a letters are reversed bug after snap a picture. Thank you.

novelnet commented 3 years ago

Set facingMode to 'environment' and override getVideoInputs like this works for me:

import Webcam from 'webcam-easy';
import b64toBlob from 'b64-to-blob';

class NoMirrorWebcam extends Webcam {
    // override function as facingMode is set to 'user' when webcamList == 1 -> facingMode decides mirroring
    getVideoInputs(mediaDevices) {
        const webcamList = super.getVideoInputs(mediaDevices)
        this._facingMode = 'environment';
        return webcamList;
    }
}
jayanthymohit6 commented 3 years ago

hey @novelnet where should I place this block to fix the issue ? I have the webcam-easy.js which has the WebCam class .And in my code I initialize the object like this : const webcam = new Webcam(webcamElement, 'environment', canvasElement, snapSoundElement);

thanks.

Jarff commented 2 years ago

hey @novelnet where should I place this block to fix the issue ? I have the webcam-easy.js which has the WebCam class .And in my code I initialize the object like this : const webcam = new Webcam(webcamElement, 'environment', canvasElement, snapSoundElement);

thanks.

Yeah, I can confirm that the suggestion is working. One option is to create that class and export it as default, I like to do it by creating an index.js inside a Folder with the same name as the class has.

import Webcam from 'webcam-easy';
//import b64toBlob from 'b64-to-blob'; I commented it out because I'm not using it

class NoMirrorWebcam extends Webcam {
    // override function as facingMode is set to 'user' when webcamList == 1 -> facingMode decides mirroring
    getVideoInputs(mediaDevices) {
        const webcamList = super.getVideoInputs(mediaDevices)
        this._facingMode = 'environment';
        return webcamList;
    }
}

export default NoMirrorWebcam;

Then in the script you are using the webcam you should import the class NoMirrorWebcam instead of the one installed by npm (Webcam),

import NoMirrorWebcam from './path/to/the/class/NoMirrorWebCam'

Instead of using Webcam you should use NoMirrorWebcam