WebAssembly 在 Web 端視頻的應用

WebAssembly 從誕生起，賦予了前端更寬闊的應用想象。繪圖視頻渲染，剪輯，編解碼，遊戲都有可能基於 WebAssembly 在瀏覽器端推出相關的產品。

什麼是 WebAssembly

WebAssembly（wasm） 是一種二進制代碼格式, 具備高效，跨平臺性，包含這種格式的二進制文件，能夠被各個平臺的瀏覽器高效的加載，解析執行。

只要瀏覽器支持 wasm， 用戶即可以使用 wasm 所提供的功能，也就是說 wasm 的跨平臺性實際上是基於瀏覽器的跨平臺性。上層用戶編譯 wasm 時，
不須要關注底層架構是什麼，只要編譯出來正確的二進制文件，就能夠在各個支持的瀏覽器運行。

wasm 加強了 js 的能力，js 不擅長作的事情，好比繪圖，編碼，解碼，數學計算等，均可以在 wasm 中實現，而後 js 就可使用wasm所提供的能力。

現階段已經有不少 WebAssembly 的應用，好比 ffmpeg 的編解碼應用， unity 3d, unreal engine， google earth等都相繼支持了 wasm。

如何使用

WebAssembly 如今支持從 C/C++, go, rust 編譯成 wasm 模塊。使用 emscripten sdk, 能夠從 C/C++ 源碼直接編譯成 wasm 文件，而後在網頁中 直接加載使用。

參考 https://emscripten.org/docs/g... 入門。
參考 https://emscripten.org/docs/c... 編譯項目。

可是如何從網頁調用 wasm 的方法。兩種方法：

• 直接使用 emscripten 提供的底層函數，把wasm 的方法導出到 js 運行環境中。
• 在底層使用 embinding 直接導出 c/c++ 的函數和類，而後在 js 中調用。

若是應用在視頻剪輯中

基於 wasm 提供的能力，ffmpeg 解碼， 圖片解碼， OpenGL, 多線程，視頻剪輯應用的結構圖以下， 該系列文章，會不按期更新，介紹基於此圖的架構和技術原理：

參考在線演示 demo: http://cloudedit.atvideo.cc

wasm 的限制和風險

wasm 的限制與不便

• 運行在一個沙盒中，網頁和 js 的限制， wasm 一樣會有，好比跨域
• 不能直接讀取用戶計算機磁盤上的文件
• 能使用的最大內存有限制，各個瀏覽器的限制都不一樣，通常爲 2G
• 現階段已經支持了多線程（基於 worker 和 SharedArrayBuffer), 其中 SharedArrayBuffer 在有些瀏覽器不會默認開啓
• wasm 中申請的內存也須要手動釋放

技術自己不會有太多的風險，在於如何去使用。已經出現過基於 wasm 技術開發的挖礦程序，病毒等。
因爲 wasm 是更低級的二進制格式，網頁端在這方面的安全檢查和攔截還不成熟。現階段使用了 wasm 技術的網站可能會有更大的安全風險。

隨着各大瀏覽器對 wasm 的完善， wasm 能支持的功能會更多。好比 gc, 更好的異常處理,屆時能實現更高效和全面的功能。