基于go和flutter的实时通信/视频直播解决方案 段维伟 湖北捷智云技术有限公司 创始人 目 录 背景 01 技术简介 02 客户端 03 服务端 04 开源社区 05 Q&A 06 背景 第一部分 即将讲述的内容 • WebRTC 实时通讯 • Flutter 跨平台UI 开发框架 • 基于Flutter UI 框架的WebRTC 插件 flutter-webrtc pion/webrtc • 基于pion/webrtc 的应用级服务框架 pion/ion • 5G 时代, 实时通讯应用爆发 • 疫情影响，全世界都在使用远程教育，远程办公 • 云游戏，机器人，VR，直播等 • 如何用最容易的方案实现实时通讯 • 漂亮的app，最好全部(mobile, web, desktop)平台都支持. • 最容易使用的后端技术 真实世界的需求点 用开源方案实现需求 基于收购来的 GIPS (6800万美金)的高质量实时音视频引 擎 • 支持主流浏览器主流移动设备 • 历时十年成为Web 实时通讯标准 • RTMP 直播协议的低延迟替代方案 WebRTC 可以做什么 02. 副标题 • 用实现网页音/视频通话 • 低延迟直播系统(在线课堂) • 多人视频会议系统 • 高质量SIP/VOIP系统 • 视频监控系统 • 机器学习，视觉计算等 如何使用它

，参与手机QQ、 NOW直播、腾讯课堂等产 品的Android客户端。 姓名：王刚 英文：Kirawang 职位：腾讯移动端高级工程师 手机QQ NOW直播 分享目录 uNOW直播与Flutter uNOW直播中Flutter的开发模式 uNOW直播中Flutter的工程实践 u技术思考 关于NOW直播 •腾讯出品的个人直播平台 •2016年初上线 •Top3热门个人直播App •Tens 框架应用 Web RN(运营需求多的) Native Flutter（性能要求高的） 分享目录 uNOW直播与Flutter uNOW直播中Flutter的开发模式 uNOW直播中Flutter的工程实践 u技术思考 开发模式 •纯Flutter开发 •不具备条件 Flutter Native Flutter •混合开发 工程化开发模式Ⅰ Flutter工程集成IDE工程模式 IDE工程集成Flutter产出模式 适合个人独立开发 方便团队内部协作开发 方便开发调试 适合跨团队协作开发 分享目录 uNOW直播与Flutter uNOW直播中Flutter的开发模式 uNOW直播中Flutter的工程实践 u技术思考 版本迭代 Flutter NOW Version1.0 动态搜索页 Flutter NOW Version2.0

Flutter在百度贴吧的落地实践 高飞 百度资深研发工程师 自我介绍 自我介绍 高飞 11年加入百度贴吧，资深研发工程师，百度贴吧客户端技术负责人 2016 2011 2012 2018 H5 客户端（工程） 直播（游戏） Flutter 目录 n 为何引入Flutter n 实践之旅 n 总结 目录 n 为何引入Flutter n 实践之旅 n 总结 n 年轻人兴趣社区 n 2003年至今 n 拥有10亿注册用户 拥有10亿注册用户 n 2000多万贴吧 贴吧 业务方向 社区生态 n 用户增长 n 吧主 n 垂类 n 风控 内容运营 n Push n 话题 n 神回复 n 个人动态 商业化 n 品牌大使 n 直播 n Banner n 原生广告 研发效率 用户体验 最快触达用户 Flutter的优势 跨平台开发 高效的开发体验 性能接近Native 1 2 3 Ø N倍平台产出 Ø 多端逻辑一致 公司其他产 品 业务模块 一键签到 吧资料 粉丝列表 … 系统层 Android iOS FlutterSDK 基础 框架 模块通信 状态管理 公共结构 通用UI 混合栈 网络 图片 视频 日志 全局数 据同步 插件 FlutterWeb 目录 n 为何引入Flutter n 实践之旅 Ø 技术全景 Ø 工程体系接入 Ø 业务框架升级 Ø Android插件化 n

性受到前端业界的关注。本 次分享将介绍 PWA 技术的 业务实践经验与问题分析。 张成文 张成文，前IMWEB团队成员，对现代前端技术 体系有较深的理解，曾参与腾讯课堂、手Q会 员，吃喝玩乐，now直播等多项业务，具有较 丰富架构经验，著有书籍《现代前端技术解 析》 React组件的运行质 量监控方案 主要讲解react组件异常日志 的捕获方式与性能问题，包 括全局捕获、入侵式捕获和 体验与提供安全的增强能力 的H5接入开放平台。 neilcui(崔进) 崔进，腾讯Web前端高级工程师，Node.js TSW组件核心开发者 2012年开始进入腾讯实习，期间负责空间相 册，空间直播等业务。同时是腾讯内部 TSW(Tencent Server Web)组件的核心开发者 和维护者，本次主要解析在TSW演进中沉淀下 来的Node.js请求抓包工具的原理，该工具可以 将单次用户访问涉及到的所有请求打包成 目前票价限时优惠促销中，原价600元的普通票，现只售 元的普通票，现只售299元，限 元，限300人， 人，8月 月31日 日24时截止。 时截止。 线上直播票 线上直播票 ： ：150元， 元， 可通过腾讯网络课堂直播观看所有演讲 可通过腾讯网络课堂直播观看所有演讲 * 大会为非盈利性大会，所有收入将用于讲师差旅费及场地和其他支出。 * 最终讲师名单可能和网站标示的可能有所出入，敬请理解。 *

而，如果你需要一个老师，要求这个老师能教你如何获取并学习到真正免费的知识，而且还 要对你的学习负责，那你可能就要考虑一下系统化的课程了。否则，你学习任何专业技术所 需的网络资源，每月收费几百块的视频资源会员，以及使你对知识怀有强烈的渴望，这些实 际上都不是免费的。 如果你打算现在开始，那么请通过以下自学资源选择性地学习： 2016／2017 必须知道的 WEB 开发技术 [观看] 前端编程新手指南 本节重点介绍适合前端开发人员自我指导学习和自我指导职业发展的免费及付费资源（视频 课程、图书等）。 以下所提及的资料包括免费和付费资料，其中付费资料将使用 [$] 标注。 作者相信，任何有决心且愿意付出的人都能够通过自我学习成为一名前端开发者。你只需要 一台连接到互联网的计算机，以及一些用来购买书籍和视频课程的经费。 下面是一些视频学习网站（以技术为重点），我通常也推荐从这些站点中寻找学习内容： W）应用，电子邮件，电话 和点对点文件共享网络。 — 维基百科 什么是互联网？ [视频] 互联网是如何工作的？ - W3C [文章] 互联网是如何工作的？ - Stanford Paper [文章] 互联网是如何工作的？ [视频] 互联网是如何在五分钟内工作的 [视频] 网络是如何工作的 [视频][付费] 什么是互联网？或 “爱咋咋地，都一样” [文章] 关于互联网／WEB 41

643 Bifrost 微前端框架及其在美团闪购中的实践 664 Litho 的使用及原理剖析 680 Android 兼容 Java 8 语法特性的原理分析 697 美团外卖商家端视频探索之旅 715 让 Flutter 在鸿蒙系统上跑起来 作者：杨超 前言 鸿蒙系统 （HarmonyOS）是华为推出的一款面向未来、面向全场景的分布式操作系 统。在传统单设备系统能力的 片、列表等，但我们需要抛开这些上层组件，获得直接绘制的能力。借助官方 媒体播 放器开发指导 文档，可以发现鸿蒙提供了 SurfaceProvider 类，它管理的 Surface 对象可以用于视频解码后的展示。而 Flutter 渲染与视频上屏从原理上是类似的，因 此我们可以借用 SurfaceProvider 实现 Surface 的管理和创建： // 创建一个用于管理 Surface 的容器组件 SurfaceProvider Flutter-Web-Publish 负责将编译产物上传美团资源存储服务器。 五、成果展示 5.1 效果展示 我们在美团外卖商家学院（一个以文章、视频等形式帮助商家学习外卖运营知识、了 解行业发展和平台策略的平台，它有很强的传播属性，具有外部投放的场景）率先落 地了 Flutter Web，现以商家学院视频内容页为例，对比 Flutter Native 和 Flutter Web 的展现效果： 前端 < 31 Flutter

document.write("Hello EcmaScript!"); // 向浏览器输出字符串"Hello EcmaScript!" 22 15 天学会 JavaScript（视频教学版） 2. ECMAScript 代码多行注释 多行注释以“/*”开头、并以“*/”结束，例如： /* * 向浏览器输出字符串"Hello EcmaScript!" */ document 了 JavaScript 脚本语言的灵活性。 下面来看一个改变 ECMAScript 变量数据类型的代码示例（详见源代码 ch02 目录中 24 15 天学会 JavaScript（视频教学版） ch02-js-variable-revise.html 文件）。 【代码 2-2】 01

三端⼀一体化编程的新⽅方式 闲⻥鱼 - 让你的闲置游起来 闲⻥鱼 - 让你的闲置游起来 陈新新 阿⾥里里巴巴 - 闲⻥鱼 • 腾讯、YY、阿⾥里里巴巴 • 20年年程序员 • 多端⼀一体化、⾳音视频通信、P2P⽹网络、区块链 • 多语⾔言 C/C++/Go/Java/Dart…… 闲⻥鱼 - 让你的闲置游起来 闲⻥鱼 - 让你的闲置游起来 + + 闲⻥鱼 - 让你的闲置游起来 Flutter 闲⻥鱼 - 让你的闲置游起来 Native组件 Native和Flutter混合开发 混合栈 闲⻥鱼 - 让你的闲置游起来 视频和动画 视频 动画 闲⻥鱼 - 让你的闲置游起来 关键问题解决 混合开发：⼯工程管理理和混合栈管理理 外接纹理理播放视频 图⽚片缓存优化 ⽆无反射JSON序列列化 私有PUB库、阿⾥里里⽣生态适配 闲⻥鱼 - 让你的闲置游起来 Flutter和Native性能简单⽐比较 Flutter Native 45 FPS 30 FPS 113.2% 184.8% 闲⻥鱼 - 让你的闲置游起来 Flutter ⽣生产环境情况 内存问题 icudtl.dat问题 视频兼容问题 截图问题 Armv7问题 字体问题 … 早期的问题： User Crash率： 统计基准⽤用户数：千万级 1% < 0.01% 闲⻥鱼 - 让你的闲置游起来 Flutt

三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库 (opens new window) 结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。 如果你想在深入学习 Vue 之前对它有更多了解，我们制作了一个视频，带你了解其核心概念和一个示 例工程。 如果你已经是有经验的前端开发者，想知道 Vue 与其它库/框架有哪些区别，请查看对比其它框架。 安装 TIP 官方指南假设你已了解关于 HTML、CSS 将会变成 @myevent ——导致 myEvent 不可能被监听到。 因此，我们推荐你始终使用 kebab-case 的事件名。 在 Vue School 上观看关于定义自定义事件的免费视频。 可以通过 emits 选项在组件上定义已发出的事件。 1. app.component('custom-form', { 2. emits: ['in-focus', 'submit'] 简单直观，不过理解其 工作原理同样重要，这样你可以避开一些常见的问题。在这个章节，我们将研究一下 Vue 响应性系统 的底层的细节。 在 Vue Mastery 上免费观看关于深入响应性原理的视频。 这个术语在程序设计中经常被提及，但这是什么意思呢？响应性是一种允许我们以声明式的方式去适应 变化的一种编程范例。人们通常展示的典型例子，是一份 excel 电子表格 (一个非常好的例子)。

原理理篇：编写 Loader 和插件 07 实战篇：React 全家桶 和 webpack 开发商城项⽬目 08 基础篇：webpack 进阶⽤用法 03 扫码试看/订阅 《玩转 webpack》视频课程 商城技术栈选型 前端 后端 商城架构设计 平台层 ⾸首⻚页 列列表⻚页 购物⻋车⻚页 商品管理理 订单管理理 ⽤用户端 管理理后台 服务层 基础设施 商品服务 订单服务 购物⻋车服务 源码： https://github.com/cpselvis/geektime-webpack-course · 演示步骤： README 有详细步骤 扫码试看/订阅 《玩转 webpack》视频课程