Search code examples
iosipadsafarigetusermedia

iPad iOS Safari getUserMedia acces specific camera ( front or back )


What is the right way to access the the front or back camera.

Currently I'm only able to access the "user" camera ( front ).

I can't switch to back camera using any constraints.

Using a specific device id is also not working:

var constraints = {
    video: {
        facingMode: "environment",
        deviceId: "E858F78F6026428D45DD669617B4A881409AA4DA"
    }
};

navigator.mediaDevices.getUserMedia(constraints).

Cany somebody please help me?

It is always accessing the front camera.


Solution

  • Following your question I think you already have successfully called getUserMedia() to get the user's permission to access the camera (otherwise you won't have get the front camera to work). This is needed because the label values in the following JSON will only be filled when the user has already granted access.

    On iOS you now have to call navigator.mediaDevices.enumerateDevices() and will get a "response JSON" like that:

    [
      {  
        "deviceId":"<firstID>",
        "kind":"audioinput",
        "label":"iPhone Microphone",
        "groupId":""
      },
      {  
        "deviceId":"<secondID>",
        "kind":"videoinput",
        "label":"Back Camera",
        "groupId":""
      },
      {  
        "deviceId":"<thirdID>",
        "kind":"videoinput",
        "label":"Front Camera",
        "groupId":""
      }
    ]
    

    using the deviceId of the device you want or let the user choose it using a basic UI will give you access to the back camera.

    Caution: The deviceId values will change on each invocation of enumerateDevices()!