关于摄像头:浏览器获取摄像头麦克风设备列表

开发直播类的网页利用时，往往须要在开播前检测摄像头和麦克风是否失常，本文介绍一下浏览器如何获取到可用的摄像头和麦克风设施列表。

媒体接口

• mediaDevices.getUserMedia()
• mediaDevices.enumerateDevices()

须要用到下面两个媒体接口，getUserMedia() 用于获取用户受权，enumerateDevices() 用于获取可用设施列表。

代码实现

async function openUserMedia(e) {
  // 1. 获取到设施受权
  await navigator.mediaDevices.getUserMedia({video: true, audio: true});

  // 2. 获取设施列表
  navigator.mediaDevices.enumerateDevices()
  .then(function(devices) {devices.forEach(function(device) {console.log(device.kind + ":" + device.label + "id =" + device.deviceId);
      });
  })
  .catch(function(err) {console.log(err.name + ":" + err.message);
  });
}

openUserMedia()

如果有一个或多个 MediaStream 处于活动状态或者取得了长久受权，将会输入以下内容：

audioinput: 默认 - MacBook Air 麦克风 (Built-in) id = default
audioinput: MacBook Air 麦克风 (Built-in) id = 343f8207e0b9ebc3f9a98cde134d2818e64b2141b3bd087c58974c727bdca8c0
videoinput: FaceTime HD Camera id = 5ce24d4798ba56b830bc8adc4bcc7171dbe0fcca481f739606190492b21a1e21
videoinput: OBS Virtual Camera (m-de:vice) id = 495bd88129048451bf9b0c5c9342f298c55fdaedf91b3cfe0470a4cbc36e4d26
audiooutput: 默认 - MacBook Air 扬声器 (Built-in) id = default
audiooutput: MSI PAG271P (HDMI) id = c20fbe0e2317c5f754d7e334acfeee6b39e7cd64fd37a3ed536142a7ec64f296
audiooutput: MacBook Air 扬声器 (Built-in) id = cea14bbd0ab3b96fd22d84941c63aac1c6de60646744efa2d5bd20fa566b7600

能够看到有音频输出、音频输入、视频输出设施。

咱们个别须要用户抉择的就是音频输出、视频输出设施，能够写两个过滤办法，把获取到的设施展现在页面上。

别离获取摄像头和麦克风

function getCameras() {return new Promise((resolve, reject) => {navigator.mediaDevices.enumerateDevices()
        .then(function(devices) {resolve(devices.filter(d => d.kind === 'videoinput'))
        })
        .catch(function(err) {console.log(err.name + ":" + err.message);
        });
    })
}

function getMicrophones() {return new Promise((resolve, reject) => {navigator.mediaDevices.enumerateDevices()
        .then(function(devices) {resolve(devices.filter(d => d.kind === 'audioinput'))
        })
        .catch(function(err) {console.log(err.name + ":" + err.message);
        });
    })
}

// 3. 设施列表插入到页面
let cameraSelect = document.getElementById('camera-select');
let microphoneSelect = document.getElementById('microphone-select');

const updateDevice = async () => {cameras = await getCameras();
  cameras?.forEach(camera => {const option = document.createElement('option');
    option.value = camera.deviceId;
    option.text = camera.label;
    cameraSelect.appendChild(option);
  });

  microphones = await getMicrophones();
  microphones?.forEach(microphone => {const option = document.createElement('option');
    option.value = microphone.deviceId;
    option.text = microphone.label;
    microphoneSelect.appendChild(option);
  });
}
updateDevice();

须要在页面上筹备两个下拉框：

<div class='select-wrapper'>
    <div class='input-group mb-3'>
      <label class='input-group-text' for='camera-select'>Camera</label>
      <select class='form-select' id='camera-select'>
      </select>
    </div>
    <div class='input-group mb-3'>
      <label class='input-group-text' for='microphone-select'>Microphone</label>
      <select class='form-select' id='microphone-select'>
      </select>
    </div>
</div>