iOS WebView设置allowsInlineMediaPlayback为true后摄像头仍全屏打开

数据老陈

2026-6-23

排查与解决iOS WebView中MediaStream摄像头全屏问题

1. 补充video标签的兼容属性

iOS WebView对playsInline的支持存在兼容性细节，需同时添加webkit前缀的属性，且用CSS样式强制控制尺寸（优先级高于HTML原生属性）：

<video
    autoPlay
    playsInline
    webkit-plays-inline
    muted
    loop
    preload="auto"
    style={{
        width: `${window.screen.width}px`,
        height: `${window.screen.height * 0.5}px`,
        objectFit: 'cover' // 可选，保持视频比例避免拉伸变形
    }}
    ref={videoEl} />

2. 完善WebView配置项

仅设置allowsInlineMediaPlayback = true不够，还需关闭视频播放的用户动作要求，防止WebView强制全屏：

Swift示例

webViewConfiguration.allowsInlineMediaPlayback = true
webViewConfiguration.mediaTypesRequiringUserActionForPlayback = []

Objective-C示例

webViewConfiguration.allowsInlineMediaPlayback = YES;
webViewConfiguration.mediaTypesRequiringUserActionForPlayback = WKAudiovisualMediaTypeNone;

3. 调整getUserMedia的视频约束

固定宽高可能超出设备摄像头支持范围，导致系统自动切换全屏适配，改用ideal参数指定理想尺寸，同时锁定方向：

const constraints = {
    audio: false,
    video: {
        facingMode: 'environment',
        width: { ideal: window.screen.width },
        height: { ideal: window.screen.height * 0.5 },
        orientation: 'portrait' // 锁定竖屏，避免旋转触发全屏逻辑
    }
}