getUserMedia 之后的 enumerateDevices：如何找到活动设备？答案

【问题标题】：enumerateDevices after getUserMedia: how to find the active devices?getUserMedia 之后的 enumerateDevices：如何找到活动设备？
【发布时间】：2021-02-04 14:54:14
【问题描述】：

在给定MediaStream 实例的情况下，有没有办法检测哪个设备（摄像头、麦克风）处于活动状态？

我目前正在开发的应用只是简单地查询这样的流并将其附加到 <video/> 元素：

const stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: true })

const el = document.querySelector("video")
el.srcObject = stream

console.log(stream.getTracks())
// MediaStreamTrack { kind: "audio", id: "{000d071e-f936-42d8-872e-a568cd96cc2d}", label: "USB Audio Device Mono", … }
// MediaStreamTrack { kind: "video", id: "{186427d5-b04a-4906-9177-1a088c5d4e0a}", label: "C922 Pro Stream Webcam", …

下一步是让用户能够更换摄像头/麦克风。基本代码是：

const devices = await navigator.mediaDevices.enumerateDevices()
console.log(devices)
// MediaDeviceInfo { deviceId: "yQx5+MN7znbmkE0tV98jJHpvqrUaa6Gv5WIXF52jj0s=", kind: "videoinput", label: "C922 Pro Stream Webcam", … }
// MediaDeviceInfo { deviceId: "dIjwtaOGQbjT2HOqfJ4xjzjXBwBxz4CEeX3a2fn0ZgA=", kind: "audioinput", label: "USB Audio Device Mono", … }
// MediaDeviceInfo { deviceId: "/t3u7BlfExATtBC4CUmyqIo8RORDxMu9aMrJJHN0Ez0=", kind: "audioinput", label: "C922 Pro Stream Webcam Analog Stereo", … }
// MediaDeviceInfo { deviceId: "/5pqK1599b+mKHm26zCYQ+Ql3vG0Em7xiVbqfm1C/9A=", kind: "audioinput", label: "Monitor of Built-in Audio Digital Stereo (IEC958)", … }
// MediaDeviceInfo { deviceId: "Tib/PVScFuFUQuAtYYVgtxcxeu08opGKe9MXEVmxq84=", kind: "audioinput", label: "Monitor of USB Audio Device Analog Stereo", … }

我可以简单地将这个列表转换为<select/>+<option/> 列表（每个kind 一个），让用户决定并使用选定的deviceId (getUserMedia({ audio: { deviceId: selectedDeviceId } })) 重新请求流。

但是：轨道和设备 ID 不匹配，那么如何确定应该预选哪个 <option/>？查看 MDN，流的轨道 ID 是 generated by the browser（这是有道理的），但 MediaStream API 并没有提供太多替代方案...

当然，答案不可能是“按标签行事”——我可以插入第二个相同的网络摄像头并拥有两个同名的视频设备？

【问题讨论】：

标签： javascript getusermedia mediastream enumerate-devices

【解决方案1】：

您可以获取当前应用于您的 MediaStreamTracks 的 MediaTrackSettings 并从那里检查 deviceId：

const used_devices = mediastream.getTracks()
  .map( (track) => track.getSettings().deviceId );

【讨论】：

【解决方案2】：

如果你这样做

const label = stream.getVideoTracks()[0].label

您将获得视频设备的名称。这是MediaStreamTrack 类的一个属性。

至于 default 选项，以下是我如何确定哪个是默认选项。（这很臭，但我没有找到更好的方法。）

执行.getUserMedia({video:true, audio:true}) 操作并查看label 属性。否则笨拙的约束对象选择默认设备，顺便完成用户权限授予。

当我说默认设备时，我指的是在浏览器设置中设置的设备。

【讨论】：

您可能误读了他们清楚地解释“按标签行事”是一个坏主意的问题。
不需要将其他答案的内容复制到你的。