ffmpeg.wasm前端实现多张图片合成视频

2022-07-08 08:08:41 浏览数 (1)

该功能主要是借助了ffmpeg这个库实现该项目是由vite vue3创建的首先进行ffmpeg安装

代码语言：javascript复制

yarn add @ffmpeg/ffmpeg @ffmpeg/core

使用

代码语言：javascript复制

import FFmpeg from "@ffmpeg/ffmpeg"
const { createFFmpeg, fetchFile } = FFmpeg
const ffmpeg = createFFmpeg({ log: false })
await ffmpeg.load()

这时候浏览器会报错ReferenceError: SharedArrayBuffer is not defined 这是因为谷歌浏览器的安全策略机制改变了

解决在vite.config.js添加http头，用localhost打开

代码语言：javascript复制

  server: {
    headers: {
      "Cross-Origin-Embedder-Policy": "require-corp",
      "Cross-Origin-Opener-Policy": "same-origin",
    },
  },

因为对上传进行单独的抽离这里只展示ffmpeg核心代码

代码语言：javascript复制

   for (let i in imgs.value) {
        ffmpeg.FS('writeFile', `${i}.png`, await fetchFile(imgs.value[i].raw))
    }

代码语言：javascript复制

 await ffmpeg.run('-r', '30', '-f', 'image2', '-i', '%d.png', 'video.mp4')

代码语言：javascript复制

 const data = ffmpeg.FS('readFile', 'video.mp4')
 videoUrl.value = URL.createObjectURL(new Blob([data.buffer], { type: 'video/mp4' }))

更多源代码可以下载我的Github仓库

代码语言：javascript复制

https://github.com/skywalk94/img-to-video

0 人点赞