写点什么

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

用户头像
ZEGO即构
关注
发布于: 2020 年 11 月 12 日
【活动回顾】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 以及视频回放,扫描下方二维码即可获取活动资料包:


发布于: 2020 年 11 月 12 日阅读数: 55
用户头像

ZEGO即构

关注

专注音视频领域19年 2020.04.15 加入

全球领先的音视频云服务商,已为映客、酷狗、喜马拉雅、荔枝、好未来、作业帮、掌门一对一、Live.Me、UpLive、Mico、平安科技等众多行业头部企业提供音视频云服务。

评论

发布
暂无评论
【活动回顾】Flutter实时音视频应用场景实践