Jetpack Compose中WebView加载MJPEG格式Windows摄像头直播流显示空白的问题求助

回答： #

兄弟，我之前做MJPEG流相关的项目时也踩过一模一样的坑，浏览器正常但WebView空白的情况，90%都是WebView默认配置限制或者权限没配全导致的，咱们一步步来改：

1. 补全WebView的关键配置（最核心的修复点）

你的WebView配置太精简了，MJPEG是靠<img>标签持续拉取图片帧实现的流，WebView默认的一些安全/性能设置会阻止这个行为。直接替换你的MjpegWebView Composable：

@Composable
fun MjpegWebView(
    modifier: Modifier = Modifier,
    url: String
) {
    AndroidView(
        factory = { context ->
            WebView(context).apply {
                // 1. 配置WebView核心参数
                settings.apply {
                    // 必须开启！WebView默认可能不会自动加载图片，MJPEG流全靠这个
                    loadsImagesAutomatically = true
                    // 关闭媒体播放需要用户手动触发的限制（虽然是图片流，但部分机型受影响）
                    mediaPlaybackRequiresUserGesture = false
                    // 如果你用的是Flask的HTTP协议（非HTTPS），targetSdk28+默认会阻止HTTP混合内容
                    // 调试阶段先开这个，生产环境建议换成HTTPS
                    mixedContentMode = WebSettings.MIXED_CONTENT_ALWAYS_ALLOW
                }

                // 2. 加错误监听，方便排查问题
                webViewClient = object : WebViewClient() {
                    override fun onReceivedError(
                        view: WebView?,
                        request: WebResourceRequest?,
                        error: WebResourceError?
                    ) {
                        super.onReceivedError(view, request, error)
                        // 打开Logcat搜WebViewError就能看到具体报错
                        Log.e("WebViewError", "加载失败: ${error?.description}")
                    }
                }

                // 3. 部分机型硬件加速会导致MJPEG帧渲染异常，可选开关试试
                setLayerType(View.LAYER_TYPE_SOFTWARE, null)

                loadUrl(url)
            }
        },
        modifier = modifier
    )
}

2. 检查AndroidManifest的权限配置

别漏了最基础的网络权限，在AndroidManifest.xml里加上：

<!-- 必须加，否则App连不上网络 -->
<uses-permission android:name="android.permission.INTERNET" />

<!-- Android11+访问局域网需要这个权限 -->
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

另外，Android 10+的话，去系统设置里确认你的App已经被允许访问网络（有时候安装后默认会禁）。

3. 优化Flask服务的稳定性

虽然浏览器能正常访问，但给Flask加个小优化避免调试模式干扰：
把Flask启动代码改成：

if __name__ == '__main__':
    # 关闭debug模式，debug的重载机制可能会打断MJPEG流的连续传输
    app.run(host='0.0.0.0', port=5000, debug=False)

最后验证步骤

1. 确认Android设备和Windows电脑在同一局域网，用设备自带浏览器能打开Flask地址（你已经试过，没问题）
2. 替换代码后重新运行App，看Logcat有没有WebViewError的报错
3. 如果还是空白，试试注释掉setLayerType那行（开启硬件加速）

我当初就是漏了loadsImagesAutomatically和混合内容支持，卡了一下午，改完立刻就正常了，你按这个步骤来应该能解决！

内容来源于stack exchange