Chrome扩展：如何定期访问摄像头与音频？

首先明确一点：不推荐使用background.js（或现代Chrome扩展中的Service Worker背景脚本）直接实现摄像头/音频访问，原因很简单——背景脚本是无界面的后台环境，既没有可绑定媒体流的audio/video元素，也缺乏浏览器要求的用户触发上下文（浏览器会直接阻止非用户交互触发的媒体权限请求）。

下面是针对Chrome扩展场景的最优实现方案：

一、选择合适的扩展上下文 #

优先在有UI且能触发用户交互的环境中实现，推荐这几个场景：

• Popup页面：适合轻量需求，用户点击扩展图标即可打开，天然具备用户触发的上下文，权限请求容易通过。
• 自定义扩展页面：比如Options页面或独立的工具页面，适合复杂的计算机视觉/音频ML操作，拥有完全可控的界面。
• Content Script：如果需要和当前网页的内容结合（比如在页面中注入视觉分析），可以在Content Script中请求媒体流，但需注意上下文隔离限制。

二、配置必要的权限 #

在manifest.json中必须声明媒体捕获权限，示例如下：

{
  "manifest_version": 3,
  "name": "媒体处理扩展",
  "version": "1.0",
  "permissions": ["audioCapture", "videoCapture"],
  // 如果需要在特定网页中使用，可替换为具体域名
  "host_permissions": ["<all_urls>"],
  "action": {
    "default_popup": "popup.html"
  }
}

三、具体实现示例 #

1. Popup页面实现（最常用场景） #

创建popup.html作为扩展的弹出界面：

<!-- popup.html -->
<div style="width: 320px; padding: 10px;">
  <h3>音频捕获</h3>
  <audio id="audioPlayer" controls style="width: 100%;"></audio>
  
  <h3 style="margin-top: 15px;">摄像头捕获</h3>
  <video autoplay style="width: 100%; border-radius: 4px;"></video>
</div>
<script src="popup.js"></script>

然后在popup.js中处理媒体流请求：

// popup.js
document.addEventListener('DOMContentLoaded', async () => {
  // 处理音频流
  const audioPlayer = document.getElementById('audioPlayer');
  try {
    const audioStream = await navigator.mediaDevices.getUserMedia({ 
      audio: true, 
      video: false 
    });
    audioPlayer.srcObject = audioStream;
  } catch (err) {
    console.error('音频捕获失败:', err);
    alert('无法获取音频权限，请检查浏览器设置');
  }

  // 处理视频流
  const videoElement = document.querySelector('video');
  try {
    const videoStream = await navigator.mediaDevices.getUserMedia({ 
      video: { width: 320, height: 240 } 
    });
    videoElement.srcObject = videoStream;
  } catch (err) {
    console.error('摄像头捕获失败:', err);
    alert('无法获取摄像头权限，请检查浏览器设置');
  }
});

2. 背景脚本间接处理媒体流（特殊场景） #

如果确实需要在后台处理媒体数据（比如后台录制音频），不要直接在背景脚本中请求流，而是先在Popup/Content Script中获取流，再通过MessageChannel将媒体轨道传递给背景脚本：

// Popup.js 中获取轨道并发送
const audioStream = await navigator.mediaDevices.getUserMedia({ audio: true });
const [audioTrack] = audioStream.getAudioTracks();

const channel = new MessageChannel();
chrome.runtime.sendMessage({ type: 'receiveAudioTrack' }, (port) => {
  port.postMessage({ track: audioTrack }, [audioTrack]);
});

// background.js（Service Worker）中接收并处理
chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
  if (msg.type === 'receiveAudioTrack') {
    const port = sender.port;
    port.onmessage = (e) => {
      const audioTrack = e.data.track;
      // 这里可以创建MediaRecorder进行录制或其他处理
      const recorder = new MediaRecorder(new MediaStream([audioTrack]));
      recorder.ondataavailable = (event) => {
        // 处理录制的音频数据
        console.log('录制数据:', event.data);
      };
      recorder.start();
    };
    sendResponse(port);
    return true; // 保持端口连接
  }
});

四、常见问题注意事项 #

• 权限拒绝：确保权限已在manifest.json中声明，且媒体请求必须在用户触发的事件中（比如点击按钮）发起，部分浏览器会阻止页面加载时自动触发的权限请求。
• 上下文隔离：Content Script中的navigator.mediaDevices属于隔离上下文，如需和背景脚本共享数据，需通过消息通信传递轨道而非直接传递流对象。
• Service Worker限制：现代Chrome扩展的背景脚本是Service Worker，无DOM环境，无法直接操作audio/video元素，仅适合处理纯数据类的媒体逻辑。

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