如何使 Chrome 扩展程序捕获用户麦克风输入以及 tabcapture 输入

Question

嗨，我正在尝试为学校项目构建扩展来捕获会议音频+视频

目前我正在探索代码https://developer.chrome.com/docs/extensions/mv3/screen_capture/#audio-and-video-offscreen-doc 我面临的主要问题是录制用户麦克风音频，它只是重新编码选项卡音频 谁能帮我修改代码以接受用户麦克风输入？

在你的 Service Worker 中：

chrome.action.onClicked.addListener(async (tab) => {
  const existingContexts = await chrome.runtime.getContexts({});

  const offscreenDocument = existingContexts.find(
    (c) => c.contextType === 'OFFSCREEN_DOCUMENT'
  );

  // If an offscreen document is not already open, create one.
  if (!offscreenDocument) {
    // Create an offscreen document.
    await chrome.offscreen.createDocument({
      url: 'offscreen.html',
      reasons: ['USER_MEDIA'],
      justification: 'Recording from chrome.tabCapture API',
    });
  }

  // Get a MediaStream for the active tab.
  const streamId = await chrome.tabCapture.getMediaStreamId({
    targetTabId: tab.id
  });

  // Send the stream ID to the offscreen document to start recording.
  chrome.runtime.sendMessage({
    type: 'start-recording',
    target: 'offscreen',
    data: streamId
  });
});

屏幕外文档：

   chrome.runtime.onMessage.addListener(async (message) => {
      if (message.target !== 'offscreen') return;
      
      if (message.type === 'start-recording') {
        const media = await navigator.mediaDevices.getUserMedia({
          audio: {
            mandatory: {
              chromeMediaSource: "tab",
              chromeMediaSourceId: message.data,
            },
          },
          video: {
            mandatory: {
              chromeMediaSource: "tab",
              chromeMediaSourceId: message.data,
            },
          },
        });
    
        // Continue to play the captured audio to the user.
        const output = new AudioContext();
        const source = output.createMediaStreamSource(media);
        source.connect(output.destination);
    
        // TODO: Do something to recording the MediaStream.
      }
    });

我已成功通过 option.js 获取用户麦克风权限

document.getElementById('requestPermission').addEventListener('click', () => {
    navigator.mediaDevices.getUserMedia({ audio: true })
     .catch(err => {
        alert('Error: ' + err);
      });
  });

Answer 1

观看此视频，该视频解释了如何录制选项卡和屏幕 扩展浏览器

---

https://www.youtube.com/watch?v=sSleIpuecZk&list=PLxOYpovHh6ISG4dqNfckBiuoT2eXMC5iU&ab_channel=RustyZone