JS如何调用WebAssembly的api

最新推荐文章于 2022-03-19 14:27:31 发布

Jacob_job

最新推荐文章于 2022-03-19 14:27:31 发布

阅读量3.7w

点赞数 12

分类专栏：音视频 web前端 WebAssembly 文章标签： WebAssembly JS ffmpeg 音视频

本文链接：https://blog.youkuaiyun.com/Jacob_job/article/details/79434207

版权

本文介绍了将ffmpeg编译为WebAssembly文件，并在JavaScript中调用其API进行音视频软解码的过程。首先，通过build_decoder.sh和build_decoder_wasm.sh脚本生成静态库及libffmpeg.wasm和libffmpeg.js。接着，详细阐述了在JS中导入libffmpeg.js，封装C语言函数为JS接口，并如何使用这些接口进行实际操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这里以我之前做的一个项目为例。项目是把ffmpeg编译成WebAssembly文件，然后在js中调用，实现纯前端代码软解码音视频数据。

在linux下编译的

一、编译ffmpeg生成静态库

build_decoder.sh

echo "Beginning Build:"
rm -r dist
mkdir -p dist
cd ffmpeg-3.3.3
make clean
emconfigure ./configure --cc="emcc" --cxx="em++" --ar="emar" --prefix=$(pwd)/../dist --enable-cross-compile --target-os=none --arch=x86_32 --cpu=generic \
    --enable-gpl --enable-version3 --disable-avdevice --disable-avformat --disable-swresample --disable-postproc --disable-avfilter \
    --disable-programs --disable-logging --disable-everything --enable-decoder=hevc --enable-decoder=h264 \
    --disable-ffplay --disable-ffprobe --disable-ffserver --disable-asm --disable-doc --disable-devices --disable-network \
    --disable-hwaccels --disable-parsers --disable-bsfs --disable-debug --disable-protocols --disable-indevs --disable-outdevs \
make
make install
cd ..
./build_decoder_wasm.sh

二、编译静态库生成libffmpeg.wasm和libffmpeg.js

build_decoder_wasm.sh

rm libffmpeg.wasm libffmpeg.js 
export TOTAL_MEMORY=134217728 
export EXPORTED_FUNCTIONS="[ \
    '_avcodec_register_all', \
    '_avcodec_find_decoder', \
    '_avcodec_alloc_context3', \
    '_avcodec_open2', \
    '_av_free', \
    '_av_frame_alloc', \
    '_avcodec_close', \
    '_avcodec_decode_video2_js', \
    '_avcodec_get_image_width_js', \
    '_avcodec_get_image_height_js', \
    '_avcodec_get_chroma_format_js', \
    '_avcodec_get_image_plane_js', \
    '_avcodec_get_image_pitch_js', \
    '_avcodec_get_image_bit_depth_js', \
    '_avcodec_close_AVCodecContext_js', \
    '_avcodec_flush_buffers', \
    '_imgScaleChange_js', \
    '_drawRect_js', \
    '_setPrivacyMaskRect_js', \

最低0.47元/天解锁文章