navigator.mediaDevices.enumerateDevices() 没有得到多个音频输出

问题描述

项目：列出所有媒体设备，然后选择1个与Windows默认不同的特定音频输出设备

我使用了 enumerateDevices()，遵循许多代码示例，例如 here 和：

• 在 Firefox 上：音频输入、视频输入、未显示音频输出的列表，但每个只有 1 个（我有 2 个输入、3 个输出）
• 在 Chrome 上，Brave：显示相同的列表，每个列表也只有 1 个，并且种类/标签/id 为空（尽管 groupId 非空）

代码：

function checkDevices(devices){
        (async () => {   
  await navigator.mediaDevices.getUserMedia({audio: true,video: true});   
  let devices = await navigator.mediaDevices.enumerateDevices();   
  devices.forEach(function (device) {
      console.log(device.kind + ": " + device.label + " id: " + device.groupId);//Other parameters device.kind/device.deviceid
    });
  })();
}
function checkerror(err){
    console.log(err.name + ": " + err.message);
} 
navigator.mediaDevices.enumerateDevices().then(checkDevices).catch(checkerror);

有人可以帮忙吗？

输出火狐 enter image description here

输出 Chrome（与 Brave 相同） enter image description here

解决方法

我找到了代码不起作用的原因，以及一些解决方法，可能对遇到类似情况的其他人有帮助：

原因： enumerateDevices() 需要用户的许可和浏览器 (https) 的安全才能正确列出可用设备。由于代码位于本地，因此返回错误列表和空标签/种类。

一些解决方法：

1. 发布html，例如，我用了https://www.netlify.com/（免费）；但是如果你的项目正在开发中，每次尝试重新上传html并不方便。 Netlify 允许链接到 github，因此代码可以自动刷新

2. 使用像www.w3schools.com这样的在线编译器，因为代码是从网站上运行的，所以可以运行

3. 用electron做桌面应用，代码和web app基本一样。不知道电子？观看此视频（15 分钟）here

希望那些帮助别人！