如何在Flutter中加载并播放HTML直播流？

问题说明 #

我尝试在Flutter的Container组件中加载直播流链接 https://g1.ipcamlive.com/player/player.php?alias=theotters&autoplay=1，但未能成功，使用的代码如下：

import 'package:flutter/material.dart';
import 'package:flutter_html/flutter_html.dart';

void main() {
  runApp(
    const MaterialApp(
      home: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          height: 300,
          width: 300,
          decoration: BoxDecoration(border: Border.all()),
          child: Html(
            data:
                '<iframe loading="eager" src=https://g1.ipcamlive.com/player/player.php?alias=theotters&autoplay=1"></iframe>',
          ),
        ),
      ),
    );
  }
}

解决方案 #

1. 修复HTML字符串的语法错误 #

你的iframe标签存在语法问题：src 属性没有用引号完整包裹，结尾多了一个冗余引号。修正后的HTML字符串应为：

'<iframe loading="eager" src="https://g1.ipcamlive.com/player/player.php?alias=theotters&autoplay=1"></iframe>'

2. 改用webview_flutter插件（更稳定的方案） #

flutter_html对iframe的支持有限，官方的webview_flutter是加载网页内容的更可靠选择：

步骤1：添加依赖

在pubspec.yaml中引入插件：

dependencies:
  webview_flutter: ^4.4.0 # 建议使用最新版本

步骤2：替换原有代码

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

void main() {
  runApp(
    const MaterialApp(
      home: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          height: 300,
          width: 300,
          decoration: BoxDecoration(border: Border.all()),
          child: WebViewWidget(
            controller: WebViewController()
              ..loadRequest(
                Uri.parse('https://g1.ipcamlive.com/player/player.php?alias=theotters&autoplay=1'),
              ),
          ),
        ),
      ),
    );
  }
}

3. 配置平台权限 #

• Android：在android/app/src/main/AndroidManifest.xml中添加网络权限：

  <uses-permission android:name="android.permission.INTERNET" />
  

• iOS：如果涉及HTTP请求（此链接为HTTPS可忽略，其他场景参考），在ios/Runner/Info.plist中添加：

  <key>NSAppTransportSecurity</key>
  <dict>
      <key>NSAllowsArbitraryLoads</key>
      <true/>
  </dict>
  

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