WebAssembly技术_加载ffmpeg在Web端调用解码

1. 前言

WebAssembly 就是运行在 Web 平台上的 Assembly。Assembly 是指汇编代码，是直接操作 CPU 的指令代码，比如 x86 指令集上的汇编代码有指令集、寄存器、栈等等设计，CPU 根据汇编代码的指导进行运算。汇编代码相当于 CPU 执行的机器码能够转换成的人类适合读的一种语言。

Wasm的技术优势:

性能高效：WASM采用二进制编码，在程序执行过程中的性能优越；

存储成本低：相对于文本格式，二进制编码的文本占用的存储空间更小；

多语言支持：用户可以使用 C/C++/RUST/Go等多种语言编写智能合约并编译成WASM格式的字节码；

2. emcc编译的ffmpeg静态库

（1）CSDN上的-

-: https://download.csdn.net/download/xiaolong1126626497/82868215

（2）GitHub仓库-

https://github.com/wang-bin/avbuild

https://sourceforge.net/projects/avbuild/files/

https://sourceforge.net/projects/avbuild/files/wasm/

（3）这里有编译好的ffmpeg.wasm文件，前端JS可以直接调用完成视频转码等功能

https://github.com/ffmpegwasm/ffmpeg.wasm

const fs = require('fs'); const { createFFmpeg, fetchFile } = require('@ffmpeg/ffmpeg'); const ffmpeg = createFFmpeg({ log: true }); (async () => { await ffmpeg.load(); ffmpeg.FS('writeFile', 'test.avi', await fetchFile('./test.avi')); await ffmpeg.run('-i', 'test.avi', 'test.mp4'); await fs.promises.writeFile('./test.mp4', ffmpeg.FS('readFile', 'test.mp4')); process.exit(0); })();

（4）ffmpeg编译wasm文件的源码，可以自行编译wasm文件:

https://github.com/ffmpegwasm/ffmpeg.wasm-core

3. 调用ffmpeg库-打印版本号

3.1 准备ffmpeg库文件

3.2 编写C语言代码

下面只是编写了一个打印版本号的函数，用于测试ffmpeg的库和相关函数是否可以正常调用。

#include #include #include #include #include #include #include #include #include //获取版本号 void print_version() { unsigned codecVer = avcodec_version(); int ver_major, ver_minor, ver_micro; ver_major = (codecVer >> 16) & 0xff; ver_minor = (codecVer >> 8) & 0xff; ver_micro = (codecVer) & 0xff; printf("当前ffmpeg的版本:avcodec version is: %d=%d.%d.%d\n", codecVer, ver_major, ver_minor, ver_micro); }

3.3 编译生成wasm和js文件

emcc wasm_ffmpeg/wasm_ffmpeg.c ffmpeg-4.4-wasm/lib/libavformat.a ffmpeg-4.4-wasm/lib/libavcodec.a ffmpeg-4.4-wasm/lib/libswresample.a ffmpeg-4.4-wasm/lib/libavutil.a -I "ffmpeg-4.4-wasm/include" -s EXPORTED_FUNCTIONS="['_malloc','_free','ccall','allocate','UTF8ToString','_print_version']" -s WASM=1 -s ASSERTIONS=0 -s TOTAL_MEMORY=167772160 -s ALLOW_MEMORY_GROWTH=1 -o out/ffmpeg_decoder.js

编译成功后生成的wasm和js文件:

3.3 编写index.html代码

编写HTML文件调用js文件里的接口。

4.4 开启服务器

命令行运行命令，开启HTTP服务器，方便测试:

python -m http.server

4.5 测试效果

打开谷歌浏览器，输入http://127.0.0.1:8000/index.html地址，按下F12打开控制台，点击页面上的按钮看控制台输出。

（1）输入地址，打开网页

（2）按下F12，打开控制台

（3）选择一个MP4文件载入测试。获取一帧图片。

Linux

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。