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

明知山

发布于 2022-07-08 08:08:41

2.1K1

发布于 2022-07-08 08:08:41

文章被收录于专栏：前端开发随笔

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

yarn add @ffmpeg/ffmpeg @ffmpeg/core

使用

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打开

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

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

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

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

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

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

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

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022-07-07，如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度