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

安装ffmpeg.js

npm install ffmpeg.js

gitHub

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

代码

渲染图片,拿到图片帧:

// 渲染+合成视频

async renderToVideo() {

for(var i=0;i

this.render_video()

}

this.imgToVideo()

},

// 渲染+合成视频

async render_video() {

// console.log('渲染,存图')

this.picNum++; // 图片数量

// 渲染相关

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.picNum}.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

//})

},

好文推荐

 您阅读本篇文章共花了：