Safari扩展调用getDisplayMedia报错，能否实现标签页/屏幕录制？

首先直接给你结论：Safari浏览器是支持标签页录制功能的，你遇到的NotAllowedError主要是因为扩展上下文的权限限制和触发逻辑不符合Safari的安全规范，而非功能本身不支持。

接下来分析你的问题并给出解决方案：

错误原因拆解 #

你已经在系统偏好设置里开启了屏幕录制权限，但仍报错，核心原因有两个：

• 上下文限制：Safari对navigator.mediaDevices.getDisplayMedia()的调用有严格的上下文要求——必须由用户直接交互（比如点击按钮）在顶层页面上下文触发。扩展的弹出窗口（popup）属于嵌套的沙箱上下文，直接在popup里调用可能会被Safari的安全策略拦截。
• 扩展权限未正确配置：Safari扩展需要在manifest.json中明确声明媒体捕获相关权限，否则即使系统权限开启，扩展也无法调用对应的API。

具体解决方案 #

1. 调整触发逻辑到合规上下文 #

把录制触发逻辑移到以下两种合规的上下文：

• 扩展的弹出页面（Popup）：确保startCapture函数是直接绑定到按钮的点击事件，不能是异步延迟或非用户触发的调用。比如：

// popup.js
document.getElementById('recordBtn').addEventListener('click', async () => {
  const logElem = document.getElementById('log');
  const videoElem = document.getElementById('video');
  const displayMediaOptions = {
    video: { displaySurface: 'browser' }, // 指定录制浏览器标签页
    audio: true // 如果需要录制音频
  };

  logElem.innerHTML = '';
  try {
    videoElem.srcObject = await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
    dumpOptionsInfo(); // 你的自定义函数
  } catch (err) {
    console.error('Error: ' + err);
    logElem.textContent = `错误：${err.message}`;
  }
});

• 内容脚本（Content Script）：如果需要在当前标签页内触发录制，可以在内容脚本中监听来自popup的消息，然后由内容脚本调用getDisplayMedia（因为内容脚本运行在页面上下文，属于顶层上下文）。

2. 配置扩展Manifest权限 #

在你的manifest.json中添加必要的权限：

{
  "manifest_version": 3, // Safari 15+支持Manifest V3，旧版本用V2
  "name": "你的扩展名称",
  "version": "1.0",
  "permissions": ["mediaCapture", "<all_urls>"], // 声明媒体捕获权限和站点权限
  "action": {
    "default_popup": "popup.html"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ]
}

注意：如果是Manifest V2，permissions里直接加"mediaCapture"即可。

3. 验证Safari站点权限 #

除了系统层面的屏幕录制权限，还需要在Safari中给扩展开启站点权限：

1. 打开Safari偏好设置 → 隐私 → 网站权限 → 屏幕录制
2. 找到你的扩展对应的条目（格式类似safari-extension://[扩展ID]），确保权限设置为“允许”

4. 检查Safari版本 #

确保你的Safari版本在13.0及以上，因为getDisplayMediaAPI是从Safari 13开始正式支持的。

额外注意事项 #

• 当调用getDisplayMedia时，指定displaySurface: 'browser'可以直接让用户选择录制当前标签页（而非整个屏幕或窗口），这正是你需要的标签页录制功能。
• 录制过程中，Safari会在标签页顶部显示录制提示，这是浏览器的强制安全机制，无法隐藏。

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