搭建低成本直播平台技术教程(一)前端技术选型_Flutter
之前的几篇教程讲了直播整个宏观的架构搭建和一些相关Feed流以及推荐算法的基础概念,现在我们开始带大家了解如何去打造自己的低成本直播平台。首先我们是做源码搭建的,但这一系列教程和广告无关,我们是为了后续的一些平台型服务,做一些技术储备和介绍,也希望能帮助到大家对于技术选型或者了解一些直播场景下的技术内容。
现在市面上大多做搭建的,移动端安卓、iOS都是基于源生方法,比如安卓基于JAVA或者Kotlin,iOS基于OC或者Swift,后台基于PHP或者JAVA居多,既然说了低成本,那么首先从前端技术选型咱们就开始本着多快好省的原则来挑选技术。
我们前端肯定是要挑选跨平台技术的,一套代码完成安卓和iOS两个端开发,现在有一些公司采用uni-app技术,不能说uni-app不好,也有优点,比如上手快,uniapp的写法就是vue的写法,调试打包,配置也都简单明了。但是说到底也就类似h5,内容复杂了,比较卡。我们打算采用Flutter为基础框架,进行跨平台开发,这样可以在UI上面进行跨平台构建高质量原生用户界面。
什么是Flutter

Flutter 由 Google 的工程师团队打造,用于创建高性能、跨平台的移动应用。Flutter 针对当下以及未来的移动设备进行优化,专注于 Android and iOS 低延迟的输入和高帧率。
Flutter 可以给开发者提供简单、高效的方式来构建和部署跨平台、高性能移动应用;给用户提供漂亮、快速、jitter-free 的 app 体验。
简单来说Flutter是Google一个新的用于构建跨平台的手机App的SDK。写一份代码,在Android 和iOS平台上都可以运行。
Flutter的现状和优势
这里有一组有趣的统计数据分享给大家:
- 60%的 Flutter 开发人员使用 Windows 开发,27%的开发人员使用 macOS,13%的人员使用 Linux。
- 有 35%的开发人员为初创公司工作,26%的开发者为企业开发人员,19%则是个体经营者,还有 7%的用户为设计机构工作。
- 78%的 Flutter 开发人员使用稳定版渠道,11%的用户使用 beta 版,11%的用户使用 dev 或 master 版。
- Flutter 使用量排名前五的地区分别是印度、中国、美国、欧盟和巴西。
- 谷歌 Play 商店中大约发布了 50,000 个 Flutter 应用,仅在上个月就上传了 10,000 个。
- Flutter 应用中最流行的框架包有 http、shared_preferences、intl、meta、path_provider 和 pedantic。
目前采用Flutter开发的公司也会比较多的,国内以阿里等一线大厂为代表,一直致力于推广Flutter在国内互联网公司的应用。
Flutter的优点非常明显,如果你选择一个跨平台框架,与众多基于html的跨平台框架相比,Flutter绝对是体验最好,性能与构建思路几乎最接近原生开发的框架。
- 快速
Flutter 的 UI 渲染性能很好。在生产环境下,Flutter 将代码编译成机器码执行,并充分利用 GPU 的图形加速能力,因此使用 Flutter 开发的移动应用即使在低配手机上也能实现每秒 60 帧的 UI 渲染速度。
- 支持UI动画设计
Flutter的UI动画简单到不可思议,动画对象会根据屏幕刷新率每秒产生很多个(一般是60个)浮点数,只需要将一个组件属性通过补间(Tween)关联到动画对象上,Flutter会确保在每一帧渲染正确的组件,从而形成连贯的动画。这种十分暴力的操作在Flutter上却看不到明显的卡顿。相比之下其他跨平台框架几乎不能设计动画,往往会遭遇非常严重的性能问题。
- UI高稳定性
UI跨平台的稳定性,在于Google直接在两个平台上在底层重写了UIKit,不依赖于CSS等外部解释器,几乎不存在UI表达不理想,渲染不正常的情况,可以获得非常稳定的UI表达效果。CSS换个浏览器就有不同的表现,基于CSS的跨平台框架很难获得稳定的UI表现。
Flutter中如何实现直播
Flutter中实现直播的话,我们可以使用第三方插件flutter_ijkplayer来实现。
我们目前使用推流工具,可以为金山云的免费推拉流SDK,可以推到别家的地址上,也可以使用其他目前比较主流的推拉流SDK,比如腾讯云等。

有关推拉流和直播大框架的细节,可以去翻一下之前的文章。
利用flutter实现简单直播推拉流示例代码如下:
1、安装依赖
dependencies:
flutter_ijkplayer: ^0.3.5+1
2、引入插件
import 'package:flutter_ijkplayer/flutter_ijkplayer.dart';
3、实例化IjkMediaController
IjkMediaController controller = IjkMediaController();
4、设置拉流地址
@override
void initState() {
super.initState();
this.initPlayer();
}
initPlayer() async{
await controller.setNetworkDataSource(
'http://192.168.0.11:8000/live/itying.flv',
autoPlay: false);
print("set data source success");
}
5、定义视频播放组件
Widget buildIjkPlayer() {
return Container(
height: 200, // 设置高度
child: IjkPlayer(
mediaController: controller
),
);
}
6、销毁
@override
void dispose() {
controller.dispose();
super.dispose();
}
总结
Flutter作为直播搭建,进行前端开发,属于比较有优势的技术框架,能够在提供优质用户体验的情况下,实现跨平台,节约一定的时间和成本。并且对于互联网公司开发趋势而言,跨平台性势必会成为一个首选和主流。下一阶段我们将从后台技术选型来讲述我们的后台框架,之后也会回过头从前端开始详细剖析代码进行讲解,欢迎大家提出宝贵意见和讨论。