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

6次阅读

共计 1642 个字符，预计需要花费 5 分钟才能阅读完成。

因为最近写货色的时候想把视频转成 gif，网上轻易搜了一下在线转换的网站，后果不仅要登微信，上传完之后还不给下载，很烦，于是决定本人写一个。尽管说必定有收费的网站能够用，然而本着学习的心态，加上本人做的话也自在，想要什么加什么，不必受约束，而且这些在线转换大多要微信关注公众号，这一点我很烦，收费就收费，免费就免费，非让我专一公众号，我非常承受不了。

于是去 github 上搜了，发现 ffmpeg 这个库，性能很弱小，能够做视频和音频的解决，目前我只须要做格局转换，不过也就是说前面能够基于他做更多的性能，比方简略的剪辑。临时不谈，先从简略做起，思考的太多就不想搞了，先满足目前的需要。

我是用 vue 写的，因为 vue 真的很不便很快，我看到也有人用 react 写的，能够去看这个我的项目 video-to-gif

我的我的项目地址
成果展现

这个 gif 展现图就是这个我的项目生成的，看着很卡是因为为了放大上传的大小，我只给了 3 帧，所以看着非常卡。

有一个中央须要留神，须要在 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;
}

正文完