学习笔记:
@ffmpeg/ffmpeg是一款可以在web网页界面通过WebAssembly方式进行视频处理的npm工具库。
@ffmpeg/ffmpeg:
npm地址 : www.npmjs.com/package/@ff…
github地址 : github.com/ffmpegwasm/…
通过阅读官网文档可以看出整个工具库分为三个核心部分:
@ffmpeg/core:核心部分。用来打包st(single thread)或mt(multy thread)wasm以及生成胶水代码。
@ffmpeg/ffmpeg:位于主线程,用于生成实例并创建用于进行主线程与wasm通信的worker线程调用ffmpeg。
@ffmpeg/util:用于下载文件转换格式或动态加载不同版本的wasm。
想要打包出可调用的ffprobe.wasm需要对@ffmpeg/core部分进行修改。
首先拉取git目录:
通过后续分析目录可知想要打包出ffprobe.wasm及胶水代码需要对图中的1345部分进行修改。
首先简单分析下Makefile文件。
可以看出共有四个打包指令dev,dev-mt,pro,pro-mt。分别对应开发版本的ST,MT及生产版本的ST,MT。并通过build-st及build-mt执行最终的build部分。清空对应目录并通过docker打包所需的wasm及js文件输出到core或core-mt目录。
其次分析下dockerFile文件:
首先通过Makefile中传入的环境变量构建emsdk镜像。
随后编译出ffmpeg依赖的函数库.h文件,执行ffmpeg的构建。
最终将做过修改的fftools目录拷贝至镜像中。执行构建ffmpeg.wasm的构建脚本。并最终将生成的文件目录拷贝到core或core-mt的dist目录中。
最后看下ffmpeg.wasm的打包脚本文件。
可以分析出只需要对框选部分进行调整创建出一个ffprobe-wasm.sh的脚本文件并通过docker执行即可。
接下来进行调整。
首先需要在build目录下新建ffprobe-wasm.sh文件。将同级的ffmpeg-wasm.sh文件拷贝过来后进行如下修改。
- 修改导出方法命。即最终在worker线程中通过loadScripts加载后的全局函数名。
2.在胶水代码配置目录新建ffprobe目录并修改sh文件中EXPROTED_FUNCTIONS;EXPROTED_RUNTIME_METHODS及--pre-js前置函数部分。
3. 修改emcc入口文件部分,添加ffprobe.c 删除不必要入口文件。
随后修改src/bind/ffrobe目录中的bind.js及export.js文件
1.bind.js,修改DEFAULT_ARGS变量及exec函数,DEFAULT_ARGS参数会作为exec调用ffmprobe.c——ffprobe方法的前缀入参传入
2.export.js,修改EXPROTED_FUNCTIONS数组。该数组为emcc配置参数用来判断需要暴露的.c文件中的函数方法名。
随后对Dockerfile文件进行修改
添加ffmprobe-wasm.sh脚本的执行及将最终输出结果拷贝至dist/ffmprobe目录中。最好也将build ffmpeg.wasm部分简单修改这样目录结构会更加清晰。
最终修改下src/fftools/ffprobe.c的入口文件
最终中断执行make dev 或 make dev-mt。
就可以在packages/core或packages/core-mt的dist目录中看到我们想要生成的ffprobe的胶水代码及wasm文件啦。
简单测试下
可以看到worker中已经加载了wasm文件及js文件。
简单测试下指令
OK 没有问题!
PS: 上述部分在修改C文件时添加init初始化是因为在终端中执行时每次都会调用一个新的ffprobe。而在wasm中如果不进行参数的初始化的话会在第二条ffprobe的指令进入时报错。大概描述就是因为第一次调用时入口文件的参数已经被占用了。第二条的指令不会成功执行。所以需要在ffprobe.c的ffprobe方法的起点添加一个init初始化保证每次调用都能成功。