async function compress() { showSection("loading"); const filesize = document.getElementById("filesize").value; const filesizeUnit = document.getElementById("filesize-unit").value; const file = document.getElementById("file-input").files[0]; updateProgress(0); const ffmpeg = new FFmpegWASM.FFmpeg(); ffmpeg.on("progress", data => { console.log(data); updateProgress(data.progress); }); await ffmpeg.load({ coreURL: "/assets/scripts/core/package/dist/umd/ffmpeg-core.js" }); await ffmpeg.writeFile(file.name, await readFromBlob(file)); await ffmpeg.exec(["-i", file.name, "-preset", "veryfast", "-fs", filesize + filesizeUnit, "compressed.mp4"]); const video = await ffmpeg.readFile("compressed.mp4"); location.href = URL.createObjectURL(new Blob([video.buffer], { type: "video/mp4" })); } function updateProgress(progress) { const percent = (progress * 100).toFixed(1) + "%"; document.getElementById("progress-percentage").innerText = percent; document.getElementById("progress-indicator").style.clipPath = `rect(0 ${percent} 100% 0)`; } function openFileSelector() { document.getElementById("file-input").click(); } function selectFile() { setTimeout(() => { const file = document.getElementById("file-input").files[0]; document.getElementById("uploaded-video").src = URL.createObjectURL(file); document.getElementById("uploaded-video").load(); hideElements("#file-drop-area", "#file-input-spacing"); showElements("#uploaded-video", "#change-file"); }, 200); } // https://github.com/ffmpegwasm/ffmpeg.wasm/blob/main/packages/util/src/index.ts function readFromBlob(blob) { return new Promise((resolve, reject) => { const fileReader = new FileReader(); fileReader.onload = () => { const { result } = fileReader; if (result instanceof ArrayBuffer) { resolve(new Uint8Array(result)); } else { resolve(new Uint8Array()); } }; fileReader.onerror = (event) => { reject( Error( `File could not be read! Code=${event?.target?.error?.code || -1}` ) ); }; fileReader.readAsArrayBuffer(blob); }); }