如何在浏览器客户端实时捕获音频？基于WebRTC的会议音频转录实现指导

一、核心技术选型 #

• 标签页音频捕获：优先使用Chrome扩展的chrome.tabCaptureAPI（Firefox对应browser.tabCapture），这是捕获Google Meet/Zoom/Teams等会议音频最可靠的方式——会议音频均在当前标签页内播放，该API可精准捕获目标标签页的媒体流，无需额外选择音频设备，比WebRTC的getUserMedia更适配场景。
• 音频流处理：借助WebRTC的MediaStreamAPI处理捕获到的音频，转换为转录API支持的格式（如PCM、Opus）。
• 实时转录API：可选用Whisper API、Azure Speech to Text、Google Speech-to-Text等服务，以下流程为通用实现逻辑，不绑定具体服务商。

二、扩展开发步骤（以Chrome为例） #

1. 扩展清单配置（manifest.json） #

需申请必要权限，声明弹出页与后台脚本：

{
  "manifest_version": 3,
  "name": "会议音频转录工具",
  "version": "1.0",
  "permissions": ["tabCapture", "activeTab", "scripting"],
  "action": {
    "default_popup": "popup.html"
  },
  "background": {
    "service_worker": "background.js"
  }
}

2. 触发音频捕获（弹出页popup.js） #

点击扩展图标时，请求捕获当前活跃标签页的音频流：

document.getElementById('startCapture').addEventListener('click', async () => {
  try {
    const stream = await chrome.tabCapture.capture({ audio: true, video: false });
    chrome.runtime.sendMessage({ type: 'START_TRANSCRIPTION', streamId: stream.id });
  } catch (err) {
    console.error('捕获音频失败:', err);
    alert('无法捕获会议音频，请确保当前标签页为会议页面');
  }
});

document.getElementById('stopCapture').addEventListener('click', () => {
  chrome.runtime.sendMessage({ type: 'STOP_TRANSCRIPTION' });
});

3. 后台处理音频流并调用转录API（background.js） #

将捕获的MediaStream转换为可传输的音频数据，实时发送至转录API：

let mediaRecorder;

chrome.runtime.onMessage.addListener(async (message) => {
  if (message.type === 'START_TRANSCRIPTION') {
    const stream = await navigator.mediaDevices.getUserMedia({
      audio: {
        mandatory: {
          chromeMediaSource: 'tab',
          chromeMediaSourceId: message.streamId
        }
      }
    });

    // 选择适配转录API的格式，此处以Opus编码的webm为例
    mediaRecorder = new MediaRecorder(stream, { mimeType: 'audio/webm; codecs=opus' });
    
    mediaRecorder.ondataavailable = (event) => {
      if (event.data.size > 0) {
        // 用POST请求发送音频片段，WebSocket可进一步降低延迟
        fetch('https://your-transcription-api-endpoint', {
          method: 'POST',
          body: event.data,
          headers: { 'Content-Type': 'audio/webm' }
        })
        .then(res => res.json())
        .then(data => {
          chrome.runtime.sendMessage({ type: 'TRANSCRIPT_RESULT', text: data.transcript });
        })
        .catch(err => console.error('转录请求失败:', err));
      }
    };

    mediaRecorder.start(1000); // 每1秒发送一次音频片段，平衡延迟与数据量
  } else if (message.type === 'STOP_TRANSCRIPTION') {
    mediaRecorder?.stop();
  }
});

4. 展示转录结果（popup.js） #

接收后台返回的转录内容并展示：

const transcriptDiv = document.getElementById('transcript');

chrome.runtime.onMessage.addListener((message) => {
  if (message.type === 'TRANSCRIPT_RESULT') {
    transcriptDiv.textContent += message.text + ' ';
    // 自动滚动到最新内容
    transcriptDiv.scrollTop = transcriptDiv.scrollHeight;
  }
});

三、关键注意事项 #

• 权限授权：必须确保扩展获得activeTab和tabCapture权限，用户安装时需手动确认授权。
• 格式兼容性：不同转录API支持的音频格式不同，需提前确认并匹配MediaRecorder的编码格式。
• 实时性优化：使用WebSocket替代HTTP POST可降低传输延迟；调整MediaRecorder.start()的时间间隔，可在延迟与数据量间找到平衡。
• 跨浏览器适配：Firefox需替换为browser.tabCaptureAPI，Edge与Chrome的API逻辑基本一致，仅需少量兼容处理。
• 平台限制：主流会议平台一般不会拦截tabCapture这类浏览器原生API，但需避免在捕获时触发页面的媒体权限限制。

四、备选方案（WebRTC屏幕捕获） #

若tabCapture无法满足需求，可使用WebRTC的getDisplayMedia捕获系统音频，但该方式会捕获所有系统声音，易混入杂音：

const stream = await navigator.mediaDevices.getDisplayMedia({
  video: false,
  audio: true
});

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