iOS Safari WebGL Webcamtexture can't access back camera

[kimvasquez17]

Hi,

I’m trying to access the back camera of my iPhone but it keeps opening the front-facing camera. But when I tried it on my android device, I can access the back camera.

Android Device: Xiaomi Mi9T
Browser: Chrome

iOS device: iPhone 13 Pro Max ios 15.2
Browser: Safari and Chrome

Edit: Btw my Unity version is 2021.2.11f1

Another Edit: I look into the ios chrome console and had an error. Error: Applying iOS Safari specific workaround to video playback: 217578 – Webcam video from navigator.mediaDevices.getUserMedia() to 2D canvas fails on Safari on iPhone

Code below

for (int i = 0; i < WebCamTexture.devices.Length; i++)
        {
            if (!WebCamTexture.devices[i].isFrontFacing)
            {
                cam = new WebCamTexture(WebCamTexture.devices[i].name, Screen.width, Screen.height);
                break;
            }
        }

        if (cam == null)
        {
            Debug.Log("This device does not have back camera");
            return;
        }
 

        cam.Play();
        background.texture = cam;

[kimvasquez17]

@Marks4

My plugin does this with no issues.

That’s awesome! but right now it’s too pricey for me. I only need the back cam access fix, only that part. Thanks btw!

[kimvasquez17]

I found out that only 1 webcam device input in iOS is detected and 2 in Android. I edited the WebCam.js so that I can log its devices. The attached images are the logs in iOS and Android.

iOS:

Android:

[kimvasquez17]

I posted the bug here
CASE 1406834. Still in Fogbugz though

[brendanduncan_u3d]

The issues with front/back webcam access is currently being worked on.

[kimvasquez17]

@brendanduncan_u3d

The issues with front/back webcam access is currently being worked on.

Thank you!

[Raphael92]

The issues solved?

[Marks4]

My plugin does this with no issues.

[Raphael92]

I solved it by editing WebCam.js (Path: Unity\2021.3.3f1\Editor\Data\PlaybackEngines\WebGLSupport\BuildTools\lib)
It works on iOS but doesn’t work on desktop.

Before editing

navigator.mediaDevices.getUserMedia({
            audio: false,
            video: videoInputDevices[deviceId].deviceId ? {
                deviceId: { exact: videoInputDevices[deviceId].deviceId }
            } : true
        }) ....

After editing

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

[Thaina]

@brendanduncan_u3d

The issues with front/back webcam access is currently being worked on.

Are there any progress?

[unityruba]

The issue here was that browsers must request permission from the user to access the webcams to be able to get any information about them, we were missing that in our implementation. I added it and it landed in:
2021.3.6f1.397, 2022.1.8f1.3359 and 2022.2.0a15.2224

[Thaina]

@unityruba

The issue here was that browsers must request permission from the user to access the webcams to be able to get any information about them, we were missing that in our implementation. I added it and it landed in:
2021.3.6f1.397, 2022.1.8f1.3359 and 2022.2.0a15.2224

I am using 2022.1.11f and this still not worked in ios with this code

    void Start()
    {
        var env = WebCamTexture.devices.FirstOrDefault((device) => !device.isFrontFacing);
        var texture = new WebCamTexture(env.name);
        image.texture = texture;
        texture.Play();
    }

I should get any device that was backface from this code. But it only worked in android and it open front camera in webgl ios instead

I still need to hack the webcam.js to configure facingMode by myself like above comment

As far as I can inventigate it seem chrome ios (with safari under it?) is not return proper data with
navigator.mediaDevices.enumerateDevices. The detail about each device is somehow missing. It seem it not even return all camera

[gtk2k]

Requires modification of WebCam.js but allows back camera access on iOS.

This is an example of WebCam.js modification of 2021.3.6f1.

8381409–1105224–WebCam.js (8.06 KB)

[unityruba]

As of 2022, we’ve added support for the Application.RequestUserAuthorization API that you can use to trigger the browser’s webcam permission request: Unity - Manual: WebGL browser access to device features

[gtk2k]

Unity currently sets isFrontFacing by checking if device.label contains ‘front’.

The problem with iOS Safari is that if her browser (mobile device) language is set to something other than English, the device.label will be retrieved in that language.

So, if it is set to Japanese etc., it will always be false.

ex: Japanese

[unityruba]

@gtk2k ohhhh…that’s a fun discovery for me I’ll have to bring it up with the team and see if/how we can deal with this!

[Joe_Siu]

Sorry for bring up the old thread, but I would like to ask is there any update to the issue mentioned by @gtk2k , where on IOS, if system lanuage is non-English, then WebCamDevice.isFrontFacing will always returns true. I am using Unity 2023.2.18f1 for a WebGL based app, and from the attached files shows the console log result of WebCamDevice.isFrontFacing.

As shown, on Android its returning the expected result no-matter the system language (i.e., Traditional Chinese / Japanese), as the device name / label are always in English, but on IOS / IPadOS, the name / label are localized if system language is non-English, and therefore I couldn’t identify which one is the back camera via Unity.

Googling basically lead me to this only thread, and I don’t see any further bug reports or updates, therefore please let me know the progress on this, thanks!