Support type module use case

Author: jeromewu

apps/browser/transcode.esm.html

@@ -23,13 +23,13 @@ <h3>Upload a video to transcode to mp4 (x264) and play!</h3>
             message.innerHTML = `${progress * 100} %`;
           });
           await ffmpeg.load({
-            coreURL: "/packages/core/dist/umd/ffmpeg-core.js",
+            coreURL: "/packages/core/dist/esm/ffmpeg-core.js",
           });
         }
         const { name } = files[0];
         await ffmpeg.writeFile(name, await fetchFile(files[0]));
         message.innerHTML = 'Start transcoding';
-        await ffmpeg.exec('-i', name,  'output.mp4');
+        await ffmpeg.exec(['-i', name,  'output.mp4']);
         message.innerHTML = 'Complete transcoding';
         const data = await ffmpeg.readFile('output.mp4');
 

apps/browser/transcode.html

@@ -18,14 +18,11 @@ <h3>Upload a video to transcode to mp4 (x264) and play!</h3>
         const message = document.getElementById('message');
         if (ffmpeg === null) {
           ffmpeg = new FFmpeg();
-          ffmpeg.on(FFmpeg.DOWNLOAD, ({ url, total, received, done }) => {
-              console.log(`downloading ${url}, progress: ${received / total * 100} %, done: ${done}`);
-          });
-          ffmpeg.on(FFmpeg.PROGRESS, ({ progress }) => {
-              message.innerHTML = `${progress * 100} %`;
-          });
-          ffmpeg.on(FFmpeg.LOG, ({ message }) => {
-              console.log(message);
+          ffmpeg.on("log", ({ message }) => {
+            console.log(message);
+          })
+          ffmpeg.on("progress", ({ progress }) => {
+            message.innerHTML = `${progress * 100} %`;
           });
           await ffmpeg.load({
             coreURL: "/packages/core/dist/umd/ffmpeg-core.js",

apps/browser/transcode.worker.html

@@ -30,6 +30,10 @@ declare global {
   }
 }
 
+interface ImportedFFmpegCoreModuleFactory {
+  default: FFmpegCoreModuleFactory;
+}
+
 let ffmpeg: FFmpegCoreModule;
 
 const load = async ({
@@ -44,7 +48,18 @@ const load = async ({
     ? _workerURL
     : _coreURL.replace(/.js$/g, ".worker.js");
 
-  importScripts(coreURL);
+  try {
+    // when web worker type is `classic`.
+    importScripts(coreURL);
+  } catch (e: unknown) {
+    // when web worker type is `module`.
+    if (e instanceof TypeError && e.toString().includes("Module scripts")) {
+      (self as WorkerGlobalScope).createFFmpegCore = (
+        (await import(coreURL)) as ImportedFFmpegCoreModuleFactory
+      ).default;
+    } else throw e;
+  }
+
   ffmpeg = await (self as WorkerGlobalScope).createFFmpegCore({
     // Fix `Overload resolution failed.` when using multi-threaded ffmpeg-core.
     mainScriptUrlOrBlob: coreURL,