[BUG] On IOS Safari Iphone 12 - after background/sleep mode reactivation changes camera to fisheye about zbar-wasm HOT 8 CLOSED

IMHO this cannot be a bug of zbar-wasm because this module does not control the camera in any way, i.e. it can neither switch beween front and back camera nor prevent this.

Edit: when writing this, I did not consider the example cited below which actually does select a camera.

from zbar-wasm.

Ah, I think in main.js this needs to be adressed:

navigator.mediaDevices.getUserMedia({ audio: false, video: { facingMode: 'environment' } })

In here we can determine exact deviceID. I will improve and report back when it works.

from zbar-wasm.

Unfortunately, in Safari/iOS this will still only give us some camera facing the environment, not necessarily the high-resolution camera.

In recent WebKit browsers one could add the zoom capability to the MediaTrackConstraints, this should prevent fisheye cameras from being selected (only guessing, not tested).

from zbar-wasm.

By selecting the last camera in the available devices most phones return the correct enviroment camera. As such:

            // List cameras and microphones.
            navigator.mediaDevices.enumerateDevices()
                .then((devices) => {
                    devices.forEach((device) => {
                        if (device.kind == 'videoinput') {
                            deviceCam = device.deviceId;
                        }

                    });
                    constraints = {
                        audio: false,
                        video: {
                            width: {
                                min: 1280,
                                ideal: 1920,
                                max: 2560,
                            },
                            height: {
                                min: 720,
                                ideal: 1080,
                                max: 1440
                            },
                            deviceId: deviceCam
                        }
                    }
                    navigator.mediaDevices.getUserMedia(constraints)
                        .then(stream => {

                            videoContainer.srcObject = stream

                        })
                        .catch(error => {
                        })
                    detectVideo(true);
                })
                .catch((err) => {
                    console.error(`${err.name}: ${err.message}`);
                });

from zbar-wasm.

Thank you @opicron for your investigation!

I would not feel well, however, including this workaround in the example since I could not find any specification that guarantees that the last device represents the environmental camera.

Instead, I am thinking about replacing the line

navigator.mediaDevices.getUserMedia({ audio: false, video: { facingMode: 'environment' } })

with

navigator.mediaDevices.getUserMedia({ audio: false, video: { facingMode: { exact: 'environment' } } })

which requires rather than just requests a device facing the environment (specified here).

Unfortunately, I do not have an iPhone available for testing. I would appreciate very much if you could test this idea; if this works then I would like to modify the example accordingly.

from zbar-wasm.

Yes, an exact match was my first approach. But that didnt work out unfortunately. The above case works for all iphones in our company. And I see referrals to this solution being adres in multiple forums.

https://www.reddit.com/r/javascript/comments/8eg8w5/choosing_cameras_in_javascript_with_the/

from zbar-wasm.

If we add facingMode: { exact: 'environment' } to the above example code which gets the devices it might be even more consistent.

from zbar-wasm.

Going to check this too. Thanks for lead.

from zbar-wasm.