问题出现的原因是因为 Chrome 81、Firefox 和 Safari 这些浏览器更新后，从传统的 getUserMedia API 切换到了最新的 MediaDevices API。这个新的 API 带来了许多功能和优势，但对于 SDK 的兼容性来说，也带来了一定挑战。

为了解决这个问题，需要使用 MediaDevices API 来获取设备 ID，并将其传递给 Agora SDK。下面是一个使用 MediaDevices API 获取设备 ID 的示例代码：

// 检查浏览器是否支持 MediaDevices API
if (navigator.mediaDevices && navigator.mediaDevices.enumerateDevices) {
  // 枚举所有音视频输入设备
  navigator.mediaDevices.enumerateDevices().then(function(devices) {
    // 找到第一个视频输入设备的 ID
    var deviceId;
    devices.forEach(function(device) {
      if (device.kind === 'videoinput') {
        deviceId = device.deviceId;
        return;
      }
    });
    
    // 将设备 ID 传递给 Agora SDK
    agoraClient.createStream({
      streamID: 1,
      audio: true,
      cameraId: deviceId,
      microphoneId: deviceId
    });
  })
  .catch(function(err) {
    console.log(err);
  });
}

在上面的代码中，首先检查浏览器是否支持 MediaDevices API，然后调用 enumerateDevices() 枚举所有音视频输入设备，并且找到第一个视频输入设备的 ID，最后将设备 ID 传递给 Agora SDK。

通过使用 MediaDevices API 让 Agora Web SDK 能够在 Chrome 81、Firefox 和 Safari 上正确获取设备 ID，并保证了兼容性。