LiveVideoStackCon 2017 Day 1 专场回顾 —— 多媒体与浏览器专场

有幸参加 LiveVideoStackCon 10 月 20 日 —— 10 月 21 日在北京丽亭华苑酒店举行的音视频大会，这次大会甄选多媒体开发领域最新技术实践与应用案例，并设立了 9 大专场。这篇内容主要针对多媒体与浏览器专场，进行主要内容回顾。
上午是主题演讲环节，已有官方回顾，内容可戳这里 LiveVideoStackCon 2017 Day 1 精彩回顾

第一场：《高品质互动在线课堂开发实践》 tutorabc/和君

第一场的讲师是现任 tutorabc 前端负责人的和君，拥有 10 余年前后端研发及架构经验的他，今天主要围绕 TuborMeet + 在线云课堂在实际开发和上线运营过程中面临的问题，进行分享。

一、 WebRTC 相关

首先，他围绕 WebRTC，从内置浏览器（无需下载，无需装插件），开发成本低（简单的 JS-API 即可实现音视频通讯），开源安全，浏览器支持越来越好，Flash 将于 2020 年彻底退役等几方面介绍了为什么要使用 WebRTC。介绍了不同场景下的技术选型。如果是公开课，大班课场景，采用 WebRTC + 推流技术，支持 10000 人同时在线，支持 RTMP 与 HLS；如果是小班课场景，则采用 WebRTC 会议模式，智能服务切换。

二、优化

接着围绕在线课堂 Web 前端的特性（相较一般 SPA 交互性更强；用户的页面滞留时间长；需要尽可能的避免页面刷新；功能繁复，静态资源体积很大），提出了相应的优化：

构建时优化

基于 webpack 的代码分割
- 按业务逻辑拆分多入口
- Code Splitting
- 本地化语言包按需加载
利用 Webpack3.0 的 Tree-shaking/Scope Hoisting 等特性的打包优化

运行时优化（RAIL 模型）

响应：100ms内做出响应
动画：10ms内绘出一帧
空闲：最大化空闲时间
加载：1000s内提供内容

记一次实际的白板性能优化案例

用户体验优化

预加载/懒加载
响应式布局
渐进式用户提样
层级管理（z-index）
Web 安全色、安全字体（保证在不同的终端上显示相同的字体）

四、持续交付的目的，架构图和技术点

五、前端 APM 所做的事情

性能监控
- 首屏加载：针对 TTFB、Content Download 等关键数据的采集
- 可预期的耗时操作
错误采集
- 全量采集："uncaught error"，资源加载失败等
- 按需采集："caught errors"
业务数据上报展示
- 周期性上报客户端 “丢包率”，“网络延时”

Tips:

对上报数据分类、分级
尽量做到“无埋点”
声明式埋点替代命令式埋点
尽量做到按需采集，最小化分析时的“噪音”

六、展望及 roadmap

第二场：《基于 Intel® CS for WebRTC 构建高效可扩展的 RTC 服务》英特尔/段先德

Interoperability: Participants talk in different protocols

WebRTC,SIP,RTSP/RTMP,etc.
Various codecs.

Adaptability: Participants through different devices

Phones,tablets,PC,wearables,etc.
Domain-specific devices such as class-room systems and medical devices.

Connectivity: Participants behind complex networks

NAT traverse
Nearby access
Packet loss/jittering handling

Customizability: Participants accept/prefer different audio/video formats and parameters

Audio/video transcoding
Specifying video parameters
Multiple-view

Reliability

Fault of one call/conference should not impact other calls/conferences
Fault of media processing nodes should be detected and recovered automatically
Fault of access nodes should be detected and notified to impacted clients

Availability

Clustering deployment with redundancy backup

Scale in/out demand
Customizable scheduling policies

Principles in Design

Decouple components
Crash-oriented architecture
Unified control primitives
General media spreading model

Decouple Logically and Physically

The IO parts vs. the computation-intensive parts(IO 密集型与计算密集型分开,做更精细的 Scaling)
The signaling parts vs. the media parts
The media-access parts vs. the media-proce

Keep Crash in Mind

Control primitives on media components

via PRC over RabbitMQ
Publish, Unpublish
Subscribe,Unsubscribe
Linkup, Cutoff
Generate, Degenerate

The Stream Spreading Model

A scalable RTC engine

Intel Collaboration Suite for WebRTC

Case Study

爱奇艺
- Interactive show broadcasting —— 奇秀直播
- Internet meeting —— 爱奇艺会议
Zealcomm PureRTC

第三场：《直播 HTML5 播放器的技术难点与架构探索》熊猫直播/姜雨晴

一、HTML5 播放器背景

HTML5 Video 支持
- Video 标签支持
- MSE
- Adobe 更关注 H5
- Chrome 屏蔽 Flash
校长需求
HTML5 优势和前景
- 高效
- 兼容性
- 浏览器新技术

二、直播领域 HTML5 播放器问题

音画不同步

常见场景：户外直播是音画不同步问题发生最为频繁的版区
问题定位：户外主播手机性能寄网络问题导致上行不同步
问题改进：采用播放器对轨，进行问题同步

LPL蓝光

清洗能量槽（清缓存）

什么时候清洗？
setInterval VS 新的 gop 准备好
清多少？（10秒前）
从上一次清楚地时间点起，到当前时刻前固定秒数
容易洗出什么问题？
BufferUpdating 状态、无法回退

累计延时

旧版本内核累计严重，可以延迟出 3 - 4 分钟甚至更长
什么时候重新拉流？卡顿 + 累计延时达到一定阈值

三、熊猫 HTML5 播放器内核构架

四、技术创新与展望

基于现在的播放器内核框架，除了解决播放器内核问题之外，还可以轻易的将微创新和新技术融入到内核当中。

第四场：《音视频通话 WebRTC 那些坑》 dotEngine/刘连响

WebRTC 是什么？

WebRTC 涉及到的模块

WebRTC client

Signaling

视频编码的选择

一些建议