web: barebones core for ffmpeg & remux page

web/src/components/sidebar/Sidebar.svelte

@@ -7,6 +7,8 @@
     import IconDownload from "@tabler/icons-svelte/IconDownload.svelte";
     import IconSettings from "@tabler/icons-svelte/IconSettings.svelte";
 
+    import IconRepeat from "@tabler/icons-svelte/IconRepeat.svelte";
+
     import IconComet from "@tabler/icons-svelte/IconComet.svelte";
     import IconHeart from "@tabler/icons-svelte/IconHeart.svelte";
     import IconInfoCircle from "@tabler/icons-svelte/IconInfoCircle.svelte";
@@ -27,6 +29,9 @@
             <SidebarTab tabName="save" tabLink="/">
                 <IconDownload />
             </SidebarTab>
+            <SidebarTab tabName="remux" tabLink="/remux">
+                <IconRepeat />
+            </SidebarTab>
             <SidebarTab tabName="settings" tabLink={settingsLink}>
                 <IconSettings />
             </SidebarTab>

web/src/lib/ffmpeg.ts

@@ -0,0 +1,63 @@
+import ffmpegCore from "@imput/ffmpeg-core?url";
+import ffmpegCoreWASM from "@imput/ffmpeg-core/wasm?url";
+
+import { FFmpeg } from "@imput/ffmpeg.wasm";
+import { fetchFile } from "@imput/ffmpeg-util";
+
+export default class FFmpegWrapper {
+    initialized: boolean;
+    ffmpeg: FFmpeg;
+    concurrency: number;
+
+    constructor() {
+        this.ffmpeg = new FFmpeg();
+        this.initialized = false;
+
+        this.concurrency = Math.min(4, navigator.hardwareConcurrency);
+    }
+
+    async init() {
+        if (this.initialized) {
+            this.ffmpeg.terminate();
+        } else {
+            this.initialized = true;
+            this.ffmpeg.on("log", ({ message }) => {
+                console.log(message);
+            });
+        }
+
+        await this.ffmpeg.load({
+            coreURL: ffmpegCore,
+            wasmURL: ffmpegCoreWASM,
+            workerURL: "/ffmpeg-core.worker.js",
+        });
+    }
+
+    terminate() {
+        this.initialized = false;
+        return this.ffmpeg.terminate();
+    }
+
+    async renderFile(url: string, type: string, format: string) {
+        const input = `input.${format}`;
+
+        await this.ffmpeg.writeFile(
+            input,
+            await fetchFile(url)
+        )
+
+        await this.ffmpeg.exec([
+            '-threads', this.concurrency.toString(),
+            '-i', input,
+            '-c', 'copy',
+            `output.${format}`
+        ]);
+
+        const data = await this.ffmpeg.readFile(`output.${format}`);
+        const finalBlob = URL.createObjectURL(
+            new Blob([data], { type: `${type}/${format}` })
+        );
+
+        return finalBlob
+    }
+}

web/src/routes/ffmpeg-core.worker.js/+server.ts

@@ -0,0 +1,12 @@
+// workaround so that vite doesn't fuck up the worker file
+// and we can serve it from the same page at the same time
+
+import ffmpegCoreWorker from "@imput/ffmpeg-core/worker?raw";
+
+export function GET() {
+    return new Response(ffmpegCoreWorker, {
+        headers: {
+            "Content-Type": "text/javascript"
+        }
+    })
+}

web/src/routes/remux/+page.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+    import FFmpegWrapper from "$lib/ffmpeg";
+
+    import { openURL } from "$lib/download";
+
+    const loadFile = async() => {
+        const fileInput = document.createElement("input");
+        fileInput.type = "file";
+        fileInput.accept = "video/*,audio/*";
+
+        fileInput.onchange = async (e: Event) => {
+            const target = e.target as HTMLInputElement;
+            const reader = new FileReader();
+
+            if (target.files?.length === 1) {
+                const file = target.files[0];
+                const type = file.type.split("/")[0];
+                const format = file.type.split("/")[1];
+
+                if (!["video", "audio"].includes(type))
+                    return;
+
+                reader.readAsArrayBuffer(file);
+
+                const fileBlob = URL.createObjectURL(
+                    new Blob([file], { type: "video/mp4" })
+                );
+
+                const ff = new FFmpegWrapper();
+
+                await ff.init();
+                const render = await ff.renderFile(fileBlob, type, format);
+
+                openURL(render);
+            }
+        };
+
+        fileInput.click();
+    };
+</script>
+
+<div id="remux-container">
+    <button on:click={() => loadFile()}>
+        load file
+    </button>
+</div>
+
+<style>
+    #remux-container {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+    }
+</style>