flutter纹理,flutter 水波纹

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

Flutter浪潮下的音视频研发探索

文/陈炉军

整理/LiveVideoStack

大家好，我是阿里巴巴闲鱼事业部的陈炉军，本次分享的主题是Flutter浪潮下的音视频研发探索，主要内容是针对闲鱼APP在当下流行的跨平台框架Flutter的大规模实践，介绍其在音视频领域碰到的一些困难以及解决方案。

分享内容主要分为四个方面，首先会对Flutter有一个简单介绍以及选择Flutter作为跨平台框架的原因，其次会介绍Flutter中与音视频关系非常大的外接纹理概念，以及对它做出的一些优化。之后会对闲鱼在音视频实践过程中碰到的一些Flutter问题提出了一些解决方案——TPM音视频框架。最后是闲鱼Flutter多媒体开源组件的介绍。

Flutter

Flutter是一个跨平台框架，以往的做法是将音频、视频和网络这些模块都下沉到C++层或者ARM层，在其上封装成一个音视频的SDK，供UI层的PC、iOS和Android调用。

而Flutter做为一个UI层的跨平台框架，顾名思义就是在UI层也实现了一个跨平台开发。可以预想的是未Flutter发展的好的话，会逐渐变为一个从底层到UI层的一个全链路的跨平台开发，技术人员分别负责SDK和UI层的开发。

在Flutter之前已经有很多跨平台UI解决方案，那为什么选择Flutter呢？

我们主要考虑性能和跨平台的能力。

以往的跨平台方案比如Weex，ReactNative，Cordova等等因为架构的原因无法满足性能要求，尤其是在音视频这种性能要求几乎苛刻的场景。

而诸如Xamarin等，虽然性能可以和原生App一致，但是大部分逻辑还是需要分平台实现。

我们可以看一下，为什么Flutter可以实现高性能：

原生的native组件渲染以IOS为例，苹果的UIKit通过调用平台自己的绘制框架QuaztCore来实现UI的绘制，图形绘制也是调用底层的API,比如OpenGL、Metal等。

而Flutter也是和原生API逻辑一致，也是通过调用底层的绘制框架层SKIA实现UI层。这样相当于Flutter他自己实现了一套UI框架，提供了一种性能超越原生API的跨平台可能性。

但是我们说一个框架最终性能怎样，其实取决于设计者和开发者。至于现在到底是一个什么状况：

在闲鱼的实践中，我们发现在正常的开发没有特意的去优化UI代码的情况下，在一些低端机上，Flutter界面的流畅性是比Native界面要好的。

虽然现在闲鱼某些场景下会有卡顿闪退等情况，但是这是一个新事物发展过程中的必然问题，我们相信未来性能肯定不会成为限制Flutter发展的瓶颈的。

在闲鱼实践Flutter的过程中，混合栈和音视频是其中比较难解决的两个问题，混合栈是指一个APP在Flutter过程中不可能一口气将所有业务全部重写为Flutter，所以这是一个逐步迭代的过程，这期间原生native界面与Flutter界面共存的状态就称之为混合栈。闲鱼在混合栈上也有一些比较好的输出，例如FlutterBoost。

外接纹理

在讲音视频之前需要简要介绍一下外接纹理的概念，我们将它称之为是Flutter和Frame之间的桥梁。

Flutter渲染一帧屏幕数据首先要做的是，GPU发出的VC信号在Flutter的UI线程，通过AOT编译的机器码结合当前Dart Runtime，生成Layer Tree UI树，Layer Tree上每一个叶子节点都代表了当前屏幕上所需要渲染的每一个元素，包含了这些元素渲染所需要的内容。将Layer Tree抛给GPU线程，在GPU线程内调用Skia去完成整个UI的渲染过程。Layer Tree中有PictureLayer和TextureLayer两个比较重要的节点。PictureLayer主要负责屏幕图片的渲染，Flutter内部实现了一套图片解码逻辑，在IO线程将图片读取或者从网络上拉取之后，通过解码能够在IO线程上加载出纹理，交给GPU线程将图片渲染到屏幕上。但是由于音视频场景下系统API太过繁多，业务场景过于复杂。Flutter没有一套逻辑去实现跨平台的音视频组件，所以说Flutter提出了一种让第三方开发者来实现音视频组件的方式，而这些音视频组件的视频渲染出口，就是TextureLayer。

在整个Layer Tree渲染的过程中，TextureLayer的数据纹理需要由外部第三方开发者来指定，可以把视频数据和播放器数据送到TextureLayer里，由Flutter将这些数据渲染出来。

TextureLayer渲染过程：首先判断Layer是否已经初始化，如果没有就创建一个Texture，然后将Texture Attach到一个SufaceTexture上。

这个SufaceTexture是音视频的native代码可以获取到的对象，通过这个对象创建的Suface，我们可以将视频数据、摄像头数据解码放到Suface中，然后Flutter端通过监听SufaceTexture的数据更新就可以顺利把刚才创建的数据更新到它的纹理中，然后再将纹理交给SKIA渲染到屏幕上。

然而我们如果需要用Flutter实现美颜，滤镜，人脸贴图等等功能，就需要将视频数据读取出来，更新到纹理中，再将GPU纹理经过美颜滤镜处理后生成一个处理后的纹理。按Flutter提供的现有能力，必须先将纹理中的数据从GPU读出到CPU中，生成Bitmap后再写入Surface中，这样在Flutter中才能顺利的更新到视频数据，这样做对系统性能的消耗很大。

通过对Flutter渲染过程分析，我们知道Flutter底层需要渲染的数据就是GPU纹理，而我们经过美颜滤镜处理完成以后的结果也是GPU纹理，如果可以将它直接交给Flutter渲染，那就可以避免GPU-CPU-GPU这样的无用循环。这样的方法是可行的，但是需要一个条件，就是OpenGL上下文共享。

OpenGL

在说上下文之前，得提到一个和上线文息息相关的概念：线程。

Flutter引擎启动后会启动四个线程：

第一个线程是UI线程，这是Flutter自己定义的UI线程，主要负责GPU发出的VSync信号时候用当前Dart编译的机器码和当前运行环境创建出Layer Tree。

还有就是IO线程和GPU线程。和大部分OpenGL处理解决方案中一样，Flutter也采取一个线程责资源加载，一部分负责资源渲染这种思路。

两个线程之间纹理共享有两种方式。一种是EGLImage(IOS是 CVOpenGLESTextureCache)。一种是OpenGL Share Context。Flutter通过Share Context来实现纹理共享，将IO线程的Context和GPU线程的Context进行Share，放到同一个Share Group下面，这样两个线程下资源是互相可见可以共享的。

Platform线程是主线程，Flutter中有一个很奇怪的设定，GPU线程和主线程共用一个Context。并且在主线程也有很多OpenGL 操作。

这样的设计会给音视频开发带来很多问题，后面会详细说。

音视频端美颜处理完成的OpenGL纹理能够让Flutter直接使用的条件就是Flutter的上下文需要和平台音视频相关的OpenGL上下文处在一个Share Group下面。

由于Flutter主线程的Context就是GPU的Context，所以在音视频端主线程中有一些OpenGL操作的话，很有可能使Flutter整个OpenGL被破坏掉。所以需要将所有的OpenGL操作都限制在子线程中。

通过上述这两个条件的处理，我们就可以在没有增加GPU消耗的前提下实现美颜和滤镜等等功能。

TPM

在经过demo验证之后，我们将这个方案应用到闲鱼音视频组件中，但改造过程中发现了一些问题。

上图是摄像头采集数据转换为纹理的一段代码，其中有两个操作：首先是切进程，将后面的OpenGL操作都切到cameraQueue中。然后是设置一次上下文。然后这种限制条件或者说是潜规则往往在开发过程中容易被忽略的。而这个条件一旦忽略后果就是出现一些莫名其妙的诡异问题极难排查。因此我们就希望能抽象出一套框架，由框架本身实现线程的切换、上下文和模块生命周期等的管理，开发者接入框架以后只需要安心实现自己的算法，而不需要关心这些潜规则还有其他一些重复的逻辑操作。

在引入Flutter之前闲鱼的音视频架构与大部分音视频逻辑一样采用分层架构：

1：底层是一些独立模块

2：SDK层是对底层模块的封装

3：最上层是UI层。

引入Flutter之后，通过分析各个模块的使用场景，我们可以得出一个假设或者说是抽象：音视频应用在终端上可以归纳为视频帧解码之后视频数据帧在各个模块之间流动的过程，基于这种假设去做Flutter音视频框架的抽象。

咸鱼Flutter多媒体开源组件

整个Flutter音视频框架抽象分为管线和数据的抽象、模块的抽象、线程统一管理和上下文同一管理四部分。

管线，其实就是视频帧流动的管道。数据，音视频中涉及到的数据包括纹理、Bit Map以及时间戳等。结合现有的应用场景我们定义了管线流通数据以Texture为主数据，同时可以选择性的添加Bit Map等作为辅助数据。这样的数据定义方式，避免重复的创建和销毁纹理带来的性能开销以及多线程访问纹理带来的一些问题。也满足一些特殊模块对特殊数据的需求。同时也设计了纹理池来管理管线中的纹理数据。

模块：如果把管线和数据比喻成血管和血液，那框架音视频的场景就可以比喻成器官，我们根据模块所在管线的位置抽象出采集、处理和输出三个基类。这三个基类里实现了刚才说的线程切换，上下文切换，格式转换等等共同逻辑，各个功能模块通过集成自这些基类，可以避免很多重复劳动。

线程：每一个模块初始化的时候，初始化函数就会去线程管理的模块去获取自己的线程，线程管理模块可以决定给初始化函数分配新的线程或者已经分配过其他模块的线程。

这样有三个好处：

一是可以根据需要去决定一个线程可以挂载多少模块，做到线程间的负载均衡。第二，多线程并发式能够保证模块内的OpenGL操作是在当前线程内而不会跑到主线程去，彻底避免Flutter的OpenGL 环境被破坏。第三，多线程并行可以充分利用CPU多核架构，提升处理速度。

从Flutter端修改Flutter引擎将Context取出后，根据Context创建上下文的统一管理模块，每一个模块在初始化的时候会获取它的线程，获取之后会调用上下文管理模块获取自己的上下文。这样可以保证每一个模块的上下文都是与Flutter的上下文进行Share的，每个模块之间资源都是共享可见的，Flutter和音视频native之间也是互相共享可见的。

基于上述框架如果要实现一个简单的场景，比如画面实时预览和滤镜处理功能，

1：需要选择功能模块，功能模块包括摄像头模块、滤镜处理模块和Flutter画面渲染模块，

2：需要配置模块参数，比如采集分辨率、滤镜参数和前后摄像头设置等，

3：在创建视频管线后使用已配置的参数创建模块

4：最后管线搭载模块，开启管线就可以实现这样简单的功能。

上图为整个功能实现的代码和结构图。

结合上述音视频框架，闲鱼实现了Flutter多媒体开源组件。

组要包含四个基本组件分别是：

1：视频图像拍摄组件

2：播放器组件

3：视频图像编辑组件

4：相册选择组件

现在这些组件正在走内部开源流程。预计9月份，相册和播放器会实现开源。

后续展望和规划

1：实现开头所说的从底层SDK到UI的全链路的跨端开发。目前底层框架层和模块层都是各个平台各自实现，反而是Flutter的UI端进行了跨平台的统一，所以后续会将底层也按照音视频常用做法把逻辑下沉到C++层，尽可能的实现全链路跨平台。

2：第二部分内容为开源共建，闲鱼开源的内容不仅包括拍摄、编辑组件，还包括了很多底层模块，希望有开发者在基于Flutter开发音视频应用时可以充分利用闲鱼开源出的音视频模块能力，搭建APP框架，开发者只要去负责实现特殊需求模块就可以，尽可能的减少重复劳动。

相关问答

Q1: Flutter Android外接纹理实现图片共享

Android 利用surface实现Flutter外接纹理

①Java层FlutterRenderer创建SurfaceTexture和textureId。

②将surfaceTexture和textureId通过JNI向引擎层注册

③向引擎注册过程中通过层层方法最后在texture.cc的TextureRegistry由map以键值对形式缓存实例对象。

④将需要显示图片在SurfaceTexture上离屏渲染。

⑤Java层创建的textureId通过Channel传递到Dart层作为Texture组件入参。

⑥Dart的Texture组件接收textureId入参后向下层组件实例化。

⑦在SceneBuilder调用addTexture时执行引擎层创建TextureLayer。

⑧最终在texture.cc中TextureRegistry的map根据TextureId获取SurfaceTexture实例。

使用Native(以Android为例)播放器构建Flutter播放插件

iOS 实现Flutter外接纹理

Q2: SurfaceTexture详解

之前讲到了 flutter的Texture

SurfaceTexture 是 Surface 和 OpenGL ES (GLES) 纹理的组合。SurfaceTexture 用于提供输出到 GLES 纹理的 Surface

SurfaceTexture 包含一个 BufferQueue。当生产方将新的缓冲区排入队列时，onFrameAvailable() 回调会通知应用。然后，应用调用 updateTexImage()，这会释放先前占有的缓冲区，从队列中获取新缓冲区并执行 EGL 调用，从而使 GLES 可将此缓冲区作为外部纹理使用。

关键方法：

SurfaceTexture(int texName, boolean singleBufferMode)构造方法

setOnFrameAvailableListener 设置回调，当生产者准备好新的帧后会调用Listener

updateTexImage 更新texture到指定的GLESContext

detachFromGLContext

attachToGLContext

解绑/绑定当前GLContext

getTransformMatrix 设置重采样纹理矩阵，当渲染的时候会用到这个数据

release() 完全释放 SufaceTexture的 buffers并且吧Surface状态置为abandoned

android-8.0.0_r1 源码解析：

GLConsumer参数解释：

bq是BufferQueue创建BufferConsumer

tex 表示要将图像流传输到的OpenGL ES纹理名称。

texTarget指定了哪个纹理将被绑定

useFenceSync表示是否需要同步访问缓冲区

可以从一个OpenGL ES上下文中分离GLConsumer，然后分别使用detachFromContext和attachToContext方法将GLConsumer附加到另一个上下文。

如果设置tex参数则会通过attachToContext将GLConsumer附加到OpenGL ES context中。

第一次调用updateTexImage才会绑定，之后所有对updateTexImage的调用必须使用相同的当前OpenGL ES context进行

acquireBufferLocked创建EglImage并设置到EglSlots中

updateAndReleaseLocked 更新 EglImage

createIfNeeded 如果EGLDisplay改变或者crop改变则会创建EglImage

bindToTextureTarget 将调用glEGLImageTargetTexture2DOES去绑定image到指定的目标纹理

这里创建EGLImageKHR，EGLImageKHR用于共享EGL资源

EGL的ShareContext是常见的共享上下文的方式（iOS平台的EAGL叫ShareGroup）。

当share_context参数传入另一个EGL的context时，这两个EGLContext就可以共享纹理以及VBO等。

需要注意的是container objects不能被共享，比如：

Framebuffer objects

Vertex array objects

Transform feedback objects

Program pipeline objects

参考：

EGLImageKHR:

Q3: c++很基础的问题自定义类的导入

有两种方法： 1你先新建一个记事本，把头文件的代码复制进去，然后保存为

CCTerrain.h 然后复制到你的程序目录下，或者VC的安装目录下就可以了。

2 把头文件和工程放在同一个CPP文件里。

Q4: iOS开发之初识OpenGL

既然有了 Metal 我们是否还有学习 OpenGL ES 的必要呢.我个人认为暂时还是有必要的.OpenGL /OpenGL ES/ Metal 在任何项目中解决问题的本质就是利用GPU芯片来⾼效渲染图形图像.所以它们底层的原理相近,首先了解OpenGL之后再去了解Metal会更加容易, 其二OpenGL是跨平台的框架.保不齐以后会在其他的地方用到,所谓技多不压身.毕竟不可能保证一直都做苹果开发吧.

理论枯燥且乏味, 但是我们联想一下flutter开发中用到的context, iOS开发中CoreGraphics里也有用到context. 是不是此时心中就有了一定的答案.我个人理解其设计模式大同小异. 顾名思义我们能够通过context拿到很多必要的状态和数据.

比如需要显示一个正方形, 则需要两个正等边三角形图元来完成

为了读取效率起见, 提前分配一块显存, 将顶点数组存放在显存中. 这部分显存就叫做顶点缓冲区

OpenGL渲染的过程中会经历很多节点. 这些节点串起来就是管线.

常见的着⾊器主要有: 顶点着⾊器(VertexShader) , ⽚段着⾊器(FragmentShader) , 几何着⾊(GeometryShader) , 曲⾯细分着⾊器(TessellationShader)

OpenGL ES 中只⽀持顶点着⾊器和片段着⾊器 .

光栅化就是把顶点数据转换为片元的过程。片元中的每一个元素对应于帧缓冲区中的一个像素。

如果把渲染比作是画画, 那么顶点着色器操作相当与确定画的内容的框架. 而之后往框架里填充内容的过程就是光栅化.

填充好内容之后就是片元着色器操作像素点填充颜色等操作

这里附上一张流程图:

纹理可以理解为图⽚。在渲染图形时需要在顶点围成的区域中填充图⽚，使得场景更加逼真。⽽这⾥使⽤的图⽚，就是常说的纹理。只是在OpenGL，我们更加习惯叫纹理，⽽不是图⽚。

Q5: 程序员的开源月刊《HelloGitHub》第 68 期

HelloGitHub 分享 GitHub 上有趣、入门级的开源项目。

这里有实战项目、入门教程、黑科技、开源书籍、大厂开源项目等，涵盖多种编程语言 Python、Java、Go、C/C++、Swift...让你在短时间内感受到开源的魅力，对编程产生兴趣！

1、 toybox ：该项目将 200 多个常用的 Linux 命令行工具，做成一个可执行文件。从而可以让 Android 这种原本不支持 Linux 命令的系统，也得以用上 ls、find、ps 等命令。还可以用于快速构建最小的 Linux 环境

2、 the_silver_searcher ：比 ack 更快的命令行搜索工具。速度快、功能强大、使用简单，支持 Linux、Windows、macOS 操作系统，还能够整合进 Vim 和 Emacs 等编辑器

3、 WindTerm ：支持 SSH/Telnet/Serial/Shell/Sftp 的终端工具。虽然该软件完全免费，但部分代码尚未完全开源，对安全敏感的同学可以再观望下

4、 wavefunctioncollapse ：基于波函数坍缩 (WFC) 算法，实现的无限城市示例。城市里有房子、楼梯、树木、连接房屋的通道，你可以在城市中自由移动、跳跃、飞行，但不论你怎么移动都找不到尽头，因为这座城市会无限延伸

5、 NETworkManager ：管理和解决网络问题的工具。它集成了 IP 和端口扫描、WiFi 分析器、跟踪路由、DNS 查询等工具

6、 ppsspp ：能够运行在 Android 和 PC 上的开源 PSP 模拟器

7、 leocad ：用来创建虚拟乐高模型的 CAD 工具。适用于 Windows、Linux 和 macOS 系统

8、 csshake ：用 CSS 实现抖动效果

9、 MangoDB ：真正开源的 MongoDB 替代品。它底层采用 PostgreSQL 作为存储引擎，用 Go 语言实现了 MongoDB 协议，所以几乎兼容所有的 MongoDB 库，迁移起来毫无负担。如果你用不到 MongoDB 的高级功能，还受限于它的开源协议，那么这个项目可作为 MongoDB 的开源替代方案。它才刚刚起步，建议观望一段时间或做足测试再用于生产环境

10、 caddy ：用 Go 编写的轻量级 Web 服务器。它相较于 Apache、Nginx 这些知名 Web 服务器，独特点在于提供了编译好的可执行文件，实现了真正的开箱即用。无需任何配置即可拥有免费的 HTTPS、自动把 Markdown 文件转化成 HTML 等人性化的功能。如果是搭建中小型的 Web 服务，它完全够用而且省时省心

11、 croc ：可以让任意两台计算机，安全方便地传输文件和文件夹的工具。轻松实现端到端加密的跨平台文件传输，还支持多文件传输、传输中断和恢复等功能

12、 jnativehook ：获取键盘和鼠标事件的 Java 库。轻松监听按键、鼠标移动、点击等事件

13、 spider-flow ：用流程图的方式编写爬虫的平台。无需写代码就可以快速完成一个简单的爬虫

14、 greenDAO ：高性能的 Android ORM 库。拥有体积小、易于使用、支持数据库加密等特点，通过它 Android 开发者可以采用面向对象的方式操作数据库，不需要再手写和拼接 SQL 啦

15、 vue-color-avatar ：纯前端实现的矢量风格头像生成网站。可以通过搭配不同的素材，生成个性化头像。该项目使用 Vite + Vue3 开发，能够帮助前端初学者熟悉 Vue3 语法并掌握项目搭建的相关知识

16、 colorfu ：自动生成由文字/颜色/图片/纹理元素组成的壁纸

17、 pm2 ：Node.js 的进程管理工具。它容易上手操作简单，可以有效地提高 Node.js 程序运行的稳定性，支持自动重启、负载均衡、不停服务重启、性能监控等功能，多用于生产环境中管理、监控 Node.js 进程

18、 automa ：通过图形化界面拖拽功能模块，实现浏览器自动操作的扩展工具。轻松实现自动填表、截图、定时执行等操作。让浏览器自动完成预设工作流的插件，从而减少重复性操作提高效率

19、 PyWebIO ：快速构建 Web 应用的 Python 工具。通过该项目你可在不写 HTML、CSS、JS 代码的前提下，仅用 Python 快速完成一个包含数据展示、表单的小型 Web 应用页面

20、 pottery ：以 Python 的方式操作 Redis 的库。忘记那些 Redis 命令吧，只要你知道如何使用 Python 字典，那么你就会用这个库操作 Redis

21、 zulip ：完全开源的企业级即时通讯项目。后端采用 Python 语言实现性能足够强大，功能齐全相当于开源、免费的 Slack，拥有拖拽上传文件、代码高亮、Markdown 语法、应用整合、容易接入的 API 等功能，还支持 Web、PC、iOS 和 Android 主流平台，众多知名企业都在用，能够有效地提高团队沟通和办公效率。同时该项目对新手用户友好，如果你想加入一个不错的 Python 开源项目，推荐你花时间研究下它一定会有所收获

22、 webssh ：简单的 SSH 连接服务器的 Python Web 应用。该项目后端采用 Tornado Web 框架和 Python SSH 库 paramiko，前端是 TypeScript 写的命令行前端组件 Xterm.js 实现。整个项目简单还具有实用价值，可作为 Python Web 的实战项目学习

23、 django-debug-toolbar ：Django 的调试工具栏。可显示当前请求和响应有关的各种调试信息，包括耗时、SQL、配置、性能等信息

24、 hyperfine ：命令行基准测试工具。可用来查看和对比命令的耗时，支持多次运行的统计分析、结果导出等功能

25、 xcode-dev-cleaner ：用于清理各种 Xcode 的缓存数据，释放存储空间。注意是清除 Xcode 缓存数据，不是卸载 Xcode 哈

26、 toml ：更易读和易于维护的配置文件格式。如果你厌倦了 INI 的局限性、层层嵌套的 JSON 和 YAML 令人心惊胆战的缩进语法，不防给 TOML 一个机会，它支持多种数据类型、抛弃了缩进和嵌套，而且众多流行编程语言都有对应的库。TOML 已经足够成熟，绝对值得一试

27、 waka-readme-stats ：自动在 GitHub 个人首页展示编程时长的工具。该项目通过 WakaTime 记录用户在 IDE 的使用时间，统计编程时长和数据，然后采用 GitHub Action 自动获取并动态更新到 GitHub 个人首页。轻而易举地展示自己的编程时长

28、 PathPlanning ：常见的路径规划算法集合。项目包含了 Python 代码实现、运行过程动画以及相关论文

29、 howdy ：为 Linux 系统提供人脸识别解锁电脑的工具。通过电脑内置的摄像头和红外设备，实现了类似 Windows Hello 风格的身份认证，可用于登陆、锁屏、sudo 等任何需要输入密码的地方

30、 The-Open-Book ：开源的电子水墨屏阅读设备。动手能力强的同学可跟着这个项目，从焊电路板开始亲手制作出一个类 Kindle 的 4.2 英寸阅读设备

31、 fl_chart ：Flutter 图表库。它支持折线图、条形图、饼图、散点图和雷达图

32、 ugo-compiler-book ：《从头开发一个迷你 Go 语言》该书教你从头实现迷你 Go 语言，内容包含了词法解析、语法树构建、函数闭包、接口、CGO 的实现等内容

33、 archbase ：教科书《计算机体系结构基础》第三版

34、 spring-in-action-v6-translate ：《Spring 实战第 6 版》中文翻译