Mac端Chrome录屏音频失效？基于RecordRTC的扩展解决方案咨询

我之前帮不少开发者排查过Mac上Chrome屏幕音频录制的兼容问题，结合RecordRTC的特性，给你梳理几个经过验证的解决思路：

1. 先搞定Mac系统级权限（最关键的第一步） #

Mac的隐私管控比Windows严格太多，Chrome必须拿到明确的系统权限才能捕获屏幕音频：

• 打开「系统设置」→「隐私与安全性」→「屏幕录制」，确认Chrome在列表里且已勾选
• 同样在「麦克风」权限栏里，确保Chrome的权限也已开启
• 划重点：修改权限后必须完全重启Chrome，否则新权限不会生效

2. 调整RecordRTC的媒体流配置 #

RecordRTC在Mac上对屏幕音频的捕获不能依赖默认配置，必须显式声明：

• 调用getDisplayMedia时，一定要明确设置audio: true，示例代码：

const stream = await navigator.mediaDevices.getDisplayMedia({
  video: {
    displaySurface: 'monitor' // 可根据需求改为window/application
  },
  audio: true // 必须开启这一项才能捕获屏幕音频
});

• 扩展的manifest.json要声明足够的权限：

{
  "permissions": ["desktopCapture", "audioCapture", "activeTab"]
}

• 初始化RecordRTC时，建议指定type: 'video'（同时包含音频轨道），避免单独音频录制的兼容性问题：

const recorder = RecordRTC(stream, {
  type: 'video',
  mimeType: 'video/webm;codecs=vp9,opus' // 选择支持音频的容器格式
});

3. 排查Mac的音频路由问题 #

部分Mac音频设备会干扰屏幕音频捕获：

• 优先使用内置扬声器或有线外接音箱，暂时避开AirPods这类蓝牙设备（部分蓝牙设备在屏幕录制场景下存在兼容bug）
• 可以通过navigator.mediaDevices.enumerateDevices()获取设备列表，引导用户选择合适的音频输出设备

4. 确保Chrome版本是最新稳定版 #

旧版本Mac Chrome在屏幕音频捕获上有已知bug：

• 打开Chrome→「关于Google Chrome」，检查并更新到最新稳定版
• 尽量不要用Beta或Dev版本，这类版本可能存在未修复的兼容性问题

5. 调试排查技巧 #

如果还是不行，用Chrome开发者工具定位问题：

• 打开「开发者工具」→「Media」面板，查看捕获的媒体流是否包含音频轨道
• 在「Console」里查看RecordRTC是否抛出权限相关的DOMException错误
• 先在普通网页（非扩展环境）测试相同的RecordRTC代码，排查是否是扩展权限的问题

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