您现在的位置是：首页 >技术教程 >ffmpeg编译成wasm网站首页技术教程

最近在看ffmpeg的源码
https://ffmpeg.xianwaizhiyin.net/ffplay/
https://crifan.github.io/media_process_ffmpeg/website/audio_process/

做个可运行的例子
代码在找了一堆，可用的版本放在这
https://github.com/killinux/ffmpeg_wasm_demo

1. 先把ffmpeg 编译成 wasm的可依赖库
2. em++ src/extract.cpp 和这些依赖库 编译成extract.js 和 extract.wasm 暴露出"_extract_image",“_extract_audio” 两个函数
3. 用js调用cpp的函数运行ffmpeg的能力
   做一个 ffmpeg抽帧和提取音频的例子

安装emscripten：

git clone https://github.com/emscripten-core/emsdk.git   
./emsdk install latest  
./emsdk activate latest  
source ./emsdk_env.sh  
emcc --version
emcc (Emscripten gcc/clang-like replacement + linker emulating GNU ld) 3.1.39  

安装编译 ffmpeg to wasm

git clone --depth 1 --branch n4.3.1 https://github.com/FFmpeg/FFmpeg  

参考
https://blog.csdn.net/fengfan_tracking/article/details/110129951

FFmpeg/libswscale/yuv2rgb.c
注释掉3行,否则编译报错

//    av_log(c, AV_LOG_WARNING,
//           "No accelerated colorspace conversion found from %s to %s.
",
//          av_get_pix_fmt_name(c->srcFormat), av_get_pix_fmt_name(c->dstFormat));

emconfigure ./configure --cc="emcc" --cxx="em++"  --ar="emar" --ranlib=emranlib --prefix=$(pwd)/dist --cpu=generic --target-os=none --arch=x86_32  --enable-cross-compile --disable-stripping --disable-programs --disable-doc --disable-devices --disable-postproc --disable-hwaccels --disable-parsers --disable-bsfs --disable-protocols --disable-indevs --disable-outdevs --disable-network --disable-asm --disable-debug  --enable-protocol=file

emmake make -j8
make install 

生成dist 下面的 include 和lib

cd dist
cp -r include lib /opt/mycode/ffmpeg/ffmpeg_wasm_demo/example-ffmpeg-extract

生成：ffmpeg_wasm_demo/example-ffmpeg-extract/dist/extract.js 和 ffmpeg_wasm_demo/example-ffmpeg-extract/dist/extract.wasm

cd /opt/mycode/ffmpeg/ffmpeg_wasm_demo/example-ffmpeg-extract
em++  -O3 src/extract.cpp  -I ./include lib/libavformat.a lib/libavcodec.a lib/libswscale.a lib/libswresample.a lib/libavutil.a -lworkerfs.js --pre-js src/worker.js -s WASM=1 -o dist/extract.js -s EXTRA_EXPORTED_RUNTIME_METHODS='["ccall", "cwrap"]' -s EXPORTED_FUNCTIONS='["_main", "_destroy", "_extract_image","_extract_audio","_malloc"]' -s ALLOW_MEMORY_GROWTH=1  -s TOTAL_MEMORY=33554432

最终类似这样，上传任意视频，抽取图频和音频
http://localhost/ffmpeg/ffmpeg_wasm_demo/example-ffmpeg-extract/demo/

if something wrong:

extract.js:1 Uncaught TypeError: Module._malloc is not a function
    at WebExtract.extractAudio (extract.js:1:3696)
    at self.onmessage (extract.js:1:4089)

EXPORTED_FUNCTIONS  add "_malloc"