How to Selecting Front or Back Camera about js-ocr-demo

[ve3]

Refer from

• https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia
• https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/enumerateDevices
• bahmutov/ng-simple-webrtc#18
• https://stackoverflow.com/questions/41724545/select-rear-camera-on-android-device-jsartoolkit5

This is what I changed in searchForRearCamera() function.

    function searchForRearCamera() {
        var deferred = new $.Deferred();

        // MediaStreamTrack.getSources is deprecated https://www.chromestatus.com/feature/4765305641369600
        // https://github.com/kdzwinel/JS-OCR-demo/issues/7
        // use navigator.mediaDevices.enumerateDevices instead. https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/enumerateDevices
        if (navigator.mediaDevices.getUserMedia) {
            navigator.mediaDevices.enumerateDevices()
            .then(function (sources) {
                var rearCameraIds = sources.filter(function (source) {
                    return (source.kind === 'videoinput' && source.label.toLowerCase().indexOf('back') !== -1);
                }).map(function (source) {
                    return source.deviceId;
                });

                if (rearCameraIds.length) {
                    deferred.resolve(rearCameraIds[0]);
                } else {
                    deferred.resolve(null);
                }
            });
        } else {
            deferred.resolve(null);
        }

        return deferred.promise();
    }

[kdzwinel]

Small front/back switch could be a nice addition in step one if anyone wants to take a stab at it.

[npsantini]

Has this been updated? On mobile I still only get the front facing camera when the rear camera is the useful one.

[kdzwinel]

@npsantini nope, but I agree that it'd be a really nice feature. Add it and I'll be happy to review and merge.

[Loks2008]

I have given a shot and have completed it.

Change the following lines of code.

function setupVideo(rearCameraId) {
var deferred = new $.Deferred();
var videoSettings = {
video: {
optional: [
{
width: { min: pictureWidth }
},
{
height: { min: pictureHeight }
}
]
}
};

to

function setupVideo(rearCameraId) {
var deferred = new $.Deferred();

	var front = false;
        var videoSettings = {
            audio: false,
            video: {
                width: 1920,
                height: 1080,
                facingMode: (front ? "user" : "environment")
            }
        };

    //if rear camera is available - use it
    if (rearCameraId) {
        videoSettings.video.optional.push({
            sourceId: rearCameraId
        });
    }

changing the above code will give you an image bug on ios safari(image upside down). so add the below line to fix up the bug but we need to put up a condition to check the environment of the webpage being opened i.e whether the page is opened on ios/android or windows platform.

the code to be added up

ctx.setTransform(1,0,0,-1,0,canvas.height);

tested on ios 11.0.1 iPhone xs max device.
I haven't tested out yet on android, if possible please kindly test it out on android and let me know.