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

媒体接口

  • 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 = defaultaudioinput: MacBook Air麦克风 (Built-in) id = 343f8207e0b9ebc3f9a98cde134d2818e64b2141b3bd087c58974c727bdca8c0videoinput: FaceTime HD Camera id = 5ce24d4798ba56b830bc8adc4bcc7171dbe0fcca481f739606190492b21a1e21videoinput: OBS Virtual Camera (m-de:vice) id = 495bd88129048451bf9b0c5c9342f298c55fdaedf91b3cfe0470a4cbc36e4d26audiooutput: 默认 - MacBook Air扬声器 (Built-in) id = defaultaudiooutput: MSI PAG271P (HDMI) id = c20fbe0e2317c5f754d7e334acfeee6b39e7cd64fd37a3ed536142a7ec64f296audiooutput: 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>