A recent requirement is to implement decoding of H264 in the front end and edit the yuV file generated by rendering. The effect is to push the h264 stream to the back end, and the front end can draw different boxes in the image in real time. Previous device information:

The first step to satisfying this requirement is to download EmScripten and install it according to the documentation. After emcc -v is executed, the installation succeeds if the following information occurs:

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 13 a3d88666e2162a91dfcae3824198c9ba74cc7b) Target: x86_64 - apple - darwin19.4.0 Thread model: posix InstalledDir: /Users/djytwy/Desktop/h264decode/emsdk/upstream/bin shared:INFO: (Emscripten: Running sanity checks)Copy the code

Next, download the ffmpeg configuration and compile the ffmpeg generation. A file, use enable to disable all required modules: my build script (build_A. Sh) is as follows:

Echo "start 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 must specify ranlib --disable-asm \ # disable asm, --disable-inline-asm \ # Disable ASM, Asm will use assembly Webassemly incompatible -- 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" make && make installCopy the code

File directory structure:If nothing unexpected will be generated in the graphdistAll the. A files used will be generated in the lib file directory in dist. Then compile the js file and wasm file script (build_wasm.sh) as follows:

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 "generated ffmpeg.js successfully!"Copy the code

No surprise ffmpeg.js and ffmpeg.wasm files will be generated in the current directory. So that’s it, and then we’ll talk about how to use it, okay