纯前端 利用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.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编码的图片转换为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
                //})
            },