在前端中使用FFmpeg（MacOS）

最近的有个需求是在前端中实现对h264的解码，并编辑渲染生成的yuv文件，达到的效果就是后端推送，h264的流，前端能够实时的在图像中画不同的方框。
先上个设备信息：

我的设备

满足这个需求的第一步：下载emscripten
然后根据文档安装好。
执行emcc -v出现下面的情况则代表安装成功：

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掉：
我的构建脚本(build_a.sh)如下：

# 配置所需要的ffmpeg模块,并且构建.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会使用汇编webassemly不兼容
    --disable-inline-asm \  # 禁用asm，asm会使用汇编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 "配置完成，开始进行FFmpeg的编译,生成的文件将保存在dist文件中！"
make && make install

文件目录结构：

FFmpeg目录结构

若没有意外的将会生成图中dist的文件目录，在dist中的lib文件目录下会生成所有用到的.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成功！"

没有意外的会在当前目录生成ffmpeg.js和ffmpeg.wasm文件。
先说这么多，后面我们来讲讲怎么用