WebAssembly在音視頻領域的應用.pdf

《WebAssembly在音視頻領域的應用.pdf》由會員分享，可在線閱讀，更多相關《WebAssembly在音視頻領域的應用.pdf（38頁珍藏版）》請在三個皮匠報告上搜索。

1、WebAssembly 在音視頻領域的應用為什么引入WebAssemblyWebAssembly介紹WebAssembly開發與在線教育視頻的結合展望與預期01為什么引入WebAssembly產品介紹(TutorMeet+)WebRTC 1.0 已經定案，愈發成熟穩定更多的編碼器（VP9，AV1）更廣泛的瀏覽器端支持（Edge，Safari已全面支持）更多的終端設備支持（醫療設備、loT）與新技術的結合（VR/AR，機器學習）WebRTC發展現狀2017 Oct-70.68%Can I Use WebRTC(By June 2018)Web前端對音視頻的定制化處理不及客戶端Javascript

2、的運行時性能問題JS缺少處理音視頻相關的開源庫瀏覽器處理音視頻能力的不足02WebAssembly介紹使瀏覽器可以運行低級（low level）二進制代碼，簡寫為（wasm）標準：由W3C WebAssembly Community Group設計開發 高性能：提供接近原生的性能 安全、可移植 開發語言：由其他語言（C/C+，Rust等）編譯而成 運行：通過Javascript API與瀏覽器進行交互WebAssembly簡介WebAssembly的誕生19952008201320152017-2018Javascript誕生V8asm.jsWebAssembly1.0 spec/go，c#等

3、的支持/已獲得主流瀏覽器的支持理論上不受開發語言限制當前已經支持語言C/C+,Rust,AssemblyScript,C#,Reason，Lua，Go,KotlinMore languages coming soon;WebAssembly現狀Can I Use WASM(By June 2018)數據來源：WebAssembly為什么快ParseCompile+Optimizere-optimizeexecuteGCdecodecompile+optimizeexecute二進制格式（Binary Format）Type SectionImport SectionFunction Secti

4、onTable SectionElement SectionStart SectionExport SectionGlobal SectionMemory SectionCode Section（function bodies）Data SectionCode=1Code=2Code=3Code=4Code=9Code=8Code=7Code=6Code=5Code=10Code=11Custom SectionCode=0 由多個區塊（Section）按順序組成 每個Section包括：Section id（1 byte）Section 大?。╱32,in bytes）Section 內容

5、主體是Code Section，通常占比90%;二進制格式（Binary Format）二進制格式（Binary Format）對應于二進制格式的“可讀的”文本格式 S-Expression（類似lisp的語法）通常保存為.wat(Web Assembly Text format)可以通過Binaryen實現與wasm的 編譯/反編譯文本格式（Text Format）前一位標示section id后一位表示section size函數體標示wasm以及版本號https:/wasdk.github.io/wasmcodeexplorer/文本格式對照3 支持4種數據類型（Type）i32,i64

6、,f32,f64 指令（Instructions）i32.add,i64.add,i32.sub,f32.sub.call,call_indirect,loop,if,block get_global,set_global，get_local,set_local i32.store,i32.store8,i32.load,i32.load8_u Stack machine數據格式&指令集i32.const 1i32.const 2i32.add123線性內存（Linear memory）“wasm”011101110111001101100001011011010123456789101112

7、13 連續的，按字節可尋址的一段內存 一格表示1byte JS，wasm數據交互的主要方式 wasm通過load,store 操作符指令訪問linear memory 上限2GwasmapplicationWASM engineFunctionsIndirect function tableCall Stack000table_sizemem_sizeLinear memory1230123Global variables執行模型03WebAssembly開發sample.wasm(text format)JavaScript編譯引入C+WebAssembly示例Javascript APIW

8、ebAssembly.Module（構造器）通過WebApile，WebApileStreaming 異步編譯，支持PromiseWebAssembly.Instance（構造器）通過WebAssembly.instantiate，WebAssembly.instantiateStreaming異步創建，支持PromiseWebAssembly.Memory（構造器）創建一個可變大小的ArrayBuffer對象，可定義初始大?。▎挝?wasm-page 64Kib）可以通過實例方法grow擴容WebAssembly.Table（構造器）創建Javascript類數組對象，包含wasm函數的引用

9、（指針）可以通過實例方法grow擴容C+LLVMEmscripten+Binaryenwasm+js 可以將C/C+編譯為asm.js和wasm 底層編譯基于LLVM 通過參數配置：優化level，生成膠水層JS，HTML 通過Binaryen最終編譯為wasmBinaryen工具鏈實現各種格式的編譯/反編譯 asm-wasm wasm-asm s-wasm wat-wasm wasm-wat 工具鏈 工具鏈Mozilla Open Source Support贊助了Webpack$12,5000Webpack4實驗性支持（未來會移到穩定版）意味著可以直接引入 wasm模塊，或cpp，rs（需

10、要額外loader支持）與前端工程的結合Performancehttps:/ JavascriptWebAssembly 不是用來取代Javascript，而是更好的和Javascript協同工作計算密集型前端應用 計算機視覺 游戲 加密算法 3D/VR/AR 圖形、視頻編輯 音視頻編解碼器（codecs）現有的C+項目低成本的“遷移”到Web 服務器計算壓力分攤到瀏覽器端適用場景Video Frame Proc（C+）Embedded OpenCV libs采用OpenCV lib瀏覽器端截獲視頻的幀，轉成圖像矩陣（Mat），傳入wasm處理處理好返回的Mat，由JavaScript處理re

11、nder邏輯emscriptenWasm+JSVideoJavascriptCanvas視頻幀處理庫 每隔一定時間截獲一個視頻幀 使用面部分類器做面部檢測 根據面部坐標檢測是否偏出給定閾值解決方案面部偏移檢測場景：希望老師視頻授課時的儀態端正，面部視頻清晰。截獲每個視頻幀 面部關鍵點檢測（Facial Landmark）通過預設閾值判斷表情，并上報數據解決方案表情識別場景：記錄顧問授課時表情打點，作為顧問評鑒參考值，及大數據分析之用 截獲每個視頻幀 面部關鍵點檢測（Facial Landmark）根據關鍵點和道具、貼紙互動解決方案面部filter場景：通過同步互動的filter，提升趣味性將無

12、關UI渲染的加入webworker盡量將合并計算到每一幀通過IndexedDB緩存wasm文件先開發C+模塊，在編譯為wasm校驗采用asm.js 作為fallback方案注意emscripten編譯的limitationTips直接調用DOM/Web API更快/更豐富的工具/更多的語言支持Tail calls/multiple return values異常處理（Zero-cost error handling）線程（SharedMemory,pthread）SIMD(single instruction multiple data)與前端構建工具的結合（webpack）Rust，Golang等語言在這塊的發力Future features