Safari 15调用getDisplayMedia报需用户手势处理器调用错误求助

Safari 15 对屏幕共享接口的用户手势校验规则，比Chrome、15以下版本Safari严格很多，event.isTrusted === true只是接口调用的必要不充分条件，以下是所有已知触发场景和对应修复方案：

• 调用链路存在异步逻辑，丢失用户手势上下文
  Safari 15的用户手势激活窗口时长仅约1秒，远低于Chrome的3秒阈值，且只要执行链路中出现await、Promise.then、setTimeout这类微任务/宏任务拆分，会直接丢失手势激活上下文，哪怕触发源事件的isTrusted属性为true也会报错。
  修复方式：getDisplayMedia()必须放在用户触发事件（比如点击）的同步执行栈顶层调用，所有前置校验、逻辑判断尽量提前到事件触发前完成，不要在事件回调中插入异步等待逻辑再调用接口。
  错误写法示例：

  btn.addEventListener('click', async (e) => {
    console.log(e.isTrusted) // 此处打印true仍会报错
    await checkConfigValid() // await 直接丢失手势上下文
    const stream = await navigator.mediaDevices.getDisplayMedia({ video: true })
  })
  

  正确写法示例：

  // 前置逻辑提前执行，不占用点击事件的手势窗口
  await checkConfigValid()
  btn.addEventListener('click', () => {
    // 同步直接调用接口，不插入任何异步逻辑
    navigator.mediaDevices.getDisplayMedia({ video: true })
      .then(stream => {
        // 接口调用成功后再处理后续异步逻辑
      })
  })
  

• 框架合成事件/事件代理导致手势上下文不被识别
  如果使用了前端框架的合成事件（比如React SyntheticEvent）、第三方UI组件的封装事件、自定义事件代理，Safari 15不会将这类经过封装的事件识别为合法用户手势源，哪怕内部封装的原生事件isTrusted为true也会报错。
  修复方式：直接绑定原生DOM事件触发getDisplayMedia调用；如果是React场景，不要依赖框架的合成事件，通过ref获取真实DOM绑定原生事件兜底。
• 跨iframe运行场景权限/上下文不合法
  如果屏幕共享逻辑运行在iframe中，Safari 15要求iframe必须配置allow="display-capture"权限策略，且用户手势必须在iframe内部直接触发，父页面透传的事件、通过postMessage通知iframe触发的调用，都会被判定为非法上下文。
  修复方式：给iframe添加对应权限声明：

  <iframe src="your-page-url" allow="display-capture; microphone; camera"></iframe>
  

  触发屏幕共享的按钮必须放在iframe内部，由用户直接点击触发，不要跨上下文传递调用指令。

调试时可以在调用getDisplayMedia前打印navigator.userActivation.isActive，如果返回值为false，说明当前已经丢失合法的用户手势上下文，无需再排查isTrusted属性，直接顺着调用链路找异步拆分、事件封装的问题即可。

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