是否有一种方法来检测哪个设备(相机，麦克风)是活动的，给定一个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是由浏览器生成的(这是有意义的)，但是MediaStreamAPI没有提供太多的替代方案…
当然，答案不可能是"按标签"——我可以插入第二个相同的网络摄像头，并拥有两个同名的视频设备?
你可以得到MediaTrackSettings当前应用在你的MediaStreamTracks和检查deviceId从那里:
const used_devices = mediastream.getTracks()
.map( (track) => track.getSettings().deviceId );
如果你这样做
const label = stream.getVideoTracks()[0].label
您将得到视频设备的名称。它是MediaStreamTrack类的一个属性。
至于default选项，下面是我如何找出哪一个是默认的。(这很糟糕，但我没有找到更好的方法。)
执行.getUserMedia({video:true, audio:true})操作并查看label属性。这个愚蠢的约束对象选择了默认设备，并顺便完成了用户权限授予。
当我说默认设备时，我是指在浏览器设置中设置的设备。