业务场景: 和后端联调中视频监控需要把人员位置框出,返回的后端只给视频和框选位置
先上效果图
成功给视频添加了两个框
demo技术框架 vue3 + vite + typeScript
- 引入 ffmepg
npm i @ffmpeg/ffmpeg
2.项目中引入
import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg/dist/ffmpeg.min.js'
3.可能会出现的报错 SharedArrayBuffer is not defined
解决方案为在vite.config.js中写入下方代码
devServer: {
headers: {
'Cross-Origin-Opener-Policy': 'same-origin',
'Cross-Origin-Embedder-Policy': 'require-corp',
},
},
使用ffmepg
const ffmpeg = createFFmpeg({ log: true });
(async () => {
await ffmpeg.load();
// 读取文件 并在内存中保存为input.mp4
ffmpeg.FS('writeFile', 'input.mp4', await fetchFile('http://******.mp4')); // 也可以直接使用本地的file文件对象
// 添加矩形框
const filters = [
{
filter: "drawbox",
options: {
x: 100,
y: 100,
width: 200,
height: 100,
color: "red",
t: "fill",
}
},
{
filter: "drawbox",
options: {
x: 300,
y: 200,
width: 150,
height: 150,
color: "blue",
}
}
];
// ffmpeg.off('progress');
// 监听本次进度
ffmpeg.setProgress((e: any) => {
console.log('progress: ' + Math.round(e.ratio * 100) + '%');
});
await ffmpeg.run('-i', 'input.mp4', '-vf', filters.map(f => `${f.filter}=${Object.entries(f.options).map(([key, value]) => `${key}=${value}`).join(':')}`).join(','), 'output.mp4');
console.log('Complete');
// 读取输出文件
let arrayBuffer = ffmpeg.FS('readFile', 'output.mp4').buffer; // 读取缓存
// 创建下载链接并通过回调下载保存到本地
const fileUrl = URL.createObjectURL(new Blob([arrayBuffer])); // 转为Blob URL
})();
// 在组件销毁时调用该方法
function onStopConversion() {
// 停止运行ffmpeg.run
ffmpeg.exit();
// 释放内存
ffmpeg.FS('unlink', 'input.mp4');
ffmpeg.FS('unlink', 'output.mp4');
ffmpeg.reset();
}
## ffmpeg 功能很强大 基本上业务上对视频的操作 它都可以做到 唯一的不足就是太慢了 各位大佬有什么优化速度的建议 欢迎评论区讨论