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

ffmpegwasm文档
ffmpeg文档

该功能主要是借助了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

ffmpeg.wasm前端实现多张图片合成视频相关推荐

Ffmpeg 将视频分解成多张图片以及多张图片合成视频
1.将视频分解成多张图片 -y 覆盖以前的图片 %04d 输出的图片的命名格式 ffmpeg -y -i Desktop/FfmpegVideos/10.avi Desktop/FfmpegImage ...
Android 音视频 --------- FFmpeg将多张图片合成视频
FFmpeg将多张图片合成视频首先要计算出视频的总帧数: 总帧数 = duration * fps . duration是我们设定的视频的长度,fps是视频每秒的帧数.第二步将所有的图片文件放到一个 ...
python图片文字合成视频_利用Python将多张图片合成视频的实现
今天要做一个量子隧穿的的演示动画,在CSDN上看了很多大佬的文章,然而忙了接近半天才做好这件事.把踩过的坑记一下,同时这段代码也是值得记录的,因为以后也可能遇到类似的工作. 先上代码` import ...
moviepy多张图片合成视频
moviepy多张图片合成视频 import os import moviepy import moviepy.video.io.ImageSequenceClipdef pics2video(fra ...
用php把图片合成视频,图片音乐合成视频多张图片合成视频|图片合成视频软件...
在网络上我们经常见到的电子相册其本质就是图片音乐合成视频,使用一些图片合成视频软件将多张图片合成视频,外加点炫酷的转场特效,so easy的就能完成了.o(*≧▽≦)ツ想不想知道具体的操作过程?有兴 ...
ffmpeg将多张图片合成视频（小模块化）
一.环境 1.window7 64bit 2.本文中使用的ffmpeg模块为转mp4系列的dll模块,未使用官网中的代码文件.需要参考的可以去下面链接下载. http://download.csdn. ...
一次使用ffmpeg将多张图片合成视频的经历
使用的软件: ffmpeg 4.2.1 OS:fedora31 本次历经安装ffmpeg.安装libx264等操作. 正确的命令 ffmpeg -f image2 -r 1 -i img%3d.jpg ...
wasm + ffmpeg实现前端截取视频帧功能
https://blog.csdn.net/weixin_33772645/article/details/87940813
ffmpeg使用（多个帧合成视频）
帧生成视频命令: ffmpeg -threads 2 -y -r 24 -i %05d.jpg output.mp4 视频生成帧命令(按帧生成图片): ffmpeg -i checkpoints_ds ...

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

ffmpeg.wasm前端实现多张图片合成视频相关推荐

最新文章

热门文章