Update locateFile to a fix critical bug in vite

package-lock.json

@@ -26,6 +26,9 @@
         "tar": "^6.1.15"
       }
     },
+    "apps/next-app": {
+      "version": "0.1.0"
+    },
     "apps/react-vite-app": {
       "version": "0.0.0",
       "dependencies": {
@@ -12289,6 +12292,10 @@
       "version": "2.6.2",
       "license": "MIT"
     },
+    "node_modules/next-app": {
+      "resolved": "apps/next-app",
+      "link": true
+    },
     "node_modules/nice-try": {
       "version": "1.0.5",
       "dev": true,
@@ -17957,7 +17964,7 @@
     },
     "packages/core": {
       "name": "@ffmpeg/core",
-      "version": "0.12.1",
+      "version": "0.12.2",
       "license": "MIT",
       "engines": {
         "node": ">=16.6.0"
@@ -17965,7 +17972,7 @@
     },
     "packages/core-mt": {
       "name": "@ffmpeg/core-mt",
-      "version": "0.12.1",
+      "version": "0.12.2",
       "license": "MIT",
       "engines": {
         "node": ">=16.6.0"
@@ -17973,7 +17980,7 @@
     },
     "packages/ffmpeg": {
       "name": "@ffmpeg/ffmpeg",
-      "version": "0.12.2",
+      "version": "0.12.3",
       "license": "MIT",
       "dependencies": {
         "@ffmpeg/types": "^0.12.0"

package.json

@@ -7,14 +7,15 @@
     "lint:root": "eslint tests",
     "build": "npm run build --workspace=packages --if-present",
     "pretest": "npm run build",
+    "serve": "http-server -c-1 -s -p 3000 .",
     "test": "server-test test:browser:server 3000 test:all",
-    "test:all": "npm-run-all test:*:*:*",
+    "test:all": "npm-run-all test:browser:*:*",
     "test:browser": "mocha-headless-chrome -a enable-features=SharedArrayBuffer",
     "test:browser:core:mt": "npm run test:browser -- -f http://localhost:3000/tests/ffmpeg-core-mt.test.html",
     "test:browser:core:st": "npm run test:browser -- -f http://localhost:3000/tests/ffmpeg-core-st.test.html",
     "test:browser:ffmpeg:mt": "npm run test:browser -- -f http://localhost:3000/tests/ffmpeg-mt.test.html",
     "test:browser:ffmpeg:st": "npm run test:browser -- -f http://localhost:3000/tests/ffmpeg-st.test.html",
-    "test:browser:server": "http-server -c-1 -s -p 3000 .",
+    "test:browser:server": "npm run serve",
     "test:node": "mocha --exit --bail -t 60000",
     "test:node:core:mt": "npm run test:node -- --require tests/test-helper-mt.js tests/ffmpeg-core.test.js",
     "test:node:core:st": "npm run test:node -- --require tests/test-helper-st.js tests/ffmpeg-core.test.js",

packages/core-mt/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ffmpeg/core-mt",
-  "version": "0.12.1",
+  "version": "0.12.2",
   "description": "FFmpeg WebAssembly version (multi thread)",
   "main": "./dist/umd/ffmpeg-core.js",
   "exports": {

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ffmpeg/core",
-  "version": "0.12.1",
+  "version": "0.12.2",
   "description": "FFmpeg WebAssembly version (single thread)",
   "main": "./dist/umd/ffmpeg-core.js",
   "exports": {

packages/ffmpeg/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ffmpeg/ffmpeg",
-  "version": "0.12.2",
+  "version": "0.12.3",
   "description": "FFmpeg WebAssembly version for browser",
   "main": "./dist/umd/ffmpeg.js",
   "types": "./dist/esm/index.d.ts",

packages/ffmpeg/src/worker.ts

@@ -70,12 +70,10 @@ const load = async ({
 
   ffmpeg = await (self as WorkerGlobalScope).createFFmpegCore({
     // Fix `Overload resolution failed.` when using multi-threaded ffmpeg-core.
-    mainScriptUrlOrBlob: coreURL,
+    // Encoded wasmURL and workerURL in the URL as a hack to fix locateFile issue.
-    locateFile: (path: string, prefix: string): string => {
+    mainScriptUrlOrBlob: `${coreURL}#${btoa(
-      if (path.endsWith(".wasm")) return wasmURL;
+      JSON.stringify({ wasmURL, workerURL })
-      if (path.endsWith(".worker.js")) return workerURL;
+    )}`,
-      return prefix + path;
-    },
   });
   ffmpeg.setLogger((data) =>
     self.postMessage({ type: FFMessageType.LOG, data })

src/bind/ffmpeg/bind.js

@@ -83,10 +83,42 @@ function reset() {
   Module["timeout"] = -1;
 }
 
+/**
+ * In multithread version of ffmpeg.wasm, the bootstrap process is like:
+ * 1. Execute ffmpeg-core.js
+ * 2. ffmpeg-core.js spawns workers by calling `new Worker("ffmpeg-core.worker.js")`
+ * 3. ffmpeg-core.worker.js imports ffmpeg-core.js
+ * 4. ffmpeg-core.js imports ffmpeg-core.wasm
+ *
+ * It is a straightforward process when all files are in the same location.
+ * But when files are in different location (or Blob URL), #4 fails because
+ * there is no way to pass custom ffmpeg-core.wasm URL to ffmpeg-core.worker.js
+ * when it imports ffmpeg-core.js in #3.
+ *
+ * To fix this issue, a hack here is leveraging mainScriptUrlOrBlob variable by
+ * adding wasmURL and workerURL in base64 format as query string. ex:
+ *
+ *   http://example.com/ffmpeg-core.js#{btoa(JSON.stringify({"wasmURL": "...", "workerURL": "..."}))}
+ *
+ * Thus, we can successfully extract custom URLs using _locateFile funciton.
+ */
+function _locateFile(path, prefix) {
+  const mainScriptUrlOrBlob = Module["mainScriptUrlOrBlob"];
+  if (mainScriptUrlOrBlob) {
+    const { wasmURL, workerURL } = JSON.parse(
+      atob(mainScriptUrlOrBlob.slice(mainScriptUrlOrBlob.lastIndexOf("#") + 1))
+    );
+    if (path.endsWith(".wasm")) return wasmURL;
+    if (path.endsWith(".worker.js")) return workerURL;
+  }
+  return prefix + path;
+}
+
 Module["stringToPtr"] = stringToPtr;
 Module["stringsToPtr"] = stringsToPtr;
 Module["print"] = print;
 Module["printErr"] = printErr;
+Module["locateFile"] = _locateFile;
 
 Module["exec"] = exec;
 Module["setLogger"] = setLogger;