纯前端 利用ffmpeg.js将图片帧合成为视频

安装ffmpeg.js

npm install ffmpeg.js

gitHub

https://github.***/Kagami/ffmpeg.js/blob/master/README.md#files

 

代码

渲染图片,拿到图片帧:

// 渲染+合成视频
			async renderToVideo() {
				for(var i=0;i<this.frameNum;++i){
					this.render_video()
				}
				this.imgToVideo()
			},
			// 渲染+合成视频
			async render_video() {
				// console.log('渲染,存图')
				this.pi***um++; // 图片数量
        // 渲染相关
				if (this.mixer) {
					this.mixer.update(1.0/24.0) // // 更新混合器相关的时间
				}
				this.renderer.render(this.scene, this.camera) //执行渲染操作
				var img = this.renderer.domElement.toDataURL() //拿到图片 // 默认为'image/png'格式
				var imgArrayBuffer = this.Base64toArrayBuffer(img)
				this.imgArrayBufferData.push({ name: `${this.pi***um}.png`, data: imgArrayBuffer})
			},
			// 将base64编码的图片转换为arraybuffer
			Base64toArrayBuffer(base64Data) {
				var base64 = base64Data.replace(/^data:image\/\w+;base64,/, "");
				const rawData = window.atob(base64);
				const outputArray = new Uint8Array(rawData.length);
			
				for (let i = 0; i < rawData.length; ++i) {
					outputArray[i] = rawData.charCodeAt(i);
				}
				return outputArray;
			},

合成视频:

async imgToVideo() {
				const ffmpeg = require("ffmpeg.js/ffmpeg-mp4.js");
				var time = this.videoTime.toString()
				let stdout = "";
				let stderr = "";
				console.log("test1");
				const result = ffmpeg({
					MEMFS: this.imgArrayBufferData,
					arguments: ['-f', 'image2', '-i', '%d.png', "-r","24",'-t', time,"-pix_fmt","yuv420p", "-preset","ultrafast",'video.mp4'],
					
					print: function(data) { stdout += data + "\n"; },
					printErr: function(data) { stderr += data + "\n"; },
					onExit: function(code) {
					    // console.log("Process exited with code " + code);
					    // console.log(stdout);
					    // console.log(stderr);
					  }
				});
				console.log(result);
				// console.log(result.MEMFS[0].data);
				
				// 网页下载视频
				this.videoUrl = URL.createObjectURL(new Blob([result.MEMFS[0].data], {
					type: 'video/mp4'
				}))
				const element = document.getElementById('container')
				const link = document.createElement('a')
				link.href = this.videoUrl
				link.setAttribute('download', `${new Date().getTime()}.mp4`)
				link.click()
				element.appendChild(link)
				
				// 小程序中下载视频
				//this.videoArr = result.MEMFS[0].data
				//jWeixin.miniProgram.navigateTo({
				//	url: '/pages/downloadVideo/downloadVideo?videoArr=' + this.videoArr
				//})
			},