Skip to content

cheetah-capture是基于ffmpeg的wasm截取视频帧工具

Notifications You must be signed in to change notification settings

wanwu/cheetah-capture

Folders and files

NameName
Last commit message
Last commit date

Latest commit

author
mengxiaoxuan
Jun 11, 2024
ba6cdb6 · Jun 11, 2024

History

89 Commits
May 27, 2024
Jun 11, 2024
Nov 18, 2022
Jun 11, 2024
Jun 11, 2024
Jun 11, 2024
Nov 18, 2022
Nov 18, 2022
Nov 18, 2022
May 26, 2024
Nov 18, 2022
Jan 3, 2023
Jun 5, 2024
Nov 18, 2022
Jun 11, 2024
Jun 11, 2024
Jun 11, 2024
Nov 20, 2022

Repository files navigation

cheetah-capture

cheetah
基于自定义编译ffmpeg的截帧工具,支持Mp4、Mov、Avi、Webm、Mkv等主流格式。

API

整体调用流程,调用initCapture方法,传入worker和wasm路径,返回cheetahCapture对象,调用cheetahCapture上的方法进行mount文件、抽帧、获取元数据等操作,结束后调用free进行释放。

initCapture({workerPath, wasmPath}) => Promise<capture> 初始化worker环境,拉取wasm,返回capture方法 接受参数如下

参数 类型 含义 是否必须
workerPath URL / string woker路径,eg:node_modules/dist/capture.worker.js,因为有woker有同源限制,你可以传递BlobUrl来解决 y
wasmPath URL / string wasm路径,eg:node_modules/dist/capture.worker.wasm y

mountFile: (file: File) => string 挂载文件,返回mountFile的fileName,接受参数如下 接受参数如下

参数 类型 含义 是否必须
path string workerfs建立文件目录 n,默认/working
file File / blob 文件 y

为了兼容V0.1.x版本,capture方法兼容不调用mountFile可以直接使用,传入mountFile需要的参数,会在capture内部进行mountFile,如果您选择这种方式我们将会主动接管你的生命周期,为你进行内存释放操作。 capture: (args) => void 在worker里执行截帧方法 接受参数如下

参数 类型 含义 是否必须
info number[] / number 传递number是按照数目抽帧,传递数组是指定抽帧的时间 y
path string workerfs建立文件目录 n
file File / blob 文件 n,v0.1必须
onChange (prev: PrevType, now: nowType, info: {width: number, height: number, duration: number}) => void 当抽帧结果变化的回调 n
onSuccess (prev: PrevType) => void 当抽帧结束并成功的回调 n
onError (errmeg: string) => void 当抽帧过程出现错误的回调 n

getMetadata: (args: {info: string; })=> void 获取视频元数据,具体args参数如下

参数 类型 含义 是否必须
info string 要获取的元数据的key y
onSuccess (args: {meta: string}) => void 读取成功的回调,无论是否有该key都会执行,没有返回的空字符串 n

free: (args)=> void 释放文件占用的存储空间,接受参数如下,释放的是文件,目录文件夹不会被释放

参数 类型 含义 是否必须
onSuccess () => void 成功的回调 n
  • 使用例子可以参考 demo/index.html

依赖库&编译工具

  • ffmpeg-3.4.8
  • emscripten

准备工作

  git pull
  # Download and install the latest SDK tools.
  ./emsdk install latest
  # Make the "latest" SDK "active" for the current user. (writes .emscripten file)
  ./emsdk activate latest
   # Activate PATH and other environment variables in the current terminal
   source ./emsdk_env.sh
  • emsdk 需要安装于代码库根目录

编译脚本

  • 安装依赖 npm i,执行script目录下的脚本 script下面是编译脚本 build_ffmpeg-3.4.8.sh 编译本地c编译环境的ffmpeg的lib库 build-emcc.sh 编译emcc环境需要的ffmpeg的lib库,编译结果lib/ffmpeg-emcc build_wasm.sh 使用ems编译wasm 和 glue code & worker code build.sh 同上以及生成dts类型

如果只修改了c的代码和ts代码,直接执行sh build_wasm.sh即可。

demo运行

demo文件夹下index.html 使用live server启动即可,live-server --port=5501

调试环境准备

在已经完成准备工作的前提

  • 若进行c环境调试 scripts目录下执行sh build_ffmpeg-3.4.8.sh编译你的对应环境的lib,sh reload.sh执行capture.c 文件。
  • 进行js环境调试,先执行build-emcc.sh生产emcc环境需要的ffmpeg的lib库,如若已有库直接执行 sh build-wasm.sh,包含npm run webpack-capture以及emcc编译命令,前者生成index.js以及capture.worker.js,后者生成capture.worker.js(包含emcc的胶水代码) 和capture.worker.wasm
  • html环境引入,直接引入index.js即可,umd变量cheetahCapture

关于版本控制

版本的hash不会在类库层面去做 倾向于业务方使用打包工具来做。

提交及发包

本地提交npm run commit 更新并写入changelognpm run release