如何解决getUserMedia 之后的 enumerateDevices:如何找到活动设备?
在给定 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",… }
// MediaDeviceInfo { deviceId: "dIjwtaOGQbjT2HOqfJ4xjzjXBwBxz4CEeX3a2fn0ZgA=",kind: "audioinput",… }
// MediaDeviceInfo { deviceId: "/t3u7BlfExATtBC4CUmyqIo8RORDxMu9aMrJJHN0Ez0=",label: "C922 Pro Stream Webcam Analog Stereo",… }
// MediaDeviceInfo { deviceId: "/5pqK1599b+mKHm26zCYQ+Ql3vG0Em7xiVbqfm1C/9A=",label: "Monitor of Built-in Audio Digital Stereo (IEC958)",… }
// MediaDeviceInfo { deviceId: "Tib/PVScFuFUQuAtYYVgtxcxeu08opGKe9MXEVmxq84=",label: "Monitor of USB Audio Device Analog Stereo",… }
我可以简单地将此列表转换为 <select/>
+<option/>
列表(每个 kind
一个),让用户决定并使用所选的 {{1} } (deviceId
)。
但是:轨道和设备 ID 不匹配,那么我如何确定应该预选哪个 getUserMedia({ audio: { deviceId: selectedDeviceId } })
?查看 MDN,流的轨道 ID 是 generated by the browser(这是有道理的),但是 MediaStream
API 没有提供太多替代方案...
当然,答案不能是“按标签走”——我可以插入第二个相同的网络摄像头并拥有两个同名的视频设备?
解决方法
您可以获取当前应用于 MediaStreamTracks 的 MediaTrackSettings 并从那里检查 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
属性。那个愚蠢的约束对象选择默认设备,顺便完成用户权限授予。
当我说默认设备时,我指的是在浏览器设置中设置的设备。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。