Flutter通过HTTP实现摄像头直播流无法播放，请求排查问题

代码中的核心问题 #

• 初始化逻辑位置错误：didChangeDependencies会在组件依赖变化时多次触发（比如屏幕旋转、父组件更新），在这里重复调用_controller.initialize()会导致控制器重复初始化，引发异常。
• 无错误捕获机制：初始化和播放过程中没有处理异常，无法定位具体失败原因（比如网络不通、视频格式不支持、认证失败）。
• 未释放资源：没有重写dispose方法释放视频控制器，会造成内存泄漏，也可能影响后续播放操作。
• 播放逻辑不严谨：初始化完成后直接调用play()，未判断控制器是否真的初始化成功，也未处理播放失败的情况。
• Basic Auth兼容性问题：部分摄像头不支持URL中直接嵌入用户名密码的认证方式，需要手动添加请求头。

修复后的代码 #

void main() => runApp(const MyApp9999());

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: CameraScreen(),
    );
  }
}

class CameraScreen extends StatefulWidget {
  const CameraScreen({super.key});

  @override
  _CameraScreenState createState() => _CameraScreenState();
}

class _CameraScreenState extends State<CameraScreen> {
  late VideoPlayerController _controller;
  bool _isInitialized = false;
  final String cameraAddress = 'kbplawyer.cameraddns.net';
  final String port = '8010';
  final String username = 'admin';
  final String password = '1qazxsw2';

  @override
  void initState() {
    super.initState();
    _initVideoController();
  }

  void _initVideoController() async {
    String videoUrl = 'http://$cameraAddress:$port/stream';
    Uri uri = Uri.parse(videoUrl);

    // 手动添加Basic Auth请求头，解决多数不兼容URL认证的摄像头
    String auth = 'Basic ${base64Encode(utf8.encode('$username:$password'))}';
    _controller = VideoPlayerController.networkUrl(
      uri,
      videoPlayerOptions: const VideoPlayerOptions(mixWithOthers: true),
      httpHeaders: {'Authorization': auth},
    );

    try {
      await _controller.initialize();
      setState(() {
        _isInitialized = true;
      });
      await _controller.play();
    } catch (e) {
      // 打印错误信息，方便排查具体问题
      debugPrint('视频初始化/播放失败：$e');
    }
  }

  @override
  void dispose() {
    // 释放控制器资源，避免内存泄漏
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('摄像头直播')),
      body: Center(
        child: _isInitialized
            ? AspectRatio(
                aspectRatio: _controller.value.aspectRatio,
                child: VideoPlayer(_controller),
              )
            : const CircularProgressIndicator(), // 显示加载状态
      ),
    );
  }
}

额外排查点 #

• 确认摄像头的直播流路径/stream是否正确，部分摄像头的流地址可能是/video、/live或带参数的格式。
• 先用浏览器或VLC播放器测试摄像头流地址是否能正常播放，排除摄像头本身或网络链路问题。
• 检查项目权限配置：Android需在AndroidManifest.xml中添加<uses-permission android:name="android.permission.INTERNET"/>；iOS需在Info.plist中配置NSAppTransportSecurity以允许HTTP请求（默认iOS禁止非HTTPS请求）。

内容的提问来源于stack exchange，提问作者Phạm Ngọc