【活动回顾】Flutter 实时音视频应用场景实践

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

本文是即构科技李展鹏带来的主题为《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 以及视频回放，扫描下方二维码即可获取活动资料包：