如何在 Flutter WEB 中实现 RTSP 流播放

首先明确核心限制：所有Web浏览器原生都不支持RTSP协议的直接解码播放，这是浏览器底层的能力限制，Flutter Web框架本身也无法突破该限制，所有可行方案都需要绕开直接在Web侧播放RTSP源的逻辑。

落地可选方案 #

• 方案1：服务端转流中转（推荐） #

  这是生产环境最常用的落地方式，只需要在服务侧通过开源转流工具，将IP摄像头输出的RTSP流实时转换为Web端支持的流协议即可：

  • 对实时性要求高的监控场景：转成WebRTC协议，延迟可以控制在500ms以内
  • 对兼容性要求高、实时性要求低的场景：转成HLS协议，所有主流浏览器都可以直接播放，延迟约3~10秒
    Flutter Web侧直接调用video_player等通用播放组件就可以实现转流后地址的播放，参考代码示例：

  import 'package:video_player/video_player.dart';
  import 'package:flutter/material.dart';
  
  class RtspPlayPage extends StatefulWidget {
    final String playUrl; // 转流后的WebRTC/HLS地址
    const RtspPlayPage({super.key, required this.playUrl});
  
    @override
    State<RtspPlayPage> createState() => _RtspPlayPageState();
  }
  
  class _RtspPlayPageState extends State<RtspPlayPage> {
    late VideoPlayerController _controller;
  
    @override
    void initState() {
      super.initState();
      _controller = VideoPlayerController.networkUrl(Uri.parse(widget.playUrl))
        ..initialize().then((_) {
          setState(() {});
          _controller.play();
        });
    }
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        body: Center(
          child: _controller.value.isInitialized
              ? AspectRatio(
                  aspectRatio: _controller.value.aspectRatio,
                  child: VideoPlayer(_controller),
                )
              : const CircularProgressIndicator(),
        ),
      );
    }
  
    @override
    void dispose() {
      _controller.dispose();
      super.dispose();
    }
  }
  

• 方案2：WASM软解码 #

  可以将FFmpeg编译为WASM模块引入Flutter Web项目，在前端侧直接拉取RTSP流做软解码渲染，该方案不需要额外的服务端转流资源，但是缺陷也很明显：

  • 对客户端设备性能要求高，低配置设备播放时容易出现卡顿、设备发热的问题
  • 开发成本更高，需要自行处理流拉取、解码、渲染的全链路逻辑
  • 需要处理RTSP流的跨域访问限制，一般需要配置同域名代理拉流

注意：如果你的业务需要支持多路摄像头同时播放，优先选择服务端转流方案，前端WASM解码的性能不足以支撑多路同时播放的场景。

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