前端引入ffmepg 对视频画矩形贴图

业务场景： 和后端联调中视频监控需要把人员位置框出，返回的后端只给视频和框选位置

先上效果图

成功给视频添加了两个框

demo技术框架 vue3 + vite + typeScript

1. 引入 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 功能很强大 基本上业务上对视频的操作 它都可以做到  唯一的不足就是太慢了  各位大佬有什么优化速度的建议  欢迎评论区讨论