前端获取视频帧率/帧数

实现方案：

使用C语言书写解析MP4文件的方法，编译为wasm，与JS协同用来解析上传的MP4文件，获取视频帧数。

优：体积较小（共30KB）

缺：现在功能相当有限，只实现了MP4获取帧数的功能

网页Demo 获取MP4视频帧数http://vividlipi.gitee.io/gerframecountformp4其他方案：

1. 使用MediaInfo前端解决方案

优：支持多种视频，几乎全部视频信息

缺：体积稍微大一点（3M左右）

2. 使用MP4Box.js方案

优：有simple和all版本可选，根据需要的功能选择不同的版本，simple版本30K左右，all版本200K左右

缺：支持MP4

使用本方案可从仓库下载getMP4FrameCount.js和getMP4FrameCount.wasm后引入项目，使用方法请参看 2.2.1 和 2.2.2

下面介绍项目开发与测试的配置

1. WASM本地环境

初次接触WASM请先按照开发者引导[1] 搭建本地编译环境，书写helloworld程序。

2. 获取MP4视频帧数

2.1 编译C文件

emcc -O2 -o getMP4FrameCount.js getMP4FrameCount.c -s WASM=1 -s ALLOW_MEMORY_GROWTH=1 -s "EXTRA_EXPORTED_RUNTIME_METHODS=['ccall']"

编译生成文件：

getMP4FrameRate.js
getMP4FrameRate.wasm

-O2开启优化等级为2级，压缩编译产出文件的大小

2.2 JS中调用C函数

2.2.1 引用JS文件

<script src="./getMP4FrameCount.js"></script>

2.2.2 获取MP4视频帧数

<input type="file" onchange="handleFile(this)" /><script>function handleFile(e){const file = e.files[0];if (!(file instanceof Blob)) return;const reader = new FileReader();reader.onloadend = evt => {const uint8_t_arr = new Uint8Array(evt.target.result);const uint8_t_ptr = window.Module._malloc(uint8_t_arr.length);window.Module.HEAPU8.set(uint8_t_arr, uint8_t_ptr);var result = window.Module.ccall('getFrameCount', null, [null, null],[uint8_t_ptr, uint8_t_arr.length])window.Module._free(uint8_t_ptr);}reader.readAsArrayBuffer(file);}
</script>

3. 运行查看

在文件目录启动服务器：emrun --no_browser --port 8080 .
浏览器打开http://localhost:8080/
上传一个MP4文件，页面将显示视频帧数

4. 运行测试

4.1 生成测试视频

（测试视频已准备，这里介绍如何生成测试视频，有兴趣可以尝试更多测试视频） resource文件下有一张纯黑色图片：black.png，使用ffmpeg命令生成视频，命令如下

ffmpeg -loop 1 -i black.png -c:v libx264 -t 5 -pix_fmt yuv420p -vf scale=320:240 125.mp4

-t 5表示生成一个10s的视频
125.mp4为输出结果文件，可任意指定。此命令生成视频帧率为25fps

4.2 编译文件

4.2.1 编译测试文件

gcc -c test.c

-c参数表示不链接

4.2.2 编译功能文件

gcc -c getMP4FrameCount.c -D TEST

-c参数表示定义宏，默认定义宏为 1[11]

4.2.3 链接

gcc -o testRun test.o getMP4FrameCount.o

4.3 执行测试

./testRun

root# gcc -c test.c
root# gcc -c getMP4FrameCount.c -D TEST
root# gcc -o testRun test.o getMP4FrameCount.o
root# ./testRunTEST PASS: ../resource/375.mp4TEST PASS: ../resource/125.mp4
root#

以上命令忽略了切换目录的操作，执行时候需要留意目录下是否有对应的文件

参考链接

WASM中文-开发者引导
官网-Emscripten安装
简书-调用C中的自定义方法
StackOverflow-如何在前端传递文件给WASM
在线查看MP4文件BOX组织
CSDN-从MP4文件获取帧率
博客园-mp4文件格式解析
MDN-C to WASM
MDN-Compile Exist C to WASM
Emscripting a C library to Wasm
GCC编译 Preprocessor-Options