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

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

视频编码的选择

一些建议