Android平台MAUI WebView摄像头视频流无法显示问题求助

针对你遇到的MAUI WebView加载JS网页后摄像头画面无法显示的问题，结合你已做的配置，可从以下几个关键环节排查：

1. 完善WebView核心配置 #

确保WebView开启了必要的媒体与JS支持：

var webView = new WebView();
// 启用JavaScript
webView.Settings.JavaScriptEnabled = true;
// 关闭媒体播放需用户手势限制（Android默认开启，会阻碍视频流自动播放）
webView.Settings.MediaPlaybackRequiresUserGesture = false;
// 启用DOM存储，避免JS调用API时出现存储相关错误
webView.Settings.DomStorageEnabled = true;
// 允许混合内容（若加载本地HTML或非HTTPS资源时需开启）
if (Build.VERSION.SdkInt >= BuildVersionCodes.Lollipop)
{
    webView.Settings.MixedContentMode = Android.Webkit.MixedContentHandling.AlwaysAllow;
}

2. 验证自定义WebChromeClient权限处理 #

确认权限请求处理逻辑覆盖所有需要的资源类型，且正确授予：

public class CustomWebChromeClient : WebChromeClient
{
    public override void OnPermissionRequest(PermissionRequest request)
    {
        // 直接授予所有请求的资源（需确保已提前申请系统权限）
        request.Grant(request.GetResources());
    }
}

// 给WebView绑定自定义ChromeClient
webView.SetWebChromeClient(new CustomWebChromeClient());

3. 检查HTML/JS代码兼容性 #

• Video元素必须添加关键属性：Android环境下playsinline可避免视频强制全屏导致的画面丢失，autoplay确保流加载后自动播放：

<video id="cameraVideo" autoplay playsinline width="300" height="200"></video>

• JS代码需处理播放异常：捕获getUserMedia和play方法的错误，方便定位问题：

async function startCamera() {
    try {
        const stream = await navigator.mediaDevices.getUserMedia({ 
            video: true, 
            audio: false // 若不需要音频可关闭，减少权限依赖
        });
        const videoElement = document.getElementById('cameraVideo');
        videoElement.srcObject = stream;
        // 主动调用play并捕获异常
        await videoElement.play();
    } catch (err) {
        console.error('摄像头加载失败:', err);
    }
}

4. 补充MAUI运行时动态权限申请 #

Android 6.0+（API 23）要求动态申请危险权限，仅在AndroidManifest.xml配置不够：

// 在加载WebView前或用户点击按钮时申请权限
var cameraPerm = await Permissions.RequestAsync<Permissions.Camera>();
var audioPerm = await Permissions.RequestAsync<Permissions.Microphone>();

if (cameraPerm != PermissionStatus.Granted || audioPerm != PermissionStatus.Granted)
{
    // 提示用户授予权限，否则无法调用摄像头
    return;
}

5. 启用WebView调试定位JS错误 #

开启WebView调试后，可通过Chrome浏览器chrome://inspect查看JS控制台的错误信息，精准定位代码问题：

if (Build.VERSION.SdkInt >= BuildVersionCodes.Kitkat)
{
    WebView.SetWebContentsDebuggingEnabled(true);
}

控制台显示相机已激活，说明硬件层面已响应请求，问题大概率出在WebView配置、JS播放逻辑或动态权限申请环节，按上述步骤逐一排查即可。

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