11月7日,即构和上海GDG技术社区联合举办了实时音视频技术云上技术分享专场,来自即构科技和Bilibili的资深技术专家进行了深度分享。大会吸引了500+开发人员交流、观看,并在活动过程中与分享嘉宾进行了热烈互动,下面我们将整理嘉宾们分享的核心内容,错过活动直播的小伙伴可以继续观看学习。

本文是即构科技李展鹏带来的主题为《Flutter实时音视频应用场景实践》的技术分享。以下为主要的分享内容:

大家好,我是来自即构科技的李展鹏,目前负责参与即构音视频平台SDK的建设工作。本人从内测版本开始接触Flutter,较早开始处理Flutter应用于音视频业务的场景,今天我将和大家一起交流一下Flutter在实时音视频场景下的应用实战。

一、Flutter系统架构

首先,给大家简单介绍一下 Flutter 的整体架构。大家可以看下面这张图:

 

图中绿色区域是基于 Dart 语言的framework层,包含两大类UI样式、控件、动画、手势等等,是Flutter开发者们直接对接的一层。

蓝色区域则为 Flutter 的引擎层,使用C++实现,这一层是Flutter实现跨平台的关键所在。核心模块主要包括与原生交互的Channel机制、 skia 图形渲染框架,还有Dart 虚拟机等等。

橙色区域主要是一些平台特定模块。就算 Flutter 拥有跨平台的特性,但底层还是离不开原生的支持。当某些特定功能无法直接使用 Flutter 实现时,那么开发者还可以通过编写原生插件的形式进行支持。即构在Flutter中实现音视频服务也是主要从这一层进行切入。

基于这张图,我们大概可以看出Flutter的一些优缺点。

优点

Flutter的优点是跨平台,拥有双端一致的体验,性能强大;基于自研引擎渲染,易于上手。Dart 语言当初用于对标 JS 语言,在设计上更靠近脚本语言风格,相比于原生语言来说更加容易入门。

缺点

Flutter 作为一个相对来说比较新兴的框架,相比于其他框架来说避免不了存在生态不完善的问题。不少功能还需要开发者自己造轮子,使用原生语言进行双端开发。

另外,Flutter 在 Github 上的 issue 相对较多,存在较多的已知bug。例如,在音视频场景下,视频渲染这块的优化问题相比原生还是稍微逊色一些,但是其实我们可以看到 Flutter 团队一直都在积极修复各种问题,我们相信未来在稳定性方面一定会越来越好。

二、Flutter 实时音视频快速接入

即构作为专业的音视频云服务商,我们很早就开始了对Flutter技术框架的研究,下面我们来介绍 Flutter 实时音视频的快速接入。即构SDK快速接入流程包括以下几点,初始化SDK、登录房间服务器、用户推送自己的本地音视频流,然后拉取远端的音视频流。

感兴趣的开发者可以扫码体验 Express Flutter SDK,里面会有比较详细的接入指南和示例demo。

 

我们看到,当我们需要使用即构Flutter SDK 的时候,需要在工程根目录下的配置文件里,添加 zego_engine_engine 的依赖声明,然后通过运行 flutter pub get 的命令,即可从远端pub仓库把SDK下载下来。

在图示的代码里,我们可以看到使用即构 Flutter SDK进行快速接入主要包括以下几步。

第一步,初始化SDK,这个步骤先要从即构官网上申请唯一专属的App ID 和App sign。

第二步,登录房间。

第三步,推送本地音视频流。在推流前如果需要对视频流进行本地预览,那么还需要使用即构 SDK 基于 Flutter 提供的外接纹理模块封装好的接口,创建一个视频纹理渲染对象,获取一个 textureID。

拿到 textureID 后,通过使用 Flutter 提供的 Texture 控件,即可进行本地播放。

在这里,Flutter 对音视频场景提供了两种视频渲染方案,分别是 Texture 和 Platform View。即构同时提供两种渲染方案的接口,但基于兼容性和稳定性考虑,我们更推荐开发者使用 Texture 方案。

然后,拉流的步骤和推流类似,在这里不重复赘述。

到这里,开发者就可以实现简单的实时音视频场景了。

三、Flutter自定义视频采集方案

视频采集是整条实时音视频链路中的起点。即构SDK内置了对摄像头的视频采集,可以直接将采集到的数据进行编码推流。

但若开发者需要在采集环节进行一些定制化操作,如,采集完摄像头原始数据后还需要对接第三方的美颜前处理;或者应用场景中有多种不同的输入源,如屏幕分享、播放一段视频推流等,那么就需要使用到自定义视频采集功能。

下图是Native 框架下自定义视频采集的实现框架:

 

那么,Flutter框架下是否可以沿用相同的方案呢?

篇幅原因,Flutter实时音视频应用场景实践分享的后半部分:Flutter自定义视频采集方案以及Flutter的屏幕分享实战内容,大家可以通过活动资料包查看,资料包中还包括嘉宾的演讲PPT以及视频回放,扫描下方二维码即可获取活动资料包: