.NET MAUI Blazor iOS端video标签无法内联显示摄像头流如何解决

iOS下WKWebView默认禁用媒体内联播放能力，仅给video标签加前端属性不会生效，必须同步修改WebView的原生配置，具体操作步骤如下：

1. 配置iOS平台WKWebView内联播放权限 #

在项目的MauiProgram.cs文件中，添加BlazorWebView的平台Handler配置，打开内联播放开关，代码写在builder.Build()调用之前：

using Microsoft.AspNetCore.Components.WebView.Maui;
using WebKit;

// 省略其他builder配置...

builder.ConfigureMauiHandlers(handlers =>
{
    handlers.AddBlazorWebViewHandler();
    handlers.AddHandler<BlazorWebView, BlazorWebViewHandler>(handler =>
    {
        // 开启内联媒体播放核心开关
        handler.PlatformView.Configuration.AllowsInlineMediaPlayback = true;
        // 可选配置：关闭媒体播放需要用户手动触发的限制，适配自动播放场景
        handler.PlatformView.Configuration.MediaTypesRequiringUserActionForPlayback = WKAudiovisualMediaTypes.None;
    });
});

注意：修改完原生配置后需要完全卸载设备上的旧测试包，重新编译部署才会生效，热重载不会同步WebView的初始化配置。

2. 确认前端video标签属性完整 #

WebView配置开启后，video标签必须携带以下原生属性，缺一则可能触发iOS默认全屏逻辑：

<video 
    autoplay
    muted
    playsinline
    webkit-playsinline
></video>

• muted是iOS下视频自动播放的强制要求，若视频带音轨且未设置静音，即使开启内联配置也会触发全屏或播放失败
• 不要动态追加playsinline/webkit-playsinline属性，必须在标签首次渲染时就写入，iOS不会识别动态添加的这两个属性
• 如果使用Blazor组件动态渲染video标签，要确保属性作为DOM原生属性渲染，不要被框架转成自定义特性

3. 适配RecordRTC流赋值逻辑 #

调用摄像头和赋值流的环节避免触发全屏逻辑：

• 获取用户媒体流时不要传入和全屏相关的自定义约束
• 流赋值给srcObject后，不要主动调用webkitEnterFullscreen()这类强制全屏的API
• 赋值完成后可以手动调用video.play()触发播放，不要依赖iOS的默认播放触发逻辑

常见踩坑排查 #

• 如果部署后依然触发全屏，先检查项目的iOS部署版本是否>=14.5，低版本iOS的WKWebView内联配置存在兼容问题
• 若使用了第三方Blazor视频组件，要检查组件内部是否默认调用了全屏方法，是否覆盖了你写的内联属性
• 不需要原生播放控件时直接设置controls="false"，避免点击控件触发默认全屏逻辑

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