LiveVideoStackCon 2017 Day 1 专场回顾 —— 多媒体与浏览器专场
LiveVideoStackCon 2017 Day 1 專場回顧 —— 多媒體與瀏覽器專場
有幸參加 LiveVideoStackCon 10 月 20 日 —— 10 月 21 日在北京麗亭華苑酒店舉行的音視頻大會，這次大會甄選多媒體開發(fā)領(lǐng)域最新技術(shù)實踐與應(yīng)用案例，并設(shè)立了 9 大專場。這篇內(nèi)容主要針對多媒體與瀏覽器專場，進行主要內(nèi)容回顧。
上午是主題演講環(huán)節(jié)，已有官方回顧，內(nèi)容可戳這里 LiveVideoStackCon 2017 Day 1 精彩回顧
第一場：《高品質(zhì)互動在線課堂開發(fā)實踐》 tutorabc/和君
第一場的講師是現(xiàn)任 tutorabc 前端負(fù)責(zé)人的和君，擁有 10 余年前后端研發(fā)及架構(gòu)經(jīng)驗的他，今天主要圍繞 TuborMeet + 在線云課堂在實際開發(fā)和上線運營過程中面臨的問題，進行分享。
一、 WebRTC 相關(guān)
首先，他圍繞 WebRTC，從內(nèi)置瀏覽器（無需下載，無需裝插件），開發(fā)成本低（簡單的 JS-API 即可實現(xiàn)音視頻通訊），開源安全，瀏覽器支持越來越好，Flash 將于 2020 年徹底退役等幾方面介紹了為什么要使用 WebRTC。介紹了不同場景下的技術(shù)選型。如果是公開課，大班課場景，采用 WebRTC + 推流技術(shù)，支持 10000 人同時在線，支持 RTMP 與 HLS；如果是小班課場景，則采用 WebRTC 會議模式，智能服務(wù)切換。
二、優(yōu)化
接著圍繞在線課堂 Web 前端的特性（相較一般 SPA 交互性更強；用戶的頁面滯留時間長；需要盡可能的避免頁面刷新；功能繁復(fù)，靜態(tài)資源體積很大），提出了相應(yīng)的優(yōu)化：
構(gòu)建時優(yōu)化
- 基于 webpack 的代碼分割
- 按業(yè)務(wù)邏輯拆分多入口
- Code Splitting
- 本地化語言包按需加載
- 利用 Webpack3.0 的 Tree-shaking/Scope Hoisting 等特性的打包優(yōu)化
運行時優(yōu)化（RAIL 模型）
- 響應(yīng)：100ms內(nèi)做出響應(yīng)
- 動畫：10ms內(nèi)繪出一幀
- 空閑：最大化空閑時間
- 加載：1000s內(nèi)提供內(nèi)容
記一次實際的白板性能優(yōu)化案例
用戶體驗優(yōu)化
- 預(yù)加載/懶加載
- 響應(yīng)式布局
- 漸進式用戶提樣
- 層級管理（z-index）
- Web 安全色、安全字體（保證在不同的終端上顯示相同的字體）
四、持續(xù)交付的目的，架構(gòu)圖和技術(shù)點
五、前端 APM 所做的事情
- 性能監(jiān)控
- 首屏加載：針對 TTFB、Content Download 等關(guān)鍵數(shù)據(jù)的采集
- 可預(yù)期的耗時操作
- 錯誤采集
- 全量采集："uncaught error"，資源加載失敗等
- 按需采集："caught errors"
- 業(yè)務(wù)數(shù)據(jù)上報展示
- 周期性上報客戶端 “丟包率”，“網(wǎng)絡(luò)延時”
Tips:
- 對上報數(shù)據(jù)分類、分級
- 盡量做到“無埋點”
- 聲明式埋點 替代 命令式埋點
- 盡量做到按需采集，最小化分析時的“噪音”
六、展望及 roadmap
第二場：《基于 Intel? CS for WebRTC 構(gòu)建高效可擴展的 RTC 服務(wù)》英特爾/段先德
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 密集型與計算密集型分開,做更精細(xì)的 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 播放器的技術(shù)難點與架構(gòu)探索》 熊貓直播/姜雨晴
一、HTML5 播放器背景
- HTML5 Video 支持
- Video 標(biāo)簽支持
- MSE
- Adobe 更關(guān)注 H5
- Chrome 屏蔽 Flash
- 校長需求
- HTML5 優(yōu)勢和前景
- 高效
- 兼容性
- 瀏覽器新技術(shù)
二、直播領(lǐng)域 HTML5 播放器問題
音畫不同步
常見場景：戶外直播是音畫不同步問題發(fā)生最為頻繁的版區(qū)
問題定位：戶外主播手機性能寄網(wǎng)絡(luò)問題導(dǎo)致上行不同步
問題改進：采用播放器對軌，進行問題同步
LPL藍光
清洗能量槽（清緩存）
- 什么時候清洗？
setInterval VS 新的 gop 準(zhǔn)備好 - 清多少？（10秒前）
從上一次清楚地時間點起，到當(dāng)前時刻前固定秒數(shù) - 容易洗出什么問題？
BufferUpdating 狀態(tài)、無法回退
累計延時
舊版本內(nèi)核累計嚴(yán)重，可以延遲出 3 - 4 分鐘甚至更長
什么時候重新拉流？ 卡頓 + 累計延時達到一定閾值
三、熊貓 HTML5 播放器內(nèi)核構(gòu)架
四、技術(shù)創(chuàng)新與展望
基于現(xiàn)在的播放器內(nèi)核框架，除了解決播放器內(nèi)核問題之外，還可以輕易的將微創(chuàng)新和新技術(shù)融入到內(nèi)核當(dāng)中。
第四場：《音視頻通話 WebRTC 那些坑》 dotEngine/劉連響
WebRTC 是什么？
WebRTC 涉及到的模塊
WebRTC client
Signaling
視頻編碼的選擇
一些建議
總結(jié)
以上是生活随笔為你收集整理的LiveVideoStackCon 2017 Day 1 专场回顾 —— 多媒体与浏览器专场的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
