From 5f48200442b4db50a018c707979c3b5fe55f471b Mon Sep 17 00:00:00 2001 From: Jerome Wu Date: Sun, 23 Jul 2023 22:35:46 +0800 Subject: [PATCH] Support type module use case --- apps/browser/transcode.esm.html | 4 +-- apps/browser/transcode.html | 13 ++++---- apps/browser/transcode.worker.html | 48 ------------------------------ apps/browser/transcode.worker.js | 24 --------------- packages/ffmpeg/src/worker.ts | 17 ++++++++++- 5 files changed, 23 insertions(+), 83 deletions(-) delete mode 100644 apps/browser/transcode.worker.html delete mode 100644 apps/browser/transcode.worker.js 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,