WKWebView调用摄像头iPhone端黑屏但iPad端运行正常

两类设备表现不一致的核心触发点基本集中在WebKit的默认配置差异、H5媒体流渲染逻辑的设备适配问题上，和摄像头权限本身无关（已配置权限且能正常申请的前提下，权限链路是通的）：

• 最常见原因：内联媒体播放配置未对齐
  iOS系统对WKWebView的媒体播放默认规则在两类设备上不一样：iPad端默认允许网页内联播放视频/实时摄像头流，iPhone端默认强制所有视频内容（包括getUserMedia返回的摄像头实时流）弹出原生全屏播放器播放。如果初始化WKWebView时没有手动把allowsInlineMediaPlayback属性设为true，同时H5里的video标签没加playsInline属性，iPhone端拿到摄像头流之后会触发原生全屏播放器的渲染逻辑，大概率出现流已启动但画面渲染失败的黑屏问题，iPad端因为默认开了内联权限就不会触发这个bug。
• 次要原因：摄像头参数约束不兼容
  如果在React代码里调用navigator.mediaDevices.getUserMedia时写死了摄像头分辨率、帧率参数，iPad的摄像头硬件支持的参数范围更宽，能匹配写死的固定值所以正常渲染；部分iPhone机型（尤其是老款SE、灵动岛系列机型）不支持写死的参数档位，会出现流拉取成功但画面无法正常解码渲染的黑屏问题。
• 少见原因：原生视图层级/渲染配置冲突
  如果给WKWebView设置了透明背景、错误的layer裁剪属性、或者自动约束在iPhone上因为刘海/底部安全区计算错误，导致摄像头流对应的WebKit合成渲染层被遮挡、裁剪，也会出现黑屏——这类问题在iPad上因为屏幕比例、安全区大小和iPhone不同，约束计算刚好不会触发遮挡，所以表现正常。

1. 修正WKWebView初始化配置，强制开启内联媒体播放权限：

   let webConfig = WKWebViewConfiguration()
   // 核心配置，必须添加
   webConfig.allowsInlineMediaPlayback = true
   // 可选配置，避免摄像头流需要手动点击才能启动播放
   webConfig.mediaTypesRequiringUserActionForPlayback = []
   let webView = WKWebView(frame: .zero, configuration: webConfig)
   

   同时确认React侧渲染摄像头的video标签加上playsInline属性（JSX里注意是驼峰命名playsInline，不要写成全小写的原生属性名，否则React不会把属性正确绑定到DOM上），如果是用react-webcam等第三方摄像头库，要把库对应的playsInline配置项打开。
2. 调整H5侧getUserMedia的参数，不要写死固定硬件参数，改用理想值做自适应适配：

   // 不推荐：写死分辨率容易触发部分iPhone机型渲染异常
   // const mediaStream = await navigator.mediaDevices.getUserMedia({
   //   video: { width: 1920, height: 1080, facingMode: 'environment' }
   // })
   
   // 推荐：用ideal参数做自适应匹配
   const mediaStream = await navigator.mediaDevices.getUserMedia({
     video: {
       facingMode: 'user',
       width: { ideal: 1280 },
       height: { ideal: 720 }
     }
   })
   

3. 检查原生端WKWebView的约束和层级配置：不要给WKWebView的layer设置非常规的裁剪、透明属性，确认iPhone上WKWebView的可见区域没有被其他原生视图遮挡，不要把WKWebView的alpha值设置为小于1的数值。

实测90%以上的同类跨设备黑屏问题，都是第一步的内联播放配置遗漏导致的，优先检查这一项即可。

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