Skip to content

liyincheng/ffmpeg-wasm-video-to-picture

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

10 Commits
 
 
 
 
 
 
 
 

Repository files navigation

借助ffmpeg + wasm实现网页截取视频帧功能

1. cfile/simple.c

这个是纯C处理,把一个视频的第一帧保存为pcm图片,编译方法:

gcc simple.c -lavutil -lavformat -lavcodec `pkg-config --libs --cflags libavutil` `pkg-config --libs --cflags libavformat` `pkg-config --libs --cflags libavcodec` `pkg-config --libs --cflags libswscale` -o simple

使用方法,传递一个视频路径,就会在本地生成一个图片

./simple mountain.mp4

2. cfile/web.c proccess.c process.h

这个是网页版的核心C代码,使用以下命令编译成wasm:

emcc web.c process.c ../lib/libavformat.bc ../lib/libavcodec.bc ../lib/libswscale.bc ../lib/libswresample.bc ../lib/libavutil.bc -Os -s WASM=1 -o index.html -s EXTRA_EXPORTED_RUNTIME_METHODS='["ccall", "cwrap"]' -s ALLOW_MEMORY_GROWTH=1 -s TOTAL_MEMORY=16777216

注意上面的.bc文件顺序不能颠倒,被依赖的文件要往后放
这个会生成index.wasm和index.js,在html引入

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

它就会自动加载index.wasm文件

3. demo

这个是编译好的文件,需要使用http服务才能使用wasm:

# 在demo目录执行
# npm install -g http-server
http-server

然后访问http://localhost:8080/main.html

About

借助ffmpeg + wasm实现网页截取视频帧图像功能

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages