网页区域录制：捕获裁剪区域成功但立体声音频异常求助

Chrome的getDisplayMedia系统音频捕获存在通道限制，即使指定channelCount:2也会强制将音频混缩为单声道。要保留页面视频的立体声声像，需要单独捕获页面内的音频轨道，再与裁剪后的视频轨道合并后录制。

修改后的完整代码实现 #

步骤1：启动屏幕共享（仅捕获视频） #

取消getDisplayMedia的音频捕获，只获取视频流并裁剪到目标区域：

// 仅捕获视频，不依赖系统音频捕获
stream = await navigator.mediaDevices.getDisplayMedia({
  video: true,
  audio: false,
  preferCurrentTab: true,
})

cropTarget = await CropTarget.fromElement(document.getElementById('container'))
const [videoTrack] = stream.getVideoTracks()
await videoTrack.cropTo(cropTarget)

步骤2：单独捕获页面视频的立体声音频 #

通过AudioContext直接从页面的<video>元素获取原始立体声音频轨道：

// 初始化音频上下文（需在用户交互触发的逻辑中执行）
const audioContext = new AudioContext();
// 从页面目标video元素创建音频源
const audioSource = audioContext.createMediaElementSource(video);
// 创建媒体流目标，用于导出音频轨道
const audioDest = audioContext.createMediaStreamDestination();
audioSource.connect(audioDest);
// 获取包含立体声音频的MediaStream
const audioStream = audioDest.stream;

步骤3：合并轨道并初始化MediaRecorder #

将裁剪后的视频轨道和立体声音频轨道合并，指定支持立体声的编码格式：

// 合并视频与音频轨道
const combinedStream = new MediaStream([videoTrack, ...audioStream.getAudioTracks()]);

// 初始化Recorder，指定VP9视频+Opus音频（Opus原生支持立体声）
recorder = new MediaRecorder(combinedStream, {
  mimeType: 'video/webm;codecs=vp9,opus',
  audioBitsPerSecond: 128000, // 可选：提升音频比特率优化音质
});

步骤4：录制/停止逻辑调整 #

确保音频上下文在录制时正常工作，同时清理资源：

// 录制按钮点击逻辑
const suggestedName = Date.now() + `.webm`,
handle = await window.showSaveFilePicker({ suggestedName }),
writable = await handle.createWritable()

recorder.start()
recorder.addEventListener(`start`, async () => {
  // 恢复被浏览器暂停的音频上下文
  if (audioContext.state === 'suspended') {
    await audioContext.resume();
  }
  video.play()
})
recorder.addEventListener(`dataavailable`, async (event) => {
  await writable.write(event.data)
  if (recorder.state === `inactive`) {
    await writable.close()
    // 录制结束后清理资源
    audioContext.close();
    videoTrack.stop();
    audioStream.getAudioTracks()[0].stop();
  }
})

// 停止按钮点击逻辑
if (recorder && recorder.state !== `inactive`) {
  recorder.stop()
}

关键说明 #

• Chrome 114版本中，getDisplayMedia的系统音频捕获会强制将多声道音频混缩为单声道，无法通过参数配置绕过，因此必须单独捕获页面内的音频轨道。
• Opus编码是WebM容器中支持立体声的最优选择，无需额外配置即可完整保留声道信息。
• 音频上下文必须在用户交互（如点击按钮）后初始化或恢复，否则会被浏览器的自动暂停策略阻止运行。

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