iOS webRTC无法调起系统相机问题

一、背景

某个需求，用WKWebView打开某个H5页面，其中H5使用WebRTC技术，自行通过调用navigator.mediaDevices.getUserMedia方法来调起系统相机，询问权限。

二、问题现象

打开H5，获取系统相机时页面黑屏，H5报错文案提示设备/系统不支持。

三、问题出现时机

1. 提测时测试正常通过，UAT时一直失败
2. 有一部手机，安装提测包，获取相机失败，下午重启后又正常
3. 有一部手机，本地跑工程，安装后获取相机失败。另外单独重新写一个webview打开H5，还是获取相机失败。最后新建一个app工程（在info.plist中写了NSCameraUsageDescription），webview打开H5页面，获取相机成功。回头进行对比排查问题。

四、结论

1. 因为info.plist文件中没有写相机权限（NSCameraUsageDescription）！！！
   工程中的权限声明是写在InfoPlist.strings中，用了Localization进行提示语国际化。

心路历程：
一开始，认为在InfoPlist.strings中写，和info.plist中效果一样，对比排查下来，发现是不一样的。

1. 对于native来说，在询问权限时会优先取infoPlist.string的国际化文案，没有时，会取info.plist中默认文案。如果都没写，在申请权限时会crash。

2. 对于H5来说，相机权限需要两层申请:
   (1) 弹窗申请app访问系统相机的权限（和普通native申请的弹窗一样），猜测H5这一步只从info.plist中拿取！！不会管InfoPlist.strings。如果info.plist中没有，就会报错提示设备/系统不支持。
   (2) 申请当前web页面访问相机的权限，用户同意后可正常使用相机。

   
   整个app申请相机权限
   web页面申请相机权限
   

   如果在native中，之前已经申请通过了相机权限，H5只会进行上述第2步，且每次进入H5都会进行第2步申请权限。

2. webRTC仅支持的iOS系统版本>=14.3，所以兼容方案：
   (1) >=14.3的版本，在app中打开H5页面
   (2) else，跳转到Safari中打开H5
3. 在后续测试中还发现，同样的系统版本（>=14.3），在不同设备上，还存在无法调起相机的情况，最后发现在进H5入口之前native先申请好camera权限可以解决这个问题。所以最后 >=14.3的系统版本，在app中进入H5页面之前，先由native申请系统相机权限 = =

五、引用：

• WebKit getUserMedia bug 追踪：https://bugs.webkit.org/show_bug.cgi?id=208667
• WebKit getUserMedia bug 追踪2: https://bugs.webkit.org/show_bug.cgi?id=220184
  • 其中提到一个solution for 《Camera for iOS is not working in inside webview》: https://github.com/react-native-webview/react-native-webview/issues/1672
• WebKit - MediaRecorder API
  getUserMedia in WKWebView
• Requesting Authorization for Media Capture on iOS
  Configure Your Info.plist

心累。🙃