20、音频设备管理：枚举与选择、设备切换、音量控制与静音检测

音频设备管理，说白了就是让WebRTC知道「你用哪个麦克风、哪个喇叭、哪个摄像头」。嗯，摄像头其实归视频管，但音频设备这块儿，坑是真的多。

我记得刚做第一个WebRTC项目时，用户反馈说「我能听到对方，但对方听不到我」。查了半天，原来是浏览器默认选了系统录音设备，而用户的USB麦克风根本没被识别。从那以后，我对设备枚举这块儿就格外上心。

20.1 设备枚举：先搞清楚有哪些设备

WebRTC通过 navigator.mediaDevices.enumerateDevices() 来获取设备列表。这个API会返回所有可用的音视频设备，包括麦克风、摄像头和扬声器。

// 获取所有设备
async function getAudioDevices() {
  const devices = await navigator.mediaDevices.enumerateDevices();
  
  const audioInputs = devices.filter(d => d.kind === 'audioinput');
  const audioOutputs = devices.filter(d => d.kind === 'audiooutput');
  
  console.log('麦克风数量:', audioInputs.length);
  console.log('扬声器数量:', audioOutputs.length);
  
  return { audioInputs, audioOutputs };
}
注意：enumerateDevices() 返回的设备列表，在用户未授权时可能只包含「默认设备」或 deviceId 为空。我建议在用户点击「开始通话」按钮后再调用，或者先请求一次 getUserMedia 获取权限。

每个设备对象包含以下字段：

字段 说明 我的经验
deviceId 设备唯一标识 持久化存储时用这个，但注意跨会话可能变化
kind 设备类型 audioinput / audiooutput / videoinput
label 设备名称 有权限后才显示，否则为空字符串
groupId 同一物理设备的组ID 可以用来匹配同一设备的麦克风和扬声器

20.2 设备选择：让用户自己挑

拿到设备列表后，我们得给用户一个选择界面。我个人习惯用 <select> 下拉框，把设备名展示出来，deviceId 存到 value 里。

function populateDeviceSelect(selectEl, devices) {
  selectEl.innerHTML = '';
  devices.forEach(device => {
    const option = document.createElement('option');
    option.value = device.deviceId;
    option.text = device.label || `麦克风 ${device.deviceId.slice(0, 8)}`;
    selectEl.appendChild(option);
  });
}

// 用户选择后，重新创建轨道
async function switchMicrophone(deviceId) {
  const stream = await navigator.mediaDevices.getUserMedia({
    audio: { deviceId: { exact: deviceId } }
  });
  
  // 替换掉 PeerConnection 中的旧轨道
  const [newTrack] = stream.getAudioTracks();
  const sender = pc.getSenders().find(s => s.track.kind === 'audio');
  await sender.replaceTrack(newTrack);
}
小技巧：设备切换时不要重新创建 PeerConnection，用 replaceTrack 替换轨道即可。这样不会中断通话，对方也感觉不到切换过程。

20.3 设备切换：实时切换不卡顿

设备切换的核心逻辑其实就三步：

  1. 用新设备ID重新获取 getUserMedia
  2. 从新流中取出音频轨道
  3. 调用 sender.replaceTrack() 替换旧轨道

我曾经踩过一个坑：切换设备后，旧流没有及时关闭，导致浏览器一直占用麦克风。后来我养成了习惯，切换前先停掉旧流的所有轨道。

async function switchAudioDevice(newDeviceId) {
  // 1. 停掉旧流
  if (currentStream) {
    currentStream.getTracks().forEach(t => t.stop());
  }
  
  // 2. 获取新流
  const constraints = {
    audio: {
      deviceId: { exact: newDeviceId },
      echoCancellation: true,
      noiseSuppression: true
    }
  };
  
  try {
    currentStream = await navigator.mediaDevices.getUserMedia(constraints);
    
    // 3. 替换轨道
    const [newTrack] = currentStream.getAudioTracks();
    const sender = pc.getSenders().find(s => s.track.kind === 'audio');
    if (sender) {
      await sender.replaceTrack(newTrack);
    }
    
    // 4. 更新UI
    updateDeviceUI(newDeviceId);
  } catch (err) {
    console.error('设备切换失败:', err);
    // 回退到旧设备
  }
}

20.4 音量控制：别让用户炸麦

音量控制分两块：输入音量（麦克风）和输出音量（扬声器）。

输入音量，说白了就是控制 getUserMedia 的音量增益。WebRTC 原生不提供直接调音量的 API，但我们可以通过 AudioContext 来处理。

// 创建音频上下文处理音量
const audioContext = new AudioContext();
const source = audioContext.createMediaStreamSource(stream);
const gainNode = audioContext.createGain();
gainNode.gain.value = 0.8; // 音量 80%

source.connect(gainNode);
gainNode.connect(audioContext.destination);

// 动态调整音量
function setVolume(level) {
  gainNode.gain.value = Math.max(0, Math.min(1, level));
}
注意：用 AudioContext 处理音量会增加延迟。如果对实时性要求高，我建议在服务端做音量归一化，客户端只做静音检测。

输出音量呢？浏览器不允许 JS 直接控制扬声器音量，那是操作系统的事。我们能做的，就是在 UI 上给用户一个提示，或者用 HTMLMediaElement.volume 控制播放音量。

20.5 静音检测：别让沉默浪费带宽

静音检测（VAD，Voice Activity Detection）是音频处理里很实用的功能。检测到用户没说话时，可以停止发送音频数据，节省带宽。

WebRTC 原生支持静音检测，通过 RTCRtpSender 的 track.enabled 来控制。

// 手动静音
function muteMicrophone() {
  const sender = pc.getSenders().find(s => s.track.kind === 'audio');
  if (sender && sender.track) {
    sender.track.enabled = false;
    isMuted = true;
    updateMuteUI(true);
  }
}

// 取消静音
function unmuteMicrophone() {
  const sender = pc.getSenders().find(s => s.track.kind === 'audio');
  if (sender && sender.track) {
    sender.track.enabled = true;
    isMuted = false;
    updateMuteUI(false);
  }
}

但 track.enabled 只是「手动开关」，不是真正的 VAD。要实现自动静音检测，得用 Web Audio API 分析音频数据。

// 简单的 VAD 实现
function createVAD(stream, threshold = 0.02) {
  const audioContext = new AudioContext();
  const source = audioContext.createMediaStreamSource(stream);
  const analyser = audioContext.createAnalyser();
  analyser.fftSize = 256;
  
  source.connect(analyser);
  
  const dataArray = new Uint8Array(analyser.frequencyBinCount);
  
  function checkVoiceActivity() {
    analyser.getByteTimeDomainData(dataArray);
    
    let sum = 0;
    for (let i = 0; i < dataArray.length; i++) {
      const value = (dataArray[i] - 128) / 128;
      sum += value * value;
    }
    
    const rms = Math.sqrt(sum / dataArray.length);
    return rms > threshold;
  }
  
  // 每 100ms 检测一次
  setInterval(() => {
    const isSpeaking = checkVoiceActivity();
    if (isSpeaking !== wasSpeaking) {
      wasSpeaking = isSpeaking;
      onVADChange(isSpeaking);
    }
  }, 100);
  
  return { checkVoiceActivity };
}
我的建议：VAD 阈值不要设得太低，否则环境噪音会被误判为语音。我一般设 0.02-0.05，具体看实际环境。另外，VAD 检测到静音后，不要立即关掉轨道，加个 300ms 的「释放延迟」，避免说话间隙被频繁开关。

20.6 知识体系总览

下面这张图，是我梳理的音频设备管理核心流程。你一看就明白：

音频设备管理核心流程 设备枚举 enumerateDevices() 设备选择 用户界面 + deviceId 设备切换 replaceTrack() 音量控制 GainNode / volume 静音检测 VAD / track.enabled 音频流输出 注：设备枚举 → 选择 → 切换为主线流程，音量控制和静音检测为并行处理

从图上你能看到，设备枚举是起点，然后用户选择设备，接着可以随时切换。音量控制和静音检测是并行处理的，互不干扰。

20.7 避坑指南

最后，分享几个我踩过的坑：

  • 设备ID会变：浏览器重启后，某些设备的 deviceId 会变化。我建议用 label + groupId 组合来识别设备，或者让用户重新选择一次。
  • 权限问题：iOS Safari 上，enumerateDevices 在未授权时返回空数组。解决办法是先调一次 getUserMedia 获取权限。
  • 切换延迟：设备切换时，旧流释放和新流获取之间有短暂间隙。我一般加一个「切换中」的 loading 状态，避免用户误操作。
  • VAD 误判：风扇声、键盘声都可能触发 VAD。我建议加一个「静音阈值自适应」功能，根据环境噪音动态调整。

嗯，音频设备管理这块儿，说难不难，说简单也不简单。关键是理解浏览器的权限模型和设备生命周期，再加上一点用户体验的考量。你把这些搞明白了，用户那边的「听不到」「炸麦」「杂音」问题，基本都能解决。

公众号:蓝海资料掘金营，微信deep3321

← 上一章 📖 返回目录 下一章 →