diff --git a/apps/browser/transcode.esm.html b/apps/browser/transcode.esm.html
index 22ecffd..b797f9d 100644
--- a/apps/browser/transcode.esm.html
+++ b/apps/browser/transcode.esm.html
@@ -23,13 +23,13 @@
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');
diff --git a/apps/browser/transcode.html b/apps/browser/transcode.html
index 81a24a1..d06cad8 100644
--- a/apps/browser/transcode.html
+++ b/apps/browser/transcode.html
@@ -18,14 +18,11 @@
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",
diff --git a/apps/browser/transcode.worker.html b/apps/browser/transcode.worker.html
deleted file mode 100644
index 51fa522..0000000
--- a/apps/browser/transcode.worker.html
+++ /dev/null
@@ -1,48 +0,0 @@
-
-
-
-
-
- Upload a video to transcode to mp4 (x264) and play!
-
-
-
-
-
-
diff --git a/apps/browser/transcode.worker.js b/apps/browser/transcode.worker.js
deleted file mode 100644
index 76557d9..0000000
--- a/apps/browser/transcode.worker.js
+++ /dev/null
@@ -1,24 +0,0 @@
-importScripts('/dist/ffmpeg.dev.js');
-const ffmpeg = self.FFmpeg.createFFmpeg({log: true});
-
-onmessage = async (event) => {
- try {
- const {buffer, name, inType, outType} = event.data;
- if (!ffmpeg.isLoaded()) {
- await ffmpeg.load();
- }
-
- ffmpeg.FS('writeFile', `${name}.${inType}`, new Uint8Array(buffer));
- await ffmpeg.run('-i', `${name}.${inType}`, `${name}.${outType}`);
- const data = ffmpeg.FS('readFile', `${name}.${outType}`);
-
- postMessage({buffer: data.buffer, type: "result"}, [data.buffer]);
-
- // delete files from memory
- ffmpeg.FS('unlink', `${name}.${inType}`);
- ffmpeg.FS('unlink', `${name}.${outType}`);
- } catch (e) {
- postMessage({type: "error", error: e});
- }
-}
-
diff --git a/packages/ffmpeg/src/worker.ts b/packages/ffmpeg/src/worker.ts
index 9a44470..0df7247 100644
--- a/packages/ffmpeg/src/worker.ts
+++ b/packages/ffmpeg/src/worker.ts
@@ -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,