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

视频编码的选择

一些建议

你可能感兴趣的:(LiveVideoStackCon 2017 Day 1 专场回顾 —— 多媒体与浏览器专场)