flutter音视频开发实践

1. Flutter音视频开发实践牛赞腾讯云音视频高级工程师

2. 个人介绍 2019年加入腾讯云音视频团队 TRTC Flutter、Unity sdk的开发负责人

3. 1.Flutter&TRTC简介目录 2.Flutter音视频sdk设计 3.Flutter音视频未来展望

4. 跨平台技术演进-发展趋势跨平台框架优势：一次开发，多端运行，组件复用，提升效率

5. 跨平台技术演进-热度趋势数据来源：github 数据来源：statista 数据来源：stackoverflow

6. Flutter架构是一个Dart实现的UI SDK，从上到下包括了两大组件库、基础组件库、图形绘制、手势识别、动画等功能实现Flutter渲染引擎、Dart虚拟机、 Platform通信通道、事件通知、插件架构等功能操作系统适配层

7. Flutter & Web开发的差异 StatelessWidget(无状态)：内部没有保存状态，UI界面创建后不会发生改变。 StatefulWidget(有状态)：内部有保存状态，当状态发生改变，调用 setState()方法会触发UI发生更新。

8. TRTC简介腾讯实时音视频致力于帮助开发者快速搭建低成本、低延时、高品质的音视频互动解决方案： • 适用于视频会议、在线教育、互动直播等场景 • 客户有腾讯会议、企业微信、陌陌、贝壳找房等

9. 科技向善-疫情期间TRTC助力线下业务搬到线上

10. TRTC产品架构

11. 1.Flutter&TRTC简介目录 2.Flutter音视频sdk设计 3.Flutter音视频未来展望

12. TRTC Flutter sdk架构设计提供给开发者调用的API，如进退房、推拉音视频流等近100个接口管理API的核心类，可扩展、易用、性能好通过MethodChannel消息通道连接 Flutter和原生sdk，数据通讯能力升级底层是Android和iOS原生sdk

13. 面临的挑战

14. 挑战点1-如何实现复杂的类结构体传输？本质是dart调用native的接口，并异步返回 native的数据。原生sdk存在着大量类结构体的类型定义，原有消息通道不支持传递此类型。

15. 数据通讯能力升级-类结构体传递 Flutter类结构体 Flutter类结构体转 Map对象 Flutter JSON序列化通信层JSON反序列化可以对参数进行约束，类型校验，提升易用性 Android类结构体

16. 挑战点2-图片怎么高效在Flutter和原生sdk之间传输？ Bitmap：位图，是使用像素阵列来表示的图像，本质是一张图片的内容在内存中的表达形式。

17. 利用文档目录实现图片传输实现方案：通过文档目录（android和flutter 都可访问）传递文件路径的方式来实现共享带来的问题：拷贝文件会导致比较高的耗时，如何解决？

18. 图片传输优化-平台共享asset 优化方案：Flutter的asset资源被打包在原生资源包下面，通过AssetManager 可直接访问，节省中间层拷贝耗时。

19. 挑战点3-视频在Flutter里面如何渲染？采集视频流云服务 Android原生将摄像头采集的每一帧数据通过MethodChanne传递到Flutter中，性能消耗大 Flutter

20. 视频渲染方案外接纹理：可以将原生端opengl图像数据共享给Flutter进行渲染。需要原生sdk提供视频帧图像数据回调接口，实现较为复杂。 PlatformView：主要适用于Flutter中不太容易实现的组件，如WebView、视频播放器、地图等。给Flutter提供了嵌入Android和iOS 平台原生view的能力。

21. 性能测试问题：用oppo的一个低端机进行测试，房间有6个用户的时候，第二屏画面渲染异常

22. 分析原因分析工具：PerfDog性能狗分析结论：GPU占用过高

23. 视频渲染优化-从列表入手列表优化后GPU占用从72%下降到了53%，视频画面正常渲染显示。

24. Flutter与原生性能数据对比-CPU&内存 cpu、内存跟Android原生的占用差不多 Android Flutter Android Flutter

25. Flutter与原生性能数据对比-GPU GPU比Android原生性能还差约15% Flutter Android

26. 视频渲染优化-从底层原理入手性能消耗点：视频view 的每一个像素流经附加的中间图形缓冲区，显著浪费显存和绘图性能优化方案：将视频帧数据直接输出到 SurfaceTexture上

27. 视频渲染优化-架构 Flutter与Android原生共享图像纹理数据

28. 优化后性能对比 Flutter优化后GPU性能提升了约10%，基本能达到 Android原生sdk的水平 Flutter Android

29. 挑战点4-客户接入如何提效？面临的问题：原始SDK API繁多，客户接入耗时很久场景化方案的价值：客户可以寻找契合自己业务的场景方案，参考源码实现，提升接入效率

30. 场景化方案助力接入核心目标：易接入，开箱即用，降低客户的接入门槛

31. 场景化方案示例

32. 场景化方案示例

33. 教育场景SDK类图接口不超过30个，而且语义更加场景化

34. TRTC Flutter接入客户场景接入客户参考方案注意信息互动直播 yell live、币安、 https://cloud.tencent.com/doc 直播如需用到高级美颜需要用到企业版sdk，高腾讯青少年直播 ument/product/647/57388 级美颜功能单独收费在线教育潭州教育、力拓飞远等音视频通话智联招聘、在线医疗等 https://cloud.tencent.com/doc 如果Native端已经接入 ument/product/647/45465 TRTC的能力，再引入 Flutter需使用专业版，负责会导致符号冲突等 https://cloud.tencent.com/doc 问题 ument/product/647/58405

35. 1.Flutter&TRTC简介目录 2.Flutter音视频sdk设计 3.Flutter音视频未来展望

36. Flutter桌面端支持

37. Flutter Web端支持

38. Flutter Web端支持-全平台支持

39. 感谢倾听大会官网音视频TRTC 即时通信IM

40. 附录1-Flutter和Native通信 Flutter 通过平台通道向其宿主（应用程序中的 iOS 或 Android 部分）发送消息宿主监听平台通道并接收消息。它使用原生编程语言来调用相关平台 API，并将响应发送回flutter 消息和响应以异步的形式进行传递，以确保用户界面能够保持响应。

41. 附录2-数据通讯类型

42. 附录3-监控仪表盘客户自助查询，减轻客服和sdk开发者压力