1. 前言

WebAssembly/wasm WebAssembly 或者 wasm 是一個(gè)可移植、體積小、加載快并且兼容 Web 的全新格式。

WebAssembly的名字帶個(gè)匯編Assembly，所以我們從其名字上就能知道其意思是給Web使用的匯編語(yǔ)言，是通過(guò)Web執(zhí)行低級(jí)二進(jìn)制語(yǔ)法。

但是WebAssembly并不是直接用匯編語(yǔ)言，而提供了抓換機(jī)制（LLVM IR），把高級(jí)別的語(yǔ)言（C，C++和Rust）編譯為WebAssembly，以便有機(jī)會(huì)在瀏覽器中運(yùn)行。主要是解決目前JS語(yǔ)言的效率問(wèn)題，設(shè)計(jì)立足點(diǎn)為快速，內(nèi)存安全和開(kāi)放。所以是一種運(yùn)行機(jī)制，一種新的字節(jié)碼格式(.wasm)

官網(wǎng)介紹:https://www.wasm.com.cn/

2. 安裝ubuntu 20.04

ubuntu20.04 安裝emcc編譯最方便，只需要簡(jiǎn)單的幾個(gè)命令即可完成。

鏡像下載地址: http://mirrors.aliyun.com/ubuntu-releases/20.04/

下載之后，安裝系統(tǒng)。

我這里使用VMware Workstation Pro 15.5 虛擬機(jī)安裝系統(tǒng)。

安裝的過(guò)程就不多說(shuō)了，常規(guī)步驟，都比較簡(jiǎn)單。

系統(tǒng)安裝完畢之后需要安裝vmtools工具才可以放大自適應(yīng)桌面，訪問(wèn)共享目錄，支持復(fù)制粘貼。 如果在下拉菜單里，安裝vm tools工具的按鈕是灰色的，需要將CD掛載選項(xiàng)，改成自動(dòng)檢測(cè)，然后關(guān)閉系統(tǒng)，關(guān)閉虛擬機(jī)，重新再打開(kāi)，再啟動(dòng)系統(tǒng)，再次打開(kāi)下拉菜單，就可以選擇工具安裝了。

將彈出的壓縮包拷貝出來(lái)，解壓，運(yùn)行里面的腳本，然后一直回車(chē)確認(rèn)，最后就可以安裝完成。 注意: 安裝過(guò)程中有no 這種選項(xiàng)的時(shí)候要注意，要輸入yes，在按下回車(chē)，不然就直接結(jié)束安裝了。

3. ubuntu 20.04安裝emcc編譯器

安裝emcc編譯器之前需要安裝python，ubuntu20.04 系統(tǒng)安裝之后，系統(tǒng)默認(rèn)是安裝了python 的， 這個(gè)就不用管了。

emcc編譯器的代碼在GitHub倉(cāng)庫(kù)里，需要安裝Git工具，這個(gè)系統(tǒng)沒(méi)自動(dòng)安裝，需要自己安裝。

wbyq@wbyq:~/work_pc/WebAssembly/emsdk$ sudo apt  install git

編譯代碼需要用到make命令，make也沒(méi)有安裝，需要手動(dòng)安裝。

安裝之后，就可以繼續(xù)下面的步驟了。

（1）創(chuàng)建工作目錄，存放接下來(lái)下載的相關(guān)文件

xl@xl:~/work$ mkdir wasm
 xl@xl:~/work$ cd wasm/

（2）從倉(cāng)庫(kù)克隆項(xiàng)目

xl@xl:~/work/wasm$ git clone https://github.com/emscripten-core/emsdk.git 
 正克隆到 'emsdk'...
 remote: Enumerating objects: 3138, done.
 remote: Total 3138 (delta 0), reused 0 (delta 0), pack-reused 3138
 接收對(duì)象中: 100% (3138/3138), 1.66 MiB | 174.00 KiB/s, 完成.
 處理 delta 中: 100% (2043/2043), 完成.
 wbyq@wbyq:~/work_pc/WebAssembly$ ls
 emsdk
 wbyq@wbyq:~/work_pc/WebAssembly$ cd emsdk/
 wbyq@wbyq:~/work_pc/WebAssembly/emsdk$ ls
 bazel            emscripten-releases-tags.json  emsdk_env.bat   emsdk_env.ps1        emsdk.ps1                 legacy-emscripten-tags.txt  README.md
 docker           emsdk                          emsdk_env.csh   emsdk_env.sh         emsdk.py                  LICENSE                     scripts
 emcmdprompt.bat  emsdk.bat                      emsdk_env.fish  emsdk_manifest.json  legacy-binaryen-tags.txt  llvm-tags-64bit.txt         test

（3）安裝最新的編譯器

wbyq@wbyq:~/work/wasm/emsdk$ ./emsdk install latest
 Resolving SDK alias 'latest' to '3.1.4'
 Resolving SDK version '3.1.4' to 'sdk-releases-upstream-39e60dda6945cfcd6487725bdb1361ae7975173f-64bit'
 Installing SDK 'sdk-releases-upstream-39e60dda6945cfcd6487725bdb1361ae7975173f-64bit'..
 Installing tool 'node-14.18.2-64bit'..

等待片刻，即可全部下載完成。

（4）激活SDK

xl@xl:~/work/wasm/emsdk$ ./emsdk activate latest

（5）生效環(huán)境變量

xl@xl:~/work/wasm/emsdk$ source emsdk_env.sh

（6）查看編譯器版本詳細(xì)信息

該命令只能在當(dāng)前終端生效，可以將命令加到etc/profile里，重啟系統(tǒng)全局生效。

4. 編寫(xiě)C/C++代碼測(cè)試

下面編寫(xiě)一個(gè)C語(yǔ)言代碼，導(dǎo)出函數(shù)接口，給前端JS調(diào)用測(cè)試。

（1）編寫(xiě)簡(jiǎn)單的C代碼，提供1個(gè)測(cè)試函數(shù)

#include < emscripten.h >
 #include < stdio.h >
 #include < stdlib.h >
 #include < string.h >
 ?
 int func_sum(int x, int y) 
 {
   return x + y;
 }

（2）編譯測(cè)試

emcc app.c -o app.js -s EXPORTED_FUNCTIONS="['_func_sum','_malloc','_free']" -s WASM=1

EXPORTED_FUNCTIONS 里填寫(xiě)可以導(dǎo)出給js調(diào)用的函數(shù)接口。

（3）編譯成功生成app.js和app.wasm

（4）編寫(xiě)一個(gè)HTML文件。名稱(chēng)設(shè)置為: index.html

< !doctype html >
 < html lang="en-us" >
   < head >
     < meta charset="utf-8" >
     < meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
     < title >wasm test< /title >
   < /head >
   
   < body >  
   
     < script type='text/javascript' >   
       function run1()
       {
         console.log('100+50=',_func_sum(100,50))
       }
     < /script >
     
     < input type="button" value="100+50=?" onclick="run1()" / >
     
     < script async type="text/javascript" src="hello.js" >< /script >
   < /body >
 < /html >

（5）啟動(dòng)HTTP服務(wù)器

python3 -m http.server

（6）打開(kāi)瀏覽器訪問(wèn)

按下F12，查看控制臺(tái)的輸出。

http://127.0.0.1:8000/index.html

5. 編譯ffmpeg

（1）下載ffmpeg源碼 切換分支到4.1

git clone https://git.ffmpeg.org/ffmpeg.git
 cd ffmpeg
 git checkout -b 4.1 origin/release/4.1

（2）編譯

emconfigure ./configure --cc="emcc" --enable-cross-compile --target-os=none --arch=x86_32 --cpu=generic --disable-ffplay --disable-ffprobe --disable-asm --disable-doc --disable-devices --disable-pthreads --disable-w32threads --disable-network --disable-hwaccels --disable-parsers --disable-bsfs --disable-debug --disable-protocols --disable-indevs --disable-outdevs --enable-protocol=file

（3）編寫(xiě)C代碼，測(cè)試ffmpeg解碼，編譯

emcc app.c ffmpeg-4.4-wasm/lib/libavformat.a ffmpeg-4.4-wasm/lib/libavcodec.a  ffmpeg-4.4-wasm/lib/libswresample.a ffmpeg-4.4-wasm/lib/libavutil.a -I "ffmpeg-4.4-wasm/include" -s EXPORTED_FUNCTIONS="['_malloc','_free','ccall','allocate','UTF8ToString','_write_file','_print_version','_get_FileSize','_read_file','_GetVideoFrame','_GetVideoWidth','_GetVideoDuration','_GetVideoHeight','_DeleteMemory','_find_Decoder']" -s WASM=1 -s ASSERTIONS=0 -s TOTAL_MEMORY=167772160 -s ALLOW_MEMORY_GROWTH=1 -o out/ffmpeg_decoder.js

（4）開(kāi)啟服務(wù)器

python -m http.server

（5）調(diào)用測(cè)試ffmpeg

審核編輯：湯梓紅