diff --git a/.gitignore b/.gitignore index 58ecfbaf11..aa5a7831fa 100644 --- a/.gitignore +++ b/.gitignore @@ -9,3 +9,4 @@ node_modules # Local Netlify folder .netlify .DS_Store +public/resources/movie/Big_Buck_Bunny_180_10s.webm diff --git a/app/pages/PageEnigma/js/editor.js b/app/pages/PageEnigma/js/editor.js index 6e962f2ffb..ec0c381318 100644 --- a/app/pages/PageEnigma/js/editor.js +++ b/app/pages/PageEnigma/js/editor.js @@ -15,7 +15,7 @@ import { SMAAPass } from 'three/addons/postprocessing/SMAAPass.js'; import { SAOPass } from 'three/addons/postprocessing/SAOPass.js'; import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js'; import { BokehPass } from 'three/addons/postprocessing/BokehPass.js'; -import { FFmpeg } from '@ffmpeg/ffmpeg'; +import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg'; if (typeof window !== 'undefined') { import('ccapture.js').then(module => { @@ -69,8 +69,8 @@ class Editor { this.capturer = null; this.frame_buffer = []; this.render_timer = 0; + this.fps_number = 3 this.cap_fps = 60; - this.ffmpeg = null; // Timeline settings. this.playback = false; @@ -149,8 +149,6 @@ class Editor { this.renderer.setAnimationLoop(this.update_loop.bind(this)); //this.create_geometry("Box"); - - this.ffmpeg = new FFmpeg(); } // Configure post processing. @@ -339,24 +337,22 @@ class Editor { } } - stopPlayback() { + async stopPlayback() { if (this.capturer != null) { this.capturer.stop(); this.capturer.save(); } this.render_mode(); - this.ffmpeg.writeFile('input.webm', fetchFile('https://raw.githubusercontent.com/ffmpegwasm/testdata/master/Big_Buck_Bunny_180_10s.webm')); - this.ffmpeg.exec(['-i', 'input.webm', 'output.mp4']); - } + this.playback_location= 0; - frameCounter() { - if (this.playback) { - this.playback_location++; - let max = this.cap_fps * this.max_length; - if (this.playback_location >= max) { - this.togglePlayback(); - } - } + let inputFile = '/resources/movie/Big_Buck_Bunny_180_10s.webm'; + + const ffmpeg = createFFmpeg({ log: true }); + await ffmpeg.load(); + ffmpeg.FS('writeFile', 'input.webm', await fetchFile(inputFile)); + await ffmpeg.run('-i', 'input.webm', '-c:v', 'libx264', 'output.mp4'); + + this.rendering = false; } startPlayback() { @@ -421,7 +417,7 @@ class Editor { this.render_scene(); if (this.capturer != null) { this.capturer.capture(this.renderer.domElement); } // Record scene. - this.frameCounter(); + } // Render the scene to the camera. @@ -434,6 +430,7 @@ class Editor { } if (this.rendering) { + this.playback_location++; let imgData = this.renderer.domElement.toDataURL(); this.frame_buffer.push(imgData); this.render_timer += this.clock.getDelta(); @@ -460,7 +457,7 @@ class Editor { //document.body.removeChild(link); } - if(this.render_timer >= this.fps_number) { + if(this.playback_location >= this.fps_number) { this.stopPlayback(); } } diff --git a/package-lock.json b/package-lock.json index dc68f11dea..d499fecfa4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6,8 +6,9 @@ "": { "name": "gottagofast_v0.0.0", "dependencies": { - "@ffmpeg/core": "^0.12.6", - "@ffmpeg/ffmpeg": "^0.12.10", + "@ffmpeg/core": "0.11.0", + "@ffmpeg/ffmpeg": "0.11.6", + "@ffmpeg/util": "0.12.0", "@fortawesome/fontawesome-svg-core": "^6.5.1", "@fortawesome/free-solid-svg-icons": "^6.5.1", "@fortawesome/react-fontawesome": "^0.2.0", @@ -1279,30 +1280,35 @@ } }, "node_modules/@ffmpeg/core": { - "version": "0.12.6", - "resolved": "https://registry.npmjs.org/@ffmpeg/core/-/core-0.12.6.tgz", - "integrity": "sha512-PrjWBTfGn2WVn9T7wGnzfFwChbqWeZc7tM9vvJZVRadYFUDakfzy7W0LpYC0cvvK0xT82qlBsk38lQhJ/Hps5A==", - "engines": { - "node": ">=16.x" - } + "version": "0.11.0", + "resolved": "https://registry.npmjs.org/@ffmpeg/core/-/core-0.11.0.tgz", + "integrity": "sha512-9Tt/+2PMpkGPXUK8n6He9G8Y+qR6qmCPSCw9iEKZxHHOvJ9BE/r0Fccj+YgDZTlyu6rXxc9x6EqCaFBIt7qzjA==" }, "node_modules/@ffmpeg/ffmpeg": { - "version": "0.12.10", - "resolved": "https://registry.npmjs.org/@ffmpeg/ffmpeg/-/ffmpeg-0.12.10.tgz", - "integrity": "sha512-lVtk8PW8e+NUzGZhPTWj2P1J4/NyuCrbDD3O9IGpSeLYtUZKBqZO8CNj1WYGghep/MXoM8e1qVY1GztTkf8YYQ==", + "version": "0.11.6", + "resolved": "https://registry.npmjs.org/@ffmpeg/ffmpeg/-/ffmpeg-0.11.6.tgz", + "integrity": "sha512-uN8J8KDjADEavPhNva6tYO9Fj0lWs9z82swF3YXnTxWMBoFLGq3LZ6FLlIldRKEzhOBKnkVfA8UnFJuvGvNxcA==", "dependencies": { - "@ffmpeg/types": "^0.12.2" + "is-url": "^1.2.4", + "node-fetch": "^2.6.1", + "regenerator-runtime": "^0.13.7", + "resolve-url": "^0.2.1" }, "engines": { - "node": ">=18.x" + "node": ">=12.16.1" } }, - "node_modules/@ffmpeg/types": { - "version": "0.12.2", - "resolved": "https://registry.npmjs.org/@ffmpeg/types/-/types-0.12.2.tgz", - "integrity": "sha512-NJtxwPoLb60/z1Klv0ueshguWQ/7mNm106qdHkB4HL49LXszjhjCCiL+ldHJGQ9ai2Igx0s4F24ghigy//ERdA==", + "node_modules/@ffmpeg/ffmpeg/node_modules/regenerator-runtime": { + "version": "0.13.11", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz", + "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==" + }, + "node_modules/@ffmpeg/util": { + "version": "0.12.0", + "resolved": "https://registry.npmjs.org/@ffmpeg/util/-/util-0.12.0.tgz", + "integrity": "sha512-8sHCW8H/ngqVhbRvCCX4e4uDNgZVoz8uNRry1zphIyzdX6flfBa2TmVwJ4g9/Qw//eAubEnuHaSxDGWWxcOTjg==", "engines": { - "node": ">=16.x" + "node": ">=18.17.0" } }, "node_modules/@fortawesome/fontawesome-common-types": { @@ -4206,7 +4212,6 @@ "version": "0.1.13", "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.13.tgz", "integrity": "sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==", - "dev": true, "optional": true, "dependencies": { "iconv-lite": "^0.6.2" @@ -4216,7 +4221,6 @@ "version": "0.6.3", "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz", "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==", - "dev": true, "optional": true, "dependencies": { "safer-buffer": ">= 2.1.2 < 3.0.0" @@ -6762,6 +6766,11 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/is-url": { + "version": "1.2.4", + "resolved": "https://registry.npmjs.org/is-url/-/is-url-1.2.4.tgz", + "integrity": "sha512-ITvGim8FhRiYe4IQ5uHSkj7pVaPDrCTkNd3yq3cV7iZAcJdHTUMPMEHcqSOy9xZ9qFenQCvi+2wjH9a1nXqHww==" + }, "node_modules/is-weakmap": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/is-weakmap/-/is-weakmap-2.0.1.tgz", @@ -8749,6 +8758,25 @@ "node": ">= 0.6" } }, + "node_modules/node-fetch": { + "version": "2.7.0", + "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz", + "integrity": "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==", + "dependencies": { + "whatwg-url": "^5.0.0" + }, + "engines": { + "node": "4.x || >=6.0.0" + }, + "peerDependencies": { + "encoding": "^0.1.0" + }, + "peerDependenciesMeta": { + "encoding": { + "optional": true + } + } + }, "node_modules/node-gyp": { "version": "8.4.1", "resolved": "https://registry.npmjs.org/node-gyp/-/node-gyp-8.4.1.tgz", @@ -10714,6 +10742,12 @@ "url": "https://github.com/privatenumber/resolve-pkg-maps?sponsor=1" } }, + "node_modules/resolve-url": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz", + "integrity": "sha512-ZuF55hVUQaaczgOIwqWzkEcEidmlD/xl44x1UZnhOXcYuFN2S6+rcxpG+C1N3So0wvNI3DmJICUFfu2SxhBmvg==", + "deprecated": "https://github.com/lydell/resolve-url#deprecated" + }, "node_modules/resolve.exports": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/resolve.exports/-/resolve.exports-2.0.2.tgz", @@ -11958,6 +11992,11 @@ "integrity": "sha512-y/mWCZinnvxjTKYhJ+pYxwD0mRLVvOtdS2Awbgxln6iEnt4rk0yBxeSBHkGJcPucRiG0e55mwWp+g/05rsrd6w==", "dev": true }, + "node_modules/tr46": { + "version": "0.0.3", + "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz", + "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==" + }, "node_modules/trim-lines": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/trim-lines/-/trim-lines-3.0.1.tgz", @@ -13060,11 +13099,25 @@ "node": ">= 8" } }, + "node_modules/webidl-conversions": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz", + "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==" + }, "node_modules/webm-writer": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/webm-writer/-/webm-writer-1.0.0.tgz", "integrity": "sha512-xafP4mzUqht03HBXP0Ov2YGsxfD08uncad9fQeshYwQXrcP6Z/4uxd1IUaGKqKigFPAgaD9xb6JEKA8SXLQMLA==" }, + "node_modules/whatwg-url": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz", + "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==", + "dependencies": { + "tr46": "~0.0.3", + "webidl-conversions": "^3.0.0" + } + }, "node_modules/which": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/which/-/which-3.0.1.tgz", diff --git a/package.json b/package.json index 17d31ba3e7..e558ee3989 100644 --- a/package.json +++ b/package.json @@ -11,8 +11,9 @@ "typecheck": "tsc" }, "dependencies": { - "@ffmpeg/core": "^0.12.6", - "@ffmpeg/ffmpeg": "^0.12.10", + "@ffmpeg/core": "0.11.0", + "@ffmpeg/ffmpeg": "0.11.6", + "@ffmpeg/util": "0.12.0", "@fortawesome/fontawesome-svg-core": "^6.5.1", "@fortawesome/free-solid-svg-icons": "^6.5.1", "@fortawesome/react-fontawesome": "^0.2.0",