WebAssembly或稱wasm是一種新的低階程式語言，應用於瀏覽器內的客戶端。開發者能運用自己熟悉的程式語言編譯並接近原生的速度於 Web 環境中執行，藉由虛擬機器引擎在瀏覽器內執行，可以部署在網頁客戶端以及應用伺服器端。
FFmpeg是一個開放原始碼的自由軟體，可以執行音訊和視訊多種格式的錄影、轉檔、串流功能，包含了libavcodec使用於音訊和視訊的編解碼器函式庫，以及libavformat音訊與視訊格式轉換函式庫。基于WebAssembly技術發展，實現在瀏覽器上使用FFmpeg進行影音功能處理。
二. WebAssembly編譯環境
1. 下載編譯工具--clone emsdk git專案
git clone https://github.com/emscripten-core/emsdk.git
2. 安裝SDK
$(EMASK_PATH)/emsdk install latest
$(EMASK_PATH)/emsdk activate latest
3. 設定環境變數
source $(EMASK_PATH)/emsdk_env.sh
三. FFmpeg編譯流程
1. 下載FFmpeg ----clone FFmpeg git專案
git clone https://github.com/FFmpeg/FFmpeg
2. 配置FFmpeg編譯環境
# emcripten環境編譯需要额外定義CPPFLAGS變數。
# 使用--cc="emcc"来指定編譯器為emcc。emcc將使用clang對目標設置成LLVM。
# $(YOUR_INSTALL_PATH)為安裝程序至指定目錄。
$ CPPFLAGS="-D_POSIX_C_SOURCE=200112 -D_XOPEN_SOURCE=600" \
LDFLAGS="-s USE_PTHREADS -s INITIAL_MEMORY=33554432" \
emconfigure $(FFMPEG_PATH)/configure --cc="emcc" --cxx="em++" --ar="emar" --ranlib="emranlib" --prefix="$(YOUR_INSTALL_PATH)" --enable-cross-compile -- target-os=none --arch=x86_64 --cpu=generic --disable-ffplay --disable-ffprobe --disable-asm --disable-doc --disable-devices --disable-pthreads --disable-w32threads --disable-hwaccels --disable-stripping --enable-optimizations --disable-decoders --disable-encoders --disable-protocols --disable-demuxers --disable-muxers --disable-bsfs --disable-filters --disable-indevs --disable-outdevs --enable-avresample --enable-protocol=file --enable-protocol=pipe --disable-parsers --disable-network --enable-decoder=pcm_alaw --enable-decoder=pcm_mulaw --enable-decoder=hevc --enable-decoder=h264
3. 使用流程
藉由WebAssembly技術，實現在瀏覽器端呼叫FFmpeg API完成H264/HEVC原始資料解碼輸出YUV數據。wasm編譯結果將產生兩個檔案，一個是包含FFmpeg函示庫的wasm檔案(libffmpeg.wasm)，另一個是js檔案(libffmpeg.js)。當網頁透過javascript引用libffmpeg.js會載入libffmpeg.wasm並可在網頁端呼叫使用解碼流程。流程如下圖:
編譯產生的libffmpeg.wam檔案提供三個API，流程如下圖:
i. initDecoder: 初始化解碼器流程
ii. decodePacket: 解碼傳入影像數據流程
iii. closeDecoder: 關閉解碼器流程
四. 結果
參考資料
1. https://www.ffmpeg.org/
2. https://github.com/webassembly
3. https://developer.mozilla.org/en-US/docs/WebAssembly
評論