9月7日-8日,相约 2023 腾讯全球数字生态大会!聚焦产业未来发展新趋势! 了解详情
写点什么

从 Flutter 的视频渲染到 App 落地经验

  • 2019-11-30
  • 本文字数:3604 字

    阅读完需:约 12 分钟

从 Flutter 的视频渲染到 App 落地经验

3 月 23 日周六,由 RTC 开发者社区主办的 “RTC Dev Meetup 北京站”如约举行,超过 100 位求知若渴的开发者参加了活动。来自 LeanCloud、声网 Agora、阿里、美团点评的资深工程师,与他们共同分享了 Flutter 开发中的实践经验。


我们在这里回顾一下每个演讲中的部分干货。想进一步了解更多内容细节?请看到文末,那里会有你想要的。

郑鹏:浅谈跨平台方案的适用场景

LeanCloud iOS 高级开发工程师郑鹏从框架特点、实现原理与现状角度对比分析了 React Native 与 Flutter。


React Native 是 Facebook 在 2015 年推出的一套开源跨平台方案,这个方案可以说在移动平台上一个真正意义上的跨平台方案,因为它能够达到技术原生应用的一个体验。它有三个主要特性:


  • 能使⽤ JavaScript 和 React 在移动平台构建原⽣应用

  • 支持热加􏰀载(Hot Reloading)

  • 同一套代码可以运行在 iOS、Android 以及其它平台



在 React Native 的官方项目作品展里面有这样一个应用叫做 Discord。2018 年的时候,Discord 发表了一篇博文,聊了聊他们眼中 React Native 的优缺点,总结如下:



谈及 React Native 的现状,郑鹏表示,大家对于 React Native 已经形成了比较统一的认识,它没有性能方面的问题,并且能快速地构建 UI 以及原型等。但交互场景太过复杂,或者需要大量的计算资源的话,React Native 就会遇到瓶颈。同时在跨平台的兼容性上也表现的差强人意。尽管有这样多的问题,Facebook 也是声明了他们会对于 React Native 的底层进行改造以此提升性能,虽然官方没有给出一个具体的时间点,但是这似乎意味着 React Native 的未来还是可以期待的。


在跨平台方案经过了 React Native 这波浪潮之后,Google 在 2018 年年底正式推出了一个看起来更有野心的一个方案,就是 Flutter。Flutter 的特点主要有四点:


  • 能使用 Dart 以及 React 风格的组件在移动平台构建原生应用

  • 支持热加􏰀载(Hot Reloading)

  • 同一套代码可以运行在 iOS、Android 以及其它平台

  • 比 React Native 更好的性能表现



Flutter 虽然看似解决了 React Native 要面临的很棘手的一些问题,但是 Flutter 毕竟推出的时间还没有那么长,还没有经过市场的考验,所以 Flutter 本身还是有一些问题的:


  1. 如何兼容应用层的一些特性。例如 密码自动填充功能,如果想要实现这个特性,那么 flutter 可能要采用 RN 类似的方案,或者用户自己在这部分直接使用原生的接口。

  2. flutter 底层的渲染引擎仍然是 OpenGL,但是 iOS 已经迁移到了 Metal,废除了 OpenGL,那么从这种紧急态度来看,Flutter 什么时候迁移。

  3. Google 以往推出过很多技术、产品,但最后都慢慢消失或被并入某个新项目,而 Flutter 未来是否会进入这个“怪圈”也是一个问题。

张乾泽:Flutter 实时音视频技术实践

声网 Agora 高级架构师张乾泽分享了在 Flutter 上的实时音视频技术实践。声网在上个月应开发者的要求,发布了声网 Agora Flutter SDK,一个封装了声网 Agora SDK 的 Flutter 插件,能让开发者在 Flutter 上实现实时视频通话。那么如何通过 Flutter 来开发一个视频通话应用?会遇到什么问题?从这个演讲中你会找到答案,他分享了可以实现该场景的两种方法,以及 Flutter 渲染的原理。


首先,他介绍了一下 Flutter 的架构逻辑。如果比较熟悉 Flutter 的朋友可能知道,Flutter 的渲染方式与 React Native 最不一样的地方就是它自己的一些原生控件上没有利用系统本身提供的一些接口、控件,比如说 UI View 或 Android 上的一些 View。它自己里面会建立一个 Layer Tree,Flutter 自己来进行渲染,它把这些数据或者渲染结果发到 Skia,由 Skia 引擎渲染处理为 GPU 数据,最后通过 GL 或 Vulkan 发给 GPU。



图:Flutter 渲染机制


当我们在实现一个视频通话应用的时候,我们可以利用 Flutter 自身组件来实现很多基本的功能,比如 App 的一个脚手架,还有利用组件来画出界面上的按钮、菜单栏。而视频的编解码、实时传输我们可以交给 Agora SDK 来解决。那么关键的问题在于如何在 Flutter 上渲染视频。


在 Flutter 里有一个组件叫 Video Player,其中有一个 Texture Widget,我们可以通过 Native 端来提供视频数据给这个 Texture,然后通过它来进行渲染。以 iOS 为例,iOS 需要提供 CVPixelBufferRef,它可以将渲染出来的数据供给 Texture Widget,然后 Texture Widget 就可以把你提供的这些数据显示出来。在我们传输数据的时候会需要将其与 TextureID 绑定,这样一来,可以在同一个界面上出现多个 Texture,也就是说能显示多个视频通话窗口。在其中,声网 SDK 的 AgoraVideoSink 接口里可以提供一个回调,这个回调会把它收到的所有视频数据通过你想要的格式传给 Texture。



图:iOS 的渲染


在 Flutter 1.0 中新增的 PlatformView 也可以实现这个场景。PlatformView 在 iOS 和 Android 上分别叫做 UIKitView 和 AndroidView,它可以让你直接创建一个 UIView。我们在 Plugin 中有一个 ViewFactory,它可以针对不同平台返回一个你需要的 View。最后,在一个分辨率设置较低的状态下进行了视频通话,分别对比了两种实现方法的性能。结果显示 PlatformView 的性能消耗跟直接用 Native 接我们 SDK 的性能比较相近。


王璟瑤:Flutter B 端落地和高可用——票务 APP 应用实践

阿里现娱无线端基础线负责人王璟瑤来自大麦网。大麦网采用 Flutter 在一个独立的 APP 上进行了落地。他的分享主要分成四个部分,一是大麦网的落地情况,二就是组件化集成,包括集成、编译构建、调试方面的经验,第三是 Flutter 作为开发的基础能力,第四是高可用部分。他重点讲解了组件化集成部分。


大麦的 App 分为 B 端和 C 端。他们首先选择了在用户量相对小一些的 B 端落地了 Flutter。随后也在 C 端的进行了落地。



如上图是组件化的结构图。中间 Flutter Container 相当于跟原有 Native Bundle 平行的业务单元。因为我们要单独地编译 Flutter 大的代码,所以还有一个 Flutter Host 模块。下面还有很庞大的 Common 层。Flutter 内部有一些基础的网络联网、图片显示或一些常有的存储组件,但是用的时候可能你们会需要做增强、网络、图片,像我们用的二维码,基于一些增强的组件来实现的,我们以 Common 层作为承载。



工程依赖可以看到两个工程组件化的形式,我们的根工程基于上面安卓叫 Portal,iOS 是 DMPortal,分别有对应的 Common 和 Flutter container、Flutter Host,外面是这个 Host 编译完成之后把相关的产物打包提交到 Flutter Container 去。iOS 是基于软链接跟原来的工程做并联,Android 则相对复杂一些,都是在命令行里完成的。



图:优化后的编译构建


如上图是我们优化之后的编译构建模型。因为我们要解决能运行的问题,所以我们需要编译 Engine。以 Android 这边举例子的话就是我们可能会改变原有标准工程上依赖于 Gradal 的实现,大量的逻辑会通过脚本的方式做构建,然后做 Engine 的拷贝,最终我们会打包出一个 Bundle AAR,然后再完成整个工程的构建。


除此之外,王璟瑶分享了包括 Engin 适配、混合页面栈、UI 代码组织等方面的干货内容,由于篇幅有限,我们在这里不一一细说。


严涛:美团外卖商家 Flutter 混合工程实践


美团点评 iOS 高级开发工程师严涛从工程管理、基础设施建设、业务实践等方面,分享了 Flutter 在美团外卖商家端上的落地经验。


从工程管理来讲,总共有四类工程:


  • Flutter Application:标准的 Flutter App 工程,包含 Dart 层和 Native 平台层

  • Flutter Plugin:Flutter 插件工程,包含 Dart 层与 Native 平台层的实现

  • Flutter Module:Flutter 组件工程,仅 Dart 层,Native 平台层为隐藏工程

  • Flutter Package:纯 Dart 组件工程,仅包含 Dart 层实现


美团外卖需要将 Flutter 集成到现有的 Native 工程中。对于这类需求,Flutter 官方提供了一套通用方案:


Android 端


  • 在 settings.gradle 中注 include_flutter.groovy 脚本

  • 在需要依赖的 module 中 build.gradle 添加 project(‘:flutter’) 依赖


iOS 端


  • Podfile 中注 podhelper.rb 脚本,在 pod install 时会执 该脚本

  • 在 iOS 构建阶段 Build Phases 中注入构建时需要执 的 Xcode_backend.sh 脚本


但这个方案并不适用于美团,因为在第一阶段中,Flutter 只是 App 中的一小部分,并不需要全部人员都做 Flutter 开发,所以他们希望少改或不改工程配置。另一方面,在当时公司的打包机器上还未配置 Flutter 的环境。所以官方的方法并不完全使用。他们的解决方案是将 Flutter 产物组件化,原 程调整为通过 Pod 对 Flutter 组件依赖。


美团在 Flutter 1.0 之前就开始着手开发。从他们的经验来看,Flutter 页面首次创建时间较长,对页面启动时间要求比较高的业务,可以考虑集成 flutter 1.0 及其以后版本。


美团看中 Flutter 就是看中了它的性能,它有自己的一些 UI 线程和 GPU 的线程,它有自己独立一套的渲染逻辑,它脱离了 Native 这一侧的局限。


本文转载自公众号声网 Agora(ID:shengwang-agora)。


原文链接:


https://mp.weixin.qq.com/s/suO54BE8mxaPkHyb-Ud7wA


活动推荐:

2023年9月3-5日,「QCon全球软件开发大会·北京站」 将在北京•富力万丽酒店举办。此次大会以「启航·AIGC软件工程变革」为主题,策划了大前端融合提效、大模型应用落地、面向 AI 的存储、AIGC 浪潮下的研发效能提升、LLMOps、异构算力、微服务架构治理、业务安全技术、构建未来软件的编程语言、FinOps 等近30个精彩专题。咨询购票可联系票务经理 18514549229(微信同手机号)。

2019-11-30 13:591128

评论

发布
暂无评论
发现更多内容

2021年常见面试真题汇总,含了14个技术栈,已助我成功拿到腾讯offer!

Java 架构 架构师 java面试

金九银十一线大厂Java面试题大全(整理版)1000+面试题附答案详解,最全面详细!

Java 程序员 架构 面试 后端

(深入篇)漫游语音识别技术—带你走进语音识别技术的世界

攻城先森

深度学习 音视频 nlp 语音识别

【LeetCode】字符串中的单词数Java题解

Albert

算法 LeetCode 10月月更

让我薪资提升了个新高度!这份阿里核心教程:理解JVM垃圾回收器手册帮了我大忙!

Java 架构 面试 程序人生 编程语言

不愧是阿里P8架构师总结的Java面试笔记,上线仅七天,Github标星55K

Java 程序员 架构 面试 后端

这份阿里P8撰写的面试笔记就是逊了!才帮助十几个人圆了大厂梦

Java 架构 面试 程序人生 编程语言

Android平台音视频实战|引航计划|音视频

轻口味

音视频 引航计划 内容合集 技术专题合集

私有云部署系列之动态IP获取(程序编写)

稻草鸟人

《Go 开发指南》-管理 Go 环境

看山

Effective-go 10月月更

Apache ShenYu源码阅读系列-基于ZooKeeper的数据同步

子夜2104

Java 网关 shenyu

【Flutter 专题】36 图解 Flutter 基本动画 (一)

阿策小和尚

Flutter 小菜 0 基础学习 Flutter Android 小菜鸟 10月月更

这份笔记太牛了!手把手教你从零开始搭建Spring Cloud Alibaba!

Java 架构 面试 程序人生 编程语言

面试进阶必备:“阿里爸爸”高并发秒杀架构设计笔记(全彩版)

Java 架构 面试 程序人生 编程语言

009云原生之分布式事务模式

穿过生命散发芬芳

云原生 10月月更

Zabbix VS Prometheus :哪个更适合你

耳东@Erdong

后端 Prometheus zabbix 引航计划 10月月更

模块五作业

Geek_fc100d

「架构实战营」

华为大佬的“百万级”MySQL笔记,基础+优化+架构一键搞定

Java 架构 面试 程序人生 编程语言

在线RGB和HEX十六进制颜色互转工具

入门小站

工具

从零开发一款Android Rtmp播放器

轻口味

android 音视频 引航计划 10月月更

架构实战营模块九作业

maybe

Spark 系列教程(2)运行模式介绍

Se7en

太牛了!同事凭借这份Java面试题1000道手册(pdf)入职了阿里,定级P7

Java spring 程序员 架构 编程语言

什么是机器学习, CNN TensorFlow by Google神经网络深度学习 易筋 ARTS 打卡 Week 69

John(易筋)

ARTS 打卡计划

音视频全链路开发实践|引航计划|音视频

轻口味

音视频 引航计划 内容合集 技术专题合集

Python代码阅读(第33篇):反转字典

Felix

Python 编程 Code Programing 阅读代码

🏆【Alibaba工具型技术系列】「EasyExcel技术专题」实战技术针对于项目中常用的Excel操作指南

洛神灬殇

Excel EasyExcel Alibaba Alibaba技术 10月月更

12道Zookeeper高频面试题,你顶得住吗?

Java 架构 面试 分布式 后端

模块六作业

Geek_fc100d

「架构实战营」

靠这份GitHub star过万的1121页图解算法成功杀进字节跳动

Java 架构 面试 程序人生 编程语言

微博评论系统架构设计

guangbao

  • 扫码添加小助手
    领取最新资料包
从 Flutter 的视频渲染到 App 落地经验_文化 & 方法_声网_InfoQ精选文章