获取设备

enumerateDevices(),方法可以获取的当前设备，所有可用设备。

代码

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport"
  6.           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>Document</title>
  9. </head>
  10. <body>
  11. <video id="video" controls autoplay></video>
  12. </body>
  13. </html>
  15. <script>
  16. //  获取所有可用设备
  17. function updateDeviceList(){
  19. window.navigator.mediaDevices.enumerateDevices()
  20.     .then(enumerateDevices => {
  21.         enumerateDevices.forEach(e =>{
  22.             console.log(`${e.deviceId} ${ e.kind} ${e.label} ${e.groupId}`)
  23.         })
  24.     })
  25.     .catch(err =>{
  26.         console.log(err.name + '' + err.message)
  27.     })
  28. }
  30. //  addEventListener 监听变化
  31. navigator.mediaDevices.addEventListener("devicechange", e =>{
  32.     console.log('devicechange 监听设备运行时候热拔插',)
  33.     updateDeviceList();
  34. })
  36. //  事件具柄监听变化
  37. navigator.mediaDevices.ondevicechange = (event)=> {
  38.     console.log('ondevicechange句柄 监控设备运行时候热拔插')
  39.     updateDeviceList()
  40. }
  41. </script>