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开发者 压力

trang chủ - Wiki
Copyright © 2011-2024 iteam. Current version is 2.137.1. UTC+08:00, 2024-11-17 14:46
浙ICP备14020137号-1 $bản đồ khách truy cập$