使用vue3搭建自己的视频处理工具

shellingfordly

前言

由于最近写东西的时候想把视频转成gif,网上随便搜了一下在线转换的网站,结果不仅要登微信,上传完之后还不给下载,很烦,于是决定自己写一个。虽然说肯定有免费的网站可以用,但是本着学习的心态,加上自己做的话也自由,想要什么加什么,不用受约束,而且这些在线转换大多要微信关注公众号,这一点我很烦,免费就免费,收费就收费,非让我专注公众号,我十分接受不了。

于是去github上搜了,发现ffmpeg这个库,功能很强大,可以做视频和音频的处理,目前我只需要做格式转换,不过也就是说后面可以基于他做更多的功能,比如简单的剪辑。暂时不谈,先从简单做起,考虑的太多就不想搞了,先满足目前的需求。

介绍

我是用vue写的,因为vue真的很方便很快,我看到也有人用react写的,可以去看这个项目video-to-gif

output.gif

注意

有一个地方需要注意,需要在vite里面配置这个东西,好像是和跨域有关,有兴趣的自己去搜,我也不是很明白,反正要是不写就会给你一个错误。

export default defineConfig({
  server: {
    headers: {
      "Cross-Origin-Opener-Policy": "same-origin",
      "Cross-Origin-Embedder-Policy": "require-corp",
    }
  }
}
Error: SharedArrayBuffer could not be used.

也是由于要设置headers,将打包后的静态页面直接用作github pages时就会得到这个错误,需要启动服务去设置headers,所以想要体验的话暂时需要clone项目到本地跑,后面我会部署在服务器上,想要体验的话可以关注本项目

git clone https://github.com/shellingfordly/my-tools.git
cd my-tools
pnpm i
pnpm run dev
open http://localhost:3080/

代码

转换的核心代码就是调用ffmpeg提供的api,将文件传给它,配置输出的各种参数。

页面上就做一个文件上传,和一个配置的input就行,其实还是挺简单的,启动服务就可以直接在网页上用了

export async function useFFmpeg(
  file: File,
  config: ConfigType,
  progressFn: ProgressCallback = () => {}
) {
  const ffmpeg = await loadFFmpeg();
  const { fetchFile } = getFFmpeg();

  ffmpeg.setProgress(progressFn);

  const {
    width: defaultWidth,
    height: defaultHeight,
    duration,
  } = await getVideoSize(file);
  const {
    frameRate = 25,
    width = defaultWidth,
    height = defaultHeight,
    rangeStart = 0,
    rangeEnd = duration,
    fileType,
  } = config;

  ffmpeg.FS("writeFile", file.name, await fetchFile(file));

  await ffmpeg.run(
    "-i",
    file.name,
    "-r",
    `${frameRate}`,
    "-ss",
    `${rangeStart}`,
    "-to",
    `${rangeEnd}`,
    "-vf",
    `scale=${width}:${height},fade=t=in:st=${rangeStart}:d=0.05`,
    `output.${fileType}`
  );

  return ffmpeg.FS("readFile", `output.${fileType}`).buffer;
}
阅读 699

普通前端程序员

66 声望
8 粉丝
0 条评论

普通前端程序员

66 声望
8 粉丝
宣传栏