Instascan: Support front/back-facing cameras

Any updates on this?
Do you need a PR? If yes, do you have any hints where to start and/or how instascan interface should behave?

What do you think about passing constraints to Camera.getCameras() ?

getCameras implementation could try to getUserMedia with provided constraints and filter the camera that fulfill those constraints.
see camera.js#L53

This could also be a way to fix #22, but then it would require to pass the resolution contraints to Camera contructor, to merge the resolution constraints with the default provided in start method.
see camera.js#L20

If it seems ok to anyone, I'm willing to submit a PR ;)

My workaround, until this fixed by allowing some king of custom Camera settings, is to set the first camera which contains "back" inside its name value:

if (cameras.length > 0) {
    var selectedCam = cameras[0];
    $.each(cameras, (i, c) => {
        if (c.name.indexOf('back') != -1) {
            selectedCam = c;
            return false;
        }
    });

    scanner.start(selectedCam);
} else {
    console.error('No cameras found.');
}

It always selects the rear camera.

my end its working but when i try to use the rear camera it flip horizontally.. how to put it back on the usual position? thanks

I am having an unusual problem. It doesn't matter which camera I start, it always show the front camera. I can clearly see both cameras on the array and I force to start the back camera, still, the script always start the front camera.
Just downloaded the most recent version of iOS.
Settings:
iPhone 6s
iOS 11
Safari.

Also not loading camera on Chrome and Firefox for same device/OS.

Any ideas?

Thanks

I am having the same issue. Were you able to select the rear camera on IOS

Thanks
Helen

@cbnt
@HelenH
Did you solve this problem? For me I also see both cameras available but switching or preselecting to the back camera always ends in flipping back to the front camera :(

@schmich First of all thank you sooo much for this awesome project! :) Secondly, do you have any information on whether this is a common Iphone issue or how this can be fixed?

Note: Using iphone 7 with iOS 11

Hi @Smux ,

Yes followed the steps in Issue #54

git clone [email protected]:schmich/instascan.git
cd instascan/
npm install gulp-cli -g
npm install
gulp release
cp dist/instascan.min.js /path/to/our/libraries/include/dir

Much thanks @schmich for this awesome project also.

@HelenH
@Smux

I fixed the issue using this fork: https://github.com/PallasKatze/instascan
Still need to follow the steps in Issue #54 though

But it is working fine.
Just a little issue with Android but I believe it is one specific version.

Hi @cbnt,
I want to try that too. But the minified js is that fork links to the same js as the original branch.
I cannot find any minified js in the package. HOw could I do that? Is there anyone who can link one working js file?
Thanks in advance.

I know this is a basic question and a bit off topic but I have been trying to produce a release js and haven't been able - installed npm on my test server but npm keeps giving errors when I try to publish.

My workaround, until this fixed by allowing some king of custom Camera settings, is to set the first camera which contains "back" inside its name value:

if (cameras.length > 0) {
    var selectedCam = cameras[0];
    $.each(cameras, (i, c) => {
        if (c.name.indexOf('back') != -1) {
            selectedCam = c;
            return false;
        }
    });

    scanner.start(selectedCam);
} else {
    console.error('No cameras found.');
}

It always selects the rear camera.

My workaround, until this fixed by allowing some king of custom Camera settings, is to set the first camera which contains "back" inside its name value:

if (cameras.length > 0) {
    var selectedCam = cameras[0];
    $.each(cameras, (i, c) => {
        if (c.name.indexOf('back') != -1) {
            selectedCam = c;
            return false;
        }
    });

    scanner.start(selectedCam);
} else {
    console.error('No cameras found.');
}

It always selects the rear camera.

@clytras nice solution! But what happens if the mobile phone has more than one back camera?

I've tried this solution and with the first back camera of the array the vision is horrible with a lot of zoom. I am not able to scan anything.

But, if I use the second back camera returned it works perfectly and I can scan everything.

My question is if exists a a way to detect which is the main back camera? Imagine if the website is used by different users, which means they will have different devices and the number of back cameras will be different and the order returned.

Thanks a lot.