iOS端react-native-webview使用WebRTC时playsInline不生效弹出直播窗口问题

• iOS WebKit内核兼容要求：仅配置React驼峰格式的playsInline属性不足以覆盖所有iOS版本，部分旧版本iOS需要额外识别带webkit前缀的播放属性，缺失时会强制触发实时媒体流的全屏播放逻辑。
• WebView配置冲突：当前配置中allowsFullscreenVideo={true}优先级高于inline播放配置，WebRTC属于实时直播流，iOS会默认调用全屏播放组件加载。
• React属性渲染漏洞：部分React版本渲染playsInline属性时，不会自动转换为DOM原生可识别的小写playsinline属性，导致WebKit内核读取不到inline播放配置。

1. 修改video标签配置，补充前缀属性并强制写入原生DOM属性，避免React渲染丢失配置：

return (
  <video
    autoPlay = { true }
    className = { className }
    id = { id }
    muted = { true }
    playsInline = { true }
    webkitPlaysInline = { true } // 新增webkit前缀兼容属性
    ref = { this._setVideoElement }
    style = { style }
    { ...eventHandlers } />
);

// 同步修改ref绑定方法，强制给DOM节点写入原生属性
_setVideoElement = (el) => {
  this.videoElement = el;
  if (el) {
    el.setAttribute('playsinline', 'true');
    el.setAttribute('webkit-playsinline', 'true');
  }
}

2. 调整WebView配置，关闭默认全屏播放权限：

<WebView
  userAgent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.97 Safari/537.36"
  source={{ uri: 'https://www.***' }}
  ref = {webviewRef}
  onMessage={handleOnMessage}
  originWhitelist={['*']}
  allowsInlineMediaPlayback = {true}
  allowsFullscreenVideo = {false} // 修改为false，禁用默认全屏权限
  javaScriptEnabled = {true}
  scalesPageToFit
  mediaPlaybackRequiresUserAction={false}
  startInLoadingState
  javaScriptEnabledAndroid
  useWebkit
/>

3. 额外校验：确保WebRTC媒体流赋值给video节点时，video已经完成挂载，且muted属性始终为true，iOS对非静音的媒体流会强制触发用户交互校验，也可能导致全屏弹出。

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