web: barebones core for ffmpeg & remux page

web/i18n/en/tabs.json

@@ -3,5 +3,6 @@
     "settings": "settings",
     "updates": "updates",
     "donate": "donate",
-    "about": "about"
+    "about": "about",
+    "remux": "remux"
 }

web/package.json

@@ -45,8 +45,13 @@
     "dependencies": {
         "@fontsource-variable/noto-sans-mono": "^5.0.20",
         "@fontsource/ibm-plex-mono": "^5.0.13",
+        "@imput/ffmpeg-core": "^0.0.3",
+        "@imput/ffmpeg-types": "^0.12.3",
+        "@imput/ffmpeg-util": "^0.12.1",
+        "@imput/ffmpeg.wasm": "^0.12.11",
         "@imput/version-info": "workspace:^",
         "@tabler/icons-svelte": "3.6.0",
+        "@vitejs/plugin-basic-ssl": "^1.1.0",
         "sveltekit-i18n": "^2.4.2",
         "ts-deepmerge": "^7.0.0"
     }

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>

web/vite.config.ts

@@ -1,9 +1,22 @@
 import { sveltekit } from "@sveltejs/kit/vite";
 import { defineConfig, searchForWorkspaceRoot } from "vite";
 
+import basicSSL from "@vitejs/plugin-basic-ssl";
+
 export default defineConfig({
     plugins: [
-        sveltekit()
+        basicSSL(),
+        sveltekit(),
+        {
+            name: "isolation",
+            configureServer(server) {
+                server.middlewares.use((_req, res, next) => {
+                    res.setHeader("Cross-Origin-Opener-Policy", "same-origin");
+                    res.setHeader("Cross-Origin-Embedder-Policy", "require-corp");
+                    next();
+                })
+            }
+        }
     ],
     build: {
         rollupOptions: {
@@ -24,6 +37,10 @@ export default defineConfig({
             allow: [
                 searchForWorkspaceRoot(process.cwd())
             ]
-        }
-    }
+        },
+        proxy: {}
+    },
+    optimizeDeps: {
+        exclude: ["@imput/ffmpeg.wasm"]
+    },
 });