Chrome调用getUserMedia获取扬声器流触发OverconstrainedError问题

你的代码核心错误 #

navigator.mediaDevices.getUserMedia() 的设计目的是捕获音频/视频输入设备（如麦克风、摄像头）的媒体流，完全不支持从音频输出设备（扬声器）获取流。你混淆了输入设备与输出设备的API用途：

• 音频输出设备的作用是播放已有的媒体流，而非作为流的数据源
• 你试图用 deviceId 指定音频输出设备来请求流，这违反了API的约束逻辑，必然抛出OverconstrainedError

另外，你枚举设备时筛选的是audiooutput类型设备，这类设备的deviceId根本不能用于getUserMedia的audio.deviceId参数——该参数仅接受音频输入设备的ID。

正确的音频输出设备用法（播放流） #

如果你只是想指定音频流的播放设备（比如让音频从特定扬声器输出），应该用 HTMLMediaElement.setSinkId() 方法，示例：

// 先获取音频输入流（比如麦克风）
navigator.mediaDevices.getUserMedia({audio: true}).then(stream => {
  const audio = new Audio();
  audio.srcObject = stream;
  // 枚举输出设备，选择目标设备
  navigator.mediaDevices.enumerateDevices().then(devices => {
    const targetSpeaker = devices.find(d => d.kind === 'audiooutput' && d.deviceId !== 'default' && d.deviceId !== 'communications');
    if (targetSpeaker) {
      audio.setSinkId(targetSpeaker.deviceId).then(() => {
        audio.play();
      });
    }
  });
});

捕获扬声器播放的音频（你的真实需求） #

如果你的目标是捕获扬声器正在播放的音频（系统/网页声音），分两种场景处理：

1. 捕获当前网页内的音频 #

如果要捕获当前网页中<audio>/<video>元素的播放音频，用Web Audio API即可实现：

const audioElement = document.querySelector('video'); // 替换为你的音频/视频元素
const audioCtx = new AudioContext();
// 创建媒体元素源节点
const source = audioCtx.createMediaElementSource(audioElement);
// 创建媒体流目标节点
const dest = audioCtx.createMediaStreamDestination();
// 连接节点
source.connect(dest);
// 获取捕获到的音频流
const capturedStream = dest.stream;

// 可将capturedStream用于录制、转发等操作

2. Chrome MV3扩展中的系统音频捕获（无tab/desktopCapture方案） #

Chrome中要捕获系统全局音频，官方仅支持chrome.tabCapture（标签页音频）和chrome.desktopCapture（桌面/应用音频）这两个API，因为涉及用户隐私，浏览器没有开放其他无权限限制的途径。

如果必须避开这两个API，唯一可行的替代是：仅捕获扩展自身页面或注入脚本的网页内的音频（用上述Web Audio方案），无法捕获其他应用或系统级别的音频。

内容的提问来源于stack exchange，提问作者Dude