纯前端实现 vue 利用ffmpeg.wasm将图片合成视频前端利用ffmpeg.wasm将图片合成视频 vue 1

参考:

安装:

npm install @ffmpeg/core@0.10.0 -S

npm install @ffmpeg/ffmpeg@0.9.8 -S

引入

import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg';

初始化

需要把这三个文件复制放到public文件夹下面

使用

data() {
    return {
        imgArr: [],
        ffmpeg: null,
        videoTime: 10,
    }
},

                  async imgToVideo() {
                        this.ffmpeg = createFFmpeg({
                            corePath: "/ffmpeg-core.js",
                            // log: true,
                       });
                      if (!this.ffmpeg.isLoaded()) {
                          await this.ffmpeg.load()
                      }
			// fetchFile(media): 用于从各种资源中获取文件的辅助函数。
                            // this.imgArr[]为图片数组,里面包含所需合成图片的base64编码
			for (let i = 0; i < this.imgArr.length; i++) {
			this.ffmpeg.FS('writeFile', `${i}.png`, await fetchFile(this.imgArr[i]))
			}
                            
			var time = this.videoTime.toString()
			console.log('time', time)
			await this.ffmpeg.run('-r', '24', '-f', 'image2', '-i', '%d.png', '-t', time, 'video.mp4') // 所有参数都为字符串
			const data = this.ffmpeg.FS('readFile', 'video.mp4')
			this.videoUrl = URL.createObjectURL(new Blob([data.buffer], {
				type: 'video/mp4'
			}))
			console.log('视频地址:', this.videoUrl)
			document.querySelector("#videoContainer").style.display = "block";
		  },