iOS系统中用户授权/拒绝录屏权限时如何触发执行对应函数？

浏览器端的录屏权限申请统一走标准MediaDevices.getDisplayMedia() API，你要的两个触发场景刚好对应这个API返回的Promise的两种状态回调：

• 用户点击允许并选择共享内容后触发Promise的resolve状态，对应你要的允许后执行函数
• 用户点击不允许、或者权限被禁用时触发Promise的reject状态，对应你要的拒绝后执行函数

可直接运行的代码示例 #

// 录屏权限申请触发函数
function applyScreenRecordPermission() {
  // 先做浏览器兼容判断
  if (!navigator.mediaDevices?.getDisplayMedia) {
    console.log('当前浏览器不支持录屏功能')
    // 不兼容场景也可直接触发拒绝后的逻辑
    onDenyRecord()
    return
  }

  // 调用API弹出系统级权限申请弹窗
  navigator.mediaDevices.getDisplayMedia({
    video: true,
    audio: false // 按需配置是否同时录制系统音频
  })
  .then(stream => {
    // 用户点击「允许录屏」后的逻辑写在这里
    onAllowRecord(stream)
    // stream为返回的录屏媒体流，可直接赋值给video元素播放、或用于后续录制/传输
  })
  .catch(err => {
    // 用户点击「不允许」、或权限异常时的逻辑写在这里
    // 可通过错误名称判断是否为用户主动拒绝
    if (err.name === 'NotAllowedError') {
      onDenyRecord()
    } else {
      console.log('录屏申请失败：', err)
      onDenyRecord()
    }
  })
}

// 允许录屏后执行的自定义函数
function onAllowRecord(stream) {
  console.log('用户同意录屏，获取到录屏流：', stream)
  // 你的自定义业务逻辑写在这里
}

// 拒绝录屏后执行的自定义函数
function onDenyRecord() {
  console.log('用户拒绝了录屏权限')
  // 你的自定义业务逻辑写在这里
}

注意事项 #

• 该API仅支持在HTTPS环境、或者localhost本地开发环境调用，公网HTTP环境会被浏览器直接拦截
• 如果用户之前已经给过站点永久录屏权限，再次调用时不会弹出权限弹窗，会直接执行允许后的逻辑
• 权限弹窗的样式由用户的操作系统/浏览器自带定义，前端代码无法自定义修改弹窗样式

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