最佳实践丨Flutter音视频开发实践

腾讯即时通信IM

发布于 2021-04-23 17:40:36

1.8K0

发布于 2021-04-23 17:40:36

Flutter基础介绍

Flutter简介

Flutter 是 Google 开源的 UI 工具包，帮助开发者通过一套代码库高效构建多平台应用，支持Android、IOS、Web、Linux app。 Flutter 支持毫秒级的热重载，并提供了富有表现力和灵活的 UI，可达到原生一样的性能。

Flutter 与 React Native 设计对比

相比于 RN 转换原生控件,Flutter 则编译为原生代码. Flutter 控制屏幕上的每个像素,这避免了由于需要 JavaScript 桥接而导致的性能问题。

Flutter框架

Framework：是一个 Dart 实现的 UI SDK，从上到下包括了两大组件库、基础组件库、图形绘制、手势识别、动画等功能。 Engine：实现 Flutter 渲染引擎、文字排版、事件处理等功能。 Embedder：操作系统适配层，实现渲染 Surface 设置、线程设置等。

Flutter 音视频 SDK 封装

上面简单介绍了一下 Flutter，音视频通信就要借助 RTC 的能力了。我们 Flutter SDK 是基于腾讯云 iOS/Android 平台的 TRTC SDK 进行封装的。

先来看下 Flutter SDK 的整体设计，Flutter SDK 的类文件和接口名基本是跟 Native SDK 保持一致的。

Flutter视频渲染

在 Native 平台都有系统组件来渲染视频，但 Flutter 没有这样的东西，该如何渲染视频呢？

我们再看一下 Native 定义的开始渲染视频视频的 API，这里需要传递一个 TXCloudVideoView 的对象。

视频渲染方案

这里 Flutter 提供了两个方案 PlatformView ：是 Flutter 官方提供的一个可以嵌入 Android 和 iOS 平台原生 View 的 widget。主要适用于 Flutter 中不太容易实现的widget（Native中已经很成熟，并且很有优势的View），如 WebView、视频播放器、地图等。

主要实现思路是先利用 PlatformView 构建了创建 Native View 的通道：

然后构建了向 Native View 传递方法的通道（如开始音视频渲染、停止音视频渲染）

外接纹理 Texture：外接纹理 Texture 是可以将Native 纹理共享给 Flutter 进行渲染。需要自己开发音视频采集和渲染。

PlatformView 底层用的也是纹理 Texture，它中间多了一层VirtualDisPlay，它会将TXCloudVideoView 的每个像素流经附加的中间图形缓冲区然后输出到 Surface，这会浪费显存和绘图性能。所以我们的优化方案就是将视频帧数据直接输出到 Surface。

优化后的架构如下：

视频View设计

选择好方案后，我们开始对视频view进行设计。

纯Widget设计

封装 PlatformView 将其设计成一个视频渲染的Widget，把开始视频渲染封装到 SDK 内部，创建即渲染，不好的地方是视频渲染是一个单独的Widget 类，但是停止视频渲染在主类文件方法中。有点儿不伦不类。调用示例：

面向对象设计

这里也是设计一个视频渲染的TRTCCloudVideoView Widget，但是把startLocalPreview-开始本地视频渲染和stopLocalPreview-停止本地视频渲染放到TRTCCloudVideoView view创建后的回调里面。回调了一个viewController的对象，提供了开始、停止方法。调用示例：

函数式设计

这种设计方案TRTCCloudVideoView只是提供一个Native view的承载器。具体的开始停止过程放在主函数文件去调用。TRTCCloudVideoView会回调一个viewId, 通过viewId来调用startLocalPreview开始视频渲染方法渲染具体的view。创建即渲染=>手动调用 function 来触发渲染。