如何通过mediaDevices.getDisplayMedia仅捕获音频并优化MP3文件体积？

核心问题分析 #

1. 为何video: false会失效：Chrome等主流浏览器要求getDisplayMedia必须包含视频轨道，单独请求音频会直接被拒绝，这是浏览器API的固有限制。
2. 文件体积过大的原因：你之前的代码存在编码与容器不匹配的错误——用Opus编码（WebM专属格式）却强行封装成MP3容器，导致文件损坏或体积异常；同时未配置音频比特率，默认比特率偏高。

解决方案步骤 #

1. 正确捕获桌面音频（绕开视频必填限制） #

先请求包含视频和音频的桌面流，再手动移除视频轨道，仅保留音频轨道：

// 获取桌面共享流（必须带video参数，否则浏览器拒绝请求）
const desktopStream = await navigator.mediaDevices.getDisplayMedia({
  preferCurrentTab: true,
  video: true,
  audio: true
});

// 移除所有视频轨道，只保留音频轨道
desktopStream.getVideoTracks().forEach(track => track.stop());

2. 合并桌面音频与麦克风音频 #

通过getUserMedia获取麦克风流，将两个音频轨道合并到同一个MediaStream中：

// 获取麦克风音频流
const micStream = await navigator.mediaDevices.getUserMedia({ audio: true });

// 合并桌面音频与麦克风音频
const combinedStream = new MediaStream([
  ...desktopStream.getAudioTracks(),
  ...micStream.getAudioTracks()
]);

3. 配置MediaRecorder减小体积 #

使用Opus编码的WebM格式（比MP3体积小30%-50%，音质更优），并设置合适的音频比特率：

// 配置MediaRecorder，指定Opus编码与WebM容器，设置低比特率
const rec = new MediaRecorder(combinedStream, {
  mimeType: 'audio/webm; codecs=opus',
  audioBitsPerSecond: 64000 // 可根据需求调整，48000-128000是常用范围
});

let blobs = [];
rec.ondataavailable = (e) => {
  if (e.data.size > 0) blobs.push(e.data);
};

rec.onstop = () => {
  // 生成体积更小的WebM音频文件
  const audioBlob = new Blob(blobs, { type: 'audio/webm; codecs=opus' });
  // 下载文件示例
  const url = URL.createObjectURL(audioBlob);
  const a = document.createElement('a');
  a.href = url;
  a.download = 'recorded-audio.webm';
  a.click();
};

// 开始录制
rec.start();

4. 如需MP3格式的处理方案 #

浏览器原生不支持直接录制MP3，需通过转码库（如lamejs）将WebM音频转成MP3，同时控制比特率减小体积：

// 假设已获取到WebM格式的Blob
const webmBlob = new Blob(blobs, { type: 'audio/webm; codecs=opus' });
const arrayBuffer = await webmBlob.arrayBuffer();

// 解码WebM音频为AudioBuffer
const audioContext = new AudioContext();
const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);

// 使用lamejs编码为MP3（需提前引入lamejs库）
const mp3Encoder = new lamejs.Mp3Encoder(2, audioBuffer.sampleRate, 64); // 双声道、采样率、比特率
const leftChannel = audioBuffer.getChannelData(0);
const rightChannel = audioBuffer.getChannelData(1);

// 转换为lamejs要求的Int16格式
const int16Buffer = new Int16Array(leftChannel.length * 2);
for (let i = 0; i < leftChannel.length; i++) {
  int16Buffer[i * 2] = Math.max(-32768, Math.min(32767, leftChannel[i] * 32768));
  int16Buffer[i * 2 + 1] = Math.max(-32768, Math.min(32767, rightChannel[i] * 32768));
}

// 编码并生成MP3 Blob
const mp3Data = mp3Encoder.encodeBuffer(int16Buffer);
const mp3Blob = new Blob([mp3Data, mp3Encoder.flush()], { type: 'audio/mpeg' });

// 下载MP3文件示例
const mp3Url = URL.createObjectURL(mp3Blob);
const a = document.createElement('a');
a.href = mp3Url;
a.download = 'recorded-audio.mp3';
a.click();

关键注意事项 #

• 不要将Opus编码的音频强行封装到MP3容器中，这会导致文件损坏或体积异常。
• 比特率越低，文件体积越小，但音质会相应下降，需根据场景平衡两者。
• 部分浏览器对getDisplayMedia的音频捕获支持可能有差异，建议在Chrome、Edge等主流浏览器测试。

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