很久没有写 文章了,本文 给大家提供源码 参考 下载地址在 页尾
废话 不多说 直接 开始
本文主要讲解 如何 flutter中 使用 WebRTC 协议,实现 实时拉流播放
对于WebRTC 不太了解的 可以先去 了解一下 rtc协议, 基本概念就是 p2p 点对点传输 双方 交换SDP 信息,发送 offer 然后 接受者 应答 返回 信息
web的流媒体服务器 有很多, 开源比较火的有 media stream、srs kurento 流媒体服务器等 这里就不多说了
本案例采用的 是srs 流媒体服务 Docker | SRS
需要先 搭建流媒体服务器,我 这边用的ubuntu搭建,比较 方面 直接命令安装,windows用户可能 要先 配置 doker 环境, 搭建 srs的时候有很多坑, 建议不要 使用 https ,除非你的运维能力很强,不然很多配置 会把你绕晕。
搭建 完成后 可以 用ffmpege 进行推流
//RTMP 推流
ffmpeg -re -i time.flv -vcodec copy -acodec copy -f flv -y rtmp://192.168.13.129/live/livestream
拉流 可以直接在 自己 搭建的 srs 服务上进行观看,或者使用 android 设备 ios 进行拉流。 本文的 flutter 程序 主要 用来做拉流操作的
第一步 先导入
fijkplayer: ^0.10.1 //ijk 用来支持 rtmp 播放 flutter_webrtc: 0.9.3 //rtc 协议 dio: ^4.0.6 //网络框架
接下来 放出 webrtc 的 widegt
class WebRTCStreamingPlayer extends StatefulWidget { final String _url; const WebRTCStreamingPlayer(this._url, {Key? key}) : super(key: key); @override State<StatefulWidget> createState() => _WebRTCStreamingPlayerState(); } class _WebRTCStreamingPlayerState extends State<WebRTCStreamingPlayer> { final webrtc.RTCVideoRenderer _video = webrtc.RTCVideoRenderer(); final flutter_live.WebRTCPlayer _player = flutter_live.WebRTCPlayer(); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: const Text('WebRTC Streaming')), body: GestureDetector( child: Container( decoration: BoxDecoration(color: Colors.grey[500]), child: webrtc.RTCVideoView(_video))), ); } @override void initState() { super.initState(); _player.initState(); autoPlay(); } void autoPlay() async { await _video.initialize(); // Render stream when got remote stream. _player.onRemoteStream = (webrtc.MediaStream stream) { //使用 setState 设置 srcObject 并通知渲染. setState(() { _video.srcObject = stream; }); }; // 自动开始播放 WebRTC 流。 await _player.play(widget._url); } @override void dispose() { super.dispose(); _video.dispose(); _player.dispose(); }
下面是 核心 的 WebRTCPlayer 播放类
WebRTCUri 主要 用来 切割 请求 api地址 和 流媒体 地址
class WebRTCUri { ///WebRTC 流的 api 服务器 u