安装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.frameNum;++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编码的图片转换为arraybufferBase64toArrayBuffer(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.videoUrllink.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//})},