如何在Ionic iOS WKWebView中使用MediaDevices.getUserMedia()访问摄像头

问题核心原因 #

iOS 系统对 WKWebView 的媒体捕获权限做了默认限制，仅在 Safari 中默认开放 getUserMedia 调用能力，普通应用内嵌的 WKWebView 需要额外修改原生配置才能支持该API，你之前安装的 cordova-plugin-camera 是调用系统原生相机UI的插件，和网页端调用 getUserMedia 拿实时媒体流的需求不匹配。

完整解决步骤 #

• 第一步：补充完整权限声明
  除了已经加的摄像头权限，还要补充麦克风权限（哪怕你的业务不需要音频，getUserMedia 请求时如果默认带audio参数，缺少该权限也会静默失败），在config.xml中添加如下配置：

  <edit-config file="*-Info.plist" mode="merge" target="NSMicrophoneUsageDescription">
      <string>需要麦克风权限完成媒体采集</string>
  </edit-config>
  

• 第二步：给 WKWebView 开启媒体捕获能力
  有两种实现方式，二选一即可：
  1. 直接安装适配插件：
     执行命令安装cordova-plugin-ios-getusermedia，该插件会自动修改 WKWebView 原生配置，开启摄像头和媒体捕获权限：

  ionic cordova plugin add cordova-plugin-ios-getusermedia
  

  2. 手动修改原生配置：
     如果你用的是cordova-plugin-ionic-webview，找到插件源码里的CDVWKWebViewEngine.m文件，在WKWebView配置初始化的代码块中添加以下两行：

  configuration.preferences.cameraCaptureEnabled = YES;
  configuration.preferences.microphoneCaptureEnabled = YES;
  

• 第三步：调整网页端调用逻辑
  iOS 对getUserMedia的调用有严格限制，必须满足以下要求才能触发权限弹窗：
  • 必须在用户主动触发的交互事件回调中调用（比如按钮的click事件），禁止页面加载完成后自动调用
  • 页面必须使用 HTTPS 协议，Ionic 本地默认的ionic://localhost自定义协议不受限制，HTTP 协议的远程页面会被拦截
  • 请求媒体参数不要设置超出设备支持的范围，测试阶段建议先用最简参数验证：

    navigator.mediaDevices.getUserMedia({video: true, audio: false})
    .then(stream => {
      console.log('获取流成功', stream)
    })
    .catch(err => {
      console.error('调用失败', err)
    })
    

• 第四步：清理缓存测试
  卸载设备上已安装的旧应用，重新编译安装，避免权限缓存导致不弹申请框。

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