Why is it unable to get device ID on Chrome 81 and above browsers?

2021-09-09

Products / Plugins:Video Call / Audio Call / Live streaming

Platform / Framework:Web

Problem Description

When calling the enumDevices interface on Chrome 81 browser, the obtained "deviceID" is empty.

Note

This problem may also be encountered on Safari and Firefox browsers. The problem cause and solution are the same as below.

Problem Cause

To protect user privacy, starting from Chrome 81, if the browser has not obtained permission to use media devices, it will not be able to obtain device ID (deviceID) information.

In ZEGO Express Web SDK, if the enumDevices interface is called before the creatStream interface is successfully called, the obtained "deviceID" may be empty.

Solution

You can create temporary streams to collect audio and video to trigger media device permission requests to obtain complete device information.

Create temporary audio and video streams to collect audio and video respectively, triggering permission requests for microphones and cameras.
After collecting audio and video streams, call the enumDevices interface to obtain complete device information.

Note

If you don't have a microphone or camera, or these devices are disabled, collection may fail. In this case, the purpose of collecting audio and video is to obtain permission to use media devices. Just ensure that collection failure does not affect the entire process.
If collection fails, the obtained device list may contain devices with empty "deviceId" and "deviceName".


// zg = new ZegoExpressEngine(appID, server);
let tempAudioStream: mediaStream,tempVideoStream: mediaStream;
try{
  tempAudioStream =  await zg.createStream({ camera:{ audio: true, video: false } });
  tempVideoStream =  await zg.createStream({ camera:{ audio: false, video: true } });
}catch(err){
  console.warn("create stream failed!", err);
}

// After audio and video collection is complete, call enumDevices to get deviceName and deviceID
  const devices = await zg.enumDevices();
 console.log("get device info!", devices);
});


// zg = new ZegoExpressEngine(appID, server);
let tempAudioStream: mediaStream,tempVideoStream: mediaStream;
try{
  tempAudioStream =  await zg.createStream({ camera:{ audio: true, video: false } });
  tempVideoStream =  await zg.createStream({ camera:{ audio: false, video: true } });
}catch(err){
  console.warn("create stream failed!", err);
}

// After audio and video collection is complete, call enumDevices to get deviceName and deviceID
  const devices = await zg.enumDevices();
 console.log("get device info!", devices);
});