最近的有個(gè)需求是在前端中實(shí)現(xiàn)對(duì)h264的解碼，并編輯渲染生成的yuv文件，達(dá)到的效果就是后端推送，h264的流，前端能夠?qū)崟r(shí)的在圖像中畫不同的方框。
先上個(gè)設(shè)備信息：
我的設(shè)備
滿足這個(gè)需求的第一步：下載emscripten
然后根據(jù)文檔安裝好。
執(zhí)行emcc -v出現(xiàn)下面的情況則代表安裝成功：
emcc (Emscripten gcc/clang-like replacement + linker emulating GNU ld) 1.40.0
clang version 12.0.0 (/b/s/w/ir/cache/git/chromium.googlesource.com-external-github.com-llvm-llvm--project 13a3d88666e2162a91dfcae3824198c9ba74cc7b)
Target: x86_64-apple-darwin19.4.0
Thread model: posix
InstalledDir: /Users/djytwy/Desktop/h264decode/emsdk/upstream/bin
shared:INFO: (Emscripten: Running sanity checks)
接下來下載ffmpeg
配置并編譯FFmpeg生成.a文件，需要的模塊用enable不需要的模塊全部disable掉：
我的構(gòu)建腳本(build_a.sh)如下：
# 配置所需要的ffmpeg模塊,并且構(gòu)建.a文件所用到的腳本
echo "開始配置ffmpeg......"
make clean
CPPFLAGS="-D_POSIX_C_SOURCE=200112 -D_XOPEN_SOURCE=600" \
emconfigure ./configure \
--prefix=$(pwd)/dist \
--cc="emcc" \
--cxx="em++" \
--ar="emar" \
--ranlib="emranlib" \ # MacOS必須指定的ranlib
--disable-asm \ # 禁用asm，asm會(huì)使用匯編webassemly不兼容
--disable-inline-asm \ # 禁用asm，asm會(huì)使用匯編webassemly不兼容
--cpu=generic \
--target-os=none \
--arch=x86_64 \
--enable-gpl \
--enable-version3 \
--enable-cross-compile \
--disable-logging \
--disable-programs \
--disable-ffmpeg \
--enable-static \
--enable-decoder=pcm_mulaw \
--enable-decoder=pcm_alaw \
--enable-decoder=adpcm_ima_smjpeg \
--enable-lto \
--disable-ffplay \
--disable-ffprobe \
--disable-doc \
--disable-swresample \
--disable-postproc \
--disable-avfilter \
--disable-pthreads \
--disable-w32threads \
--disable-os2threads \
--disable-network \
--disable-everything \
--enable-decoder=h264 \
--enable-decoder=hevc \
echo "配置完成，開始進(jìn)行FFmpeg的編譯,生成的文件將保存在dist文件中！"
make && make install
文件目錄結(jié)構(gòu)：
FFmpeg目錄結(jié)構(gòu)
若沒有意外的將會(huì)生成圖中
dist的文件目錄，在dist中的lib文件目錄下會(huì)生成所有用到的.a文件。接下來編譯js文件和wasm文件腳本(build_wasm.sh)如下：
rm ffmpeg.js ffmpeg.wasm
emcc ./dist/lib/libavcodec.a ./dist/lib/libavutil.a ./dist/lib/libswscale.a \
-s RESERVED_FUNCTION_POINTERS=1 \
-s INLINING_LIMIT=1 \
-s ALLOW_MEMORY_GROWTH=1 \
-s ABORTING_MALLOC=0 \
-s DISABLE_EXCEPTION_CATCHING=0 \
-s TOTAL_MEMORY=268435456 \
-s EXPORTED_FUNCTIONS="[ \
'_avcodec_register_all', \
'_avcodec_find_decoder', \
'_avcodec_alloc_context3', \
'_avcodec_free_context', \
'_avcodec_open2', \
'_av_free', \
'_av_frame_alloc', \
'_avcodec_close', \
'_avcodec_decode_video2', \
'_av_init_packet', \
'_av_free_packet', \
'_sws_freeContext', \
'_sws_getContext', \
'_sws_scale', \
'_av_new_packet', \
'_av_malloc', \
'_avpicture_get_size', \
'_avpicture_fill', \
'_av_get_cpu_flags', \
'_av_dict_set', \
'_av_dict_free']" \
-s EXTRA_EXPORTED_RUNTIME_METHODS="['cwrap','ccall','addFunction']" \
--llvm-lto 1 \
--memory-init-file 0 -O3 \
-o ffmpeg.js
echo "生成FFmpeg.js成功！"
沒有意外的會(huì)在當(dāng)前目錄生成ffmpeg.js和ffmpeg.wasm文件。
先說這么多，后面我們來講講怎么用
