WebAssembly 在 Web 端的應用 - 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。

        更詳細介紹，參考：https://webassembly.org

二、如何使用

        WebAssembly 現在支援從 C/C++, go, rust 編譯成 wasm 子產品。使用 emscripten sdk, 可以從 C/C++ 源碼直接編譯成 wasm 檔案，然後在網頁中 直接加載使用。

參考 https://emscripten.org/docs/getting_started/Tutorial.html 入門。

參考 https://emscripten.org/docs/compiling/Building-Projects.html 編譯項目。

三、wasm 的限制和風險

        wasm 的限制與不便：

• 運作在一個沙盒中，網頁和 js 的限制， wasm 同樣會有，比如跨域
• 不能直接讀取使用者計算機磁盤上的檔案
• 能使用的最大記憶體有限制，各個浏覽器的限制都不同，一般為 2G
• 現階段已經支援了多線程（基于 worker 和 SharedArrayBuffer), 其中 SharedArrayBuffer 在有些浏覽器不會預設開啟
• wasm 中申請的記憶體也需要手動釋放

    風險：

        技術本身不會有太多的風險，在于如何去使用。已經出現過基于 wasm 技術開發的挖礦程式，病毒等。由于 wasm 是更低級的二進制格式，網頁端在這方面的安全檢查和攔截還不成熟。現階段使用了 wasm 技術的網站可能會有更大的安全風險。随着各大浏覽器對 wasm 的完善， wasm 能支援的功能會更多。比如 gc, 更好的異常處理,屆時能實作更高效和全面的功能。

四、補充

WebGL介紹：

        H5使用Canvas來繪圖，但是預設的2d模式隻能繪制RGB格式，使用FFmpeg解碼出來的視訊資料是YUV格式，想要渲染出來需要進行顔色空間轉換，可以使用FFmpeg的libswscale子產品進行轉換，為了提升性能，可以使用WebGL來硬體加速，可參考項目： https://github.com/p4prasoon/YUV-Webgl-Video-Player

五、應用

Web播放器

        主要技術點：WASM、FFmpeg、WebGL、Web Audio等。實作方案簡介：

        1、 使用FFmpeg來做解封裝(demux)和解碼(decoder)， 将音視訊解碼相關的功能子產品用C/C++等進行獨立實作，然後通過Emscripten編譯（emcc）出.js+.wasm檔案，供浏覽器js調用，編譯方法可參考： https://blog.csdn.net/Jacob_job/article/details/79434207

         2、 web端編寫播放器實作，借助Web Worker、WebGL等基礎進行播放器性能調優等      

參考：

1.官網：https://emscripten.org/docs/getting_started/Tutorial.html

２．中文資料參考：https://www.cntofu.com/book/150/zh/ch1-quick-guide/ch1-02-helloworld.md

３．https://blog.csdn.net/weixin_41191739/article/details/110391941?spm=1001.2014.3001.5501

４、https://www.kanzhun.com/jiaocheng/506030.html

5、https://codechina.csdn.net/mirrors/sonysuqin/WasmVideoPlayer?utm_source=csdn_github_accelerator