Different deviceId in getAvailableDevices and navigator.mediaDevices.enumerateDevices

Developers
#1

I’m using Jitsi iFrame API in my project.
I get the list of available devices by calling
api.getAvailableDevices()

I get the list of device like this:

{
        "deviceId": "c13db95c6b65d50116a2b58ca2409a584f742ade3af653cf6d939e581852440a",
        "kind": "audioinput",
        "label": "Microphone (HD Webcam C270) (046d:0825)",
        "groupId": "8441b49d1e61ee92e2cf683548eaf7d3dd089482a6c13419a351b58679ec3902"
    },
    {
        "deviceId": "b93d55bcc81f19755541211d55078955f30e153856d59101bca7509962da41e3",
        "kind": "audioinput",
        "label": "Microphone (USB AUDIO) (10d6:dd01)",
        "groupId": "0d7e9fedefad40fe1dc0fafbdc214c03c23d5e689d0a9fa6a4a3161a10dfdc54"
    },
    {
        "deviceId": "1a2fa9b6c4573766b5cd658fa28d05f398e2483ec4fb1e7dc36fcb13f23b2fbe",
        "kind": "audioinput",
        "label": "Headset (Mifa_M1 Hands-Free AG Audio) (Bluetooth)",
        "groupId": "1d2fd0f7d64ab8096456ffb4380564f33b0392c604a283c889c6891e8387d9e6"
    }

After that I call navigator.mediaDevices.enumerateDevices which is the same call that is used in lib-jitsi-meet.
I get this:

{
      "deviceId": "019de27ededeb93b4da722a7f7f5abc2c7bc0b0ee116af9bbd16e813dc47db36",
      "kind": "audioinput",
      "label": "Microphone (HD Webcam C270) (046d:0825)",
      "groupId": "9cbf924c25ff011a95ddf95b576ab4453949d816e674fccc7cd6563c975b3e20"
  },
  {
      "deviceId": "ab53c1920936d13c3c7b08c9622fb3a45f3346466790f821fcda0fca16824246",
      "kind": "audioinput",
      "label": "Microphone (USB AUDIO) (10d6:dd01)",
      "groupId": "c890309a045009e29a4359e6f06841f818861bfc291d4825e18ad235e0f63bc4"
  },
  {
      "deviceId": "6cce787f4b95b5109ec0d7a8e9d05d85ae91e59c4e703d1ae6929a5891bd3c58",
      "kind": "audioinput",
      "label": "Headset (Mifa_M1 Hands-Free AG Audio) (Bluetooth)",
      "groupId": "ea25423206caa2482a0ed0bf1db9726c727559502969caabc100ae6cdf8f14c2"
  }

As you can see, deviceIds and groupIds are different but labels are identical.
I don’t understand what is going on here.
Is this because devices inside iFrame have different ids?
Can someone of the gurus explain?

#2

As per MDN Docs, the device id is unique to the origin of the calling application.

The website inside of iframe (Jitsi Meet) is of different origin than the website dispaying the iframe, hence the device ids are also different.

2 Likes