Can't get device ID on Chrome 81, Firefox, and Safari using Agora Web SDK

Question

I've noticed that within Chrome 81, Firefox and Safari, I can't get the device ID for the camera and microphones.

I'm using the getDevices method but it returns an empty response.

const devices = AgoraRTC.getDevices(info => {
    console.log("get device info!", info);
});

How can I get the device IDs?

Answer 1

As of Chrome 81, device IDs are not exposed if permission to use devices has not been granted. This change was made to protect user privacy.

For the Agora Web SDK, if you try to get device information before the Stream.init successfully creates the stream, then the privacy guard will be applied and the deviceIDs will not properly get returned. It is recommended to first initialize the streams, then query the devices after the user has accepted the device permissions.

const audioStream = AgoraRTC.createStream({ audio: true, video: false});
const videoStream = AgoraRTC.createStream({ audio: false, video: true});

// Initialize the streams to trigger the device permissions
const audioPermissionGranted = new Promise(resolve => {
  audioStream.init(() => resolve(null), (e) => resolve(e));
});
const videoPermissionGranted = new Promise(resolve => {
  videoStream.init(() => resolve(null), (e) => resolve(e));
});

Promise.all([audioPermissionGranted, videoPermissionGranted]).then(res => {
  if (res[0] !== null) {
    console.warn("create audio stream failed!", res[0]);
  }
  if (res[1] !== null) {
    console.warn("create video stream failed!", res[0]);
  }

  // After the permissions are granted, call getDevices to get device information
  const devices = AgoraRTC.getDevices(info => {
    console.log("get device info!", info);
  });
});