Add Dockerfile

- Run ffmpeg-web from a Docker container (#1) - Everything is downloaded to the dist folder, so that no outside connection needs to be made
Dinoosauro · Nov 12, 2023 · eaf8056 · eaf8056
1 parent 03684cb
commit eaf8056
Show file tree

Hide file tree

Showing 5 changed files with 108 additions and 3 deletions.
diff --git a/Dockerfile b/Dockerfile
@@ -0,0 +1,10 @@
+# syntax=docker/dockerfile:1
+
+FROM node:18-alpine
+WORKDIR /app
+COPY . .
+RUN npm install webpack-cli
+RUN npm install express
+RUN node webHost.js
+CMD ["node", "localServer.js"]
+EXPOSE 3000
diff --git a/index.html b/index.html
@@ -724,6 +724,6 @@ <h3 data-translate="licenses">Licenses:</h3>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jszip.min.js"
         integrity="sha256-rMfkFFWoB2W1/Zx+4bgHim0WC7vKRVrq6FTeZclH1Z4=" crossorigin="anonymous"></script>
         <script>// Adding separated JS files if debugging with local server
-            if (location.hostname === "localhost" && location.pathname.indexOf("dist") === -1) {let a = document.createElement("script"); a.src = "./script.js"; document.body.append(a);}
+            if (false) {let a = document.createElement("script"); a.src = "./script.js"; document.body.append(a);}
         </script>
 </body>
diff --git a/localServer.js b/localServer.js
@@ -0,0 +1,10 @@
+const express = require('express');
+const app = express();
+const customHeadersAppLevel = function (req, res, next) {
+    res.append("Cross-Origin-Embedder-Policy", "require-corp");
+    res.append("Cross-Origin-Opener-Policy", "same-origin");
+    next();
+ };
+ app.use(customHeadersAppLevel);
+app.use(express.static(__dirname + '/dist'));
+app.listen(3000, () => console.log('Listening on port 3000'));
diff --git a/script.js b/script.js
@@ -1,3 +1,4 @@
+(async() => {
 // Register service worker for offline access
 if ('serviceWorker' in navigator) {
     let registration;
@@ -531,7 +532,17 @@ function addSimpleCut() { // Trim content  from a start time to an end time
     }
 }
 const { createFFmpeg, fetchFile } = FFmpeg;
-let ffmpeg = createFFmpeg({ log: false, corePath: 'https://unpkg.com/@ffmpeg/[email protected]/dist/ffmpeg-core.js' }); // Currently ffmpeg.wasm will remain on version 0.11.0 until significant performance improvements will be made
+let localFfmpeg = {
+    isLocal: false,
+    out: ""
+}
+async function getFfmpegInBlob() {
+    let res = await fetch(".jsres/ffmpeg-core.js");
+    let blob = await res.blob();
+    localFfmpeg.out = blob;
+}
+if (!localFfmpeg.isLocal) await getFfmpegInBlob();
+let ffmpeg = createFFmpeg({ log: false, corePath: localFfmpeg.isLocal ? new URL('jsres/ffmpeg-core.js', document.location).href : 'https://unpkg.com/@ffmpeg/[email protected]/dist/ffmpeg-core.js'}); // Currently ffmpeg.wasm will remain on version 0.11.0 until significant performance improvements will be made
 let progressMove = true;
 let consoleText = "";
 ffmpeg.setLogger(({ type, message }) => { // Set an event every time there's an update from ffmpeg.wasm: add the message to the progress div
@@ -1205,4 +1216,5 @@ document.getElementById("quitFfmpegGeneral").addEventListener("change", () => {d
 document.getElementById("quitFfmpegTimestamp").addEventListener("change", () => {document.getElementById("quitFfmpegTimestamp").checked ? localStorage.setItem("ffmpegWeb-TimestampQuit", "a") : localStorage.setItem("ffmpegWeb-TimestampQuit", "a")});
 if (localStorage.getItem("ffmpegWeb-GeneralQuit") === "a") document.getElementById("quitFfmpegGeneral").checked = false;
 if (localStorage.getItem("ffmpegWeb-TimestampQuit") === "a") document.getElementById("quitFfmpegTimestamp").checked = true;
-document.getElementById("quitProcess").addEventListener("click", () => resetFfmpeg());
+document.getElementById("quitProcess").addEventListener("click", () => resetFfmpeg());
+})();
diff --git a/webHost.js b/webHost.js
@@ -0,0 +1,73 @@
+const fs = require("fs");
+const process = require("child_process");
+const path = require("path");
+process.execSync("npx webpack");
+fs.writeFileSync(`dist${path.sep}out.js`, fs.readFileSync(`dist${path.sep}out.js`, "utf-8").replace("isLocal:!1", "isLocal:!0"));
+// Download fonts from Google Fonts
+let usefulCss = ``;
+(async () => {
+    let getFonts = await fetch(`https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@700&family=Work+Sans&display=woff`, {
+        headers: {
+            "Accept": "text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8",
+            "User-Agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.1 Safari/605.1.15"
+        }
+    });
+    let text = await getFonts.text();
+    let latin = text.split("/* latin */");
+    for (let i = 1; i < latin.length; i++) {
+        let getUrl = latin[i].substring(latin[i].indexOf("src: url(")).replace("src: url(", "");
+        getUrl = getUrl.substring(0, getUrl.indexOf(")"));
+        let getFont = await fetch(getUrl, {
+            headers: {
+                "Accept": "text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8",
+                "User-Agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.1 Safari/605.1.15"
+            }
+        });
+        let getBuffer = await getFont.arrayBuffer();
+        if (!fs.existsSync(`dist${path.sep}fonts`)) fs.mkdirSync(`dist${path.sep}fonts`);
+        fs.writeFileSync(`dist${path.sep}fonts${path.sep}${i}.woff`, Buffer.from(getBuffer));
+        let latinAppend = `${latin[i].substring(0, latin[i].indexOf(";\n}"))};\n}\n`;
+        latinAppend = latinAppend.replace(getUrl, `./fonts/${i}.woff`);
+        usefulCss += latinAppend;
+        console.log(getUrl);
+    }
+    fs.writeFileSync(`dist${path.sep}fontstyle.css`, usefulCss);
+    fs.writeFileSync(`dist${path.sep}index.html`, fs.readFileSync(`dist${path.sep}index.html`, "utf-8").replace(`https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@700&family=Work+Sans&display=swap`, "./fontstyle.css"));
+    fs.writeFileSync(`dist${path.sep}service-worker.js`, fs.readFileSync(`dist${path.sep}service-worker.js`, "utf-8").replace(`https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@700&family=Work+Sans&display=swap`, "./fontstyle.css"));
+    // Fetch content from JSDelivr
+    let fetchRes = {
+        "ffmpeg-core.js": {
+            src: "https://unpkg.com/@ffmpeg/[email protected]/dist/ffmpeg-core.js",
+            out: `dist${path.sep}out.js`
+        },
+        "ffmpeg-html.js": {
+            src: "https://unpkg.com/@ffmpeg/[email protected]/dist/ffmpeg.min.js",
+            out: `dist${path.sep}index.html`
+        },
+        "jszip.js": {
+            src: "https://cdn.jsdelivr.net/npm/[email protected]/dist/jszip.min.js",
+            out: `dist${path.sep}index.html`
+        },
+        "animate.css": {
+            src: "https://cdn.jsdelivr.net/npm/[email protected]/animate.min.css",
+            out: `dist${path.sep}index.html`
+        },
+        "ffmpeg-core.worker.js": {
+            src: "https://unpkg.com/@ffmpeg/[email protected]/dist/ffmpeg-core.worker.js",
+            out: `dist${path.sep}out.js`
+        },
+        "ffmpeg-core.wasm": {
+            src: "https://unpkg.com/@ffmpeg/[email protected]/dist/ffmpeg-core.wasm",
+            out: `dist${path.sep}out.js`
+        }
+    }
+    for (let item in fetchRes) {
+        console.log(fetchRes[item].src);
+        let getItem = await fetch(fetchRes[item].src);
+        let buffer = await getItem.arrayBuffer();
+        if (!fs.existsSync(`dist${path.sep}jsres`)) fs.mkdirSync(`dist${path.sep}jsres`);
+        fs.writeFileSync(`dist${path.sep}jsres${path.sep}${item}`, Buffer.from(buffer));
+        fs.writeFileSync(fetchRes[item].out, fs.readFileSync(fetchRes[item].out, "utf-8").replace(fetchRes[item].src, `./jsres/${item}`));
+        fs.writeFileSync(`dist${path.sep}service-worker.js`, fs.readFileSync(`dist${path.sep}service-worker.js`, "utf-8").replace(fetchRes[item].src, `./jsres/${item}`));
+    }
+})();