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

胖净在掘金
1,560 阅读5分钟

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

视频编码的选择

一些建议

avatar
文章
阅读
粉丝