dumtruck/konowebcodecs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Support type module use case

Browse Source
This commit is contained in:
Jerome Wu 2023-07-23 22:35:46 +08:00
parent d56d5fa434
commit 5f48200442
5 changed files with 23 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
apps/browser/transcode.esm.html
View File

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

11
apps/browser/transcode.html
View File

@ -18,14 +18,11 @@
const message = document.getElementById('message'); const message = document.getElementById('message');
if (ffmpeg === null) { if (ffmpeg === null) {
ffmpeg = new FFmpeg(); ffmpeg = new FFmpeg();
ffmpeg.on(FFmpeg.DOWNLOAD, ({ url, total, received, done }) => { ffmpeg.on("log", ({ message }) => {
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); console.log(message);
})
ffmpeg.on("progress", ({ progress }) => {
message.innerHTML = `${progress * 100} %`;
}); });
await ffmpeg.load({ await ffmpeg.load({
coreURL: "/packages/core/dist/umd/ffmpeg-core.js", coreURL: "/packages/core/dist/umd/ffmpeg-core.js",

48
apps/browser/transcode.worker.html
View File

@ -1,48 +0,0 @@
<html>
<head>
<style>
html, body {
margin: 0;
width: 100%;
height: 100%
}
body {
display: flex;
flex-direction: column;
align-items: center;
}
</style>
</head>
<body>
<h3>Upload a video to transcode to mp4 (x264) and play!</h3>
<video id="output-video" controls></video><br/>
<input type="file" id="uploader">
<p id="message"></p>
<script type="module">
const worker = new Worker(new URL('./transcode.worker.js', import.meta.url).href);
worker.onmessage = (event) => {
const {data} = event;
message.innerHTML = 'Complete transcoding';
const video = document.getElementById('output-video');
video.src = URL.createObjectURL(new Blob([data.buffer], { type: 'video/mp4' }));
}
worker.onerror = (error) => console.log(error);
const transcode = async ({ target: { files } }) => {
const message = document.getElementById('message');
const [file] = files;
let name = file.name.split('.');
const inType = name.pop();
name = name.join();
const buffer = await file.arrayBuffer();
const outType = 'mp4';
worker.postMessage({name, inType, outType, buffer}, [buffer]);
message.innerHTML = 'Start transcoding';
}
const elm = document.getElementById('uploader');
elm.addEventListener('change', transcode);
</script>
</body>
</html>

24
apps/browser/transcode.worker.js
View File

@ -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});
}
}

15
packages/ffmpeg/src/worker.ts
View File

@ -30,6 +30,10 @@ declare global {
} }
} }
interface ImportedFFmpegCoreModuleFactory {
default: FFmpegCoreModuleFactory;
}
let ffmpeg: FFmpegCoreModule; let ffmpeg: FFmpegCoreModule;
const load = async ({ const load = async ({
@ -44,7 +48,18 @@ const load = async ({
? _workerURL ? _workerURL
: _coreURL.replace(/.js$/g, ".worker.js"); : _coreURL.replace(/.js$/g, ".worker.js");
try {
// when web worker type is `classic`.
importScripts(coreURL); 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({ ffmpeg = await (self as WorkerGlobalScope).createFFmpegCore({
// Fix `Overload resolution failed.` when using multi-threaded ffmpeg-core. // Fix `Overload resolution failed.` when using multi-threaded ffmpeg-core.
mainScriptUrlOrBlob: coreURL, mainScriptUrlOrBlob: coreURL,