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

Refactor to remove events package

Browse Source
This commit is contained in:
Jerome Wu 2023-07-23 15:02:13 +08:00
parent be676060ba
commit ba63a8c468
16 changed files with 261 additions and 10043 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,22 +8,30 @@
<input type="file" id="uploader">
<p id="message"></p>
<script type="module">
import createFFmpeg from "../../packages/ffmpeg/dist/esm/ffmpeg.js";
import { FFmpeg } from "../../packages/ffmpeg/dist/esm/index.js";
import { fetchFile } from "../../packages/util/dist/esm/index.js";
let ffmpeg = null;
const transcode = async ({ target: { files } }) => {
const message = document.getElementById('message');
if (ffmpeg === null) {
ffmpeg = await createFFmpeg();
ffmpeg.setProgress((progress) => { console.log(progress * 100); });
ffmpeg = new FFmpeg();
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",
});
}
const { name } = files[0];
ffmpeg.FS.writeFile(name, await fetchFile(files[0]));
await ffmpeg.writeFile(name, await fetchFile(files[0]));
message.innerHTML = 'Start transcoding';
await ffmpeg.exec('-i', name, 'output.mp4');
message.innerHTML = 'Complete transcoding';
const data = ffmpeg.FS.readFile('output.mp4');
const data = await ffmpeg.readFile('output.mp4');
const video = document.getElementById('output-video');
video.src = URL.createObjectURL(new Blob([data.buffer], { type: 'video/mp4' }));

2
build/ffmpeg-wasm.sh
View File

@ -36,7 +36,7 @@ CONF_FLAGS=(
${FFMPEG_MT:+ -sINITIAL_MEMORY=1024MB} # ALLOW_MEMORY_GROWTH is not recommended when using threads, thus we use a large initial memory
${FFMPEG_MT:+ -sPTHREAD_POOL_SIZE=32} # use 32 threads
${FFMPEG_ST:+ -sINITIAL_MEMORY=32MB -sALLOW_MEMORY_GROWTH} # Use just enough memory as memory usage can grow
-sEXPORT_NAME="$EXPORT_NAME" # required in browser env, so that user can access this module from window.createFFmpeg
-sEXPORT_NAME="$EXPORT_NAME" # required in browser env, so that user can access this module from window object
-sEXPORTED_FUNCTIONS=$(node src/bind/ffmpeg/export.js) # exported functions
-sEXPORTED_RUNTIME_METHODS=$(node src/bind/ffmpeg/export-runtime.js) # exported built-in functions
--pre-js src/bind/ffmpeg/bind.js # extra bindings, contains most of the ffmpeg.wasm javascript code

6
lerna.json
View File

@ -1,6 +0,0 @@
{
"$schema": "node_modules/lerna/schemas/lerna-schema.json",
"useNx": true,
"useWorkspaces": true,
"version": "0.12.0-alpha.2"
}

10089
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

14
package.json
View File

@ -3,21 +3,22 @@
"private": true,
"scripts": {
"lint": "npm-run-all lint:*",
"lint:packages": "lerna run lint",
"lint:packages": "npm run lint --workspace=packages --if-present",
"lint:root": "eslint tests",
"pretest": "lerna run build --scope='@ffmpeg/*'",
"test": "server-test test:browser:server http://localhost:3000 test:all",
"build": "npm run build --workspace=packages --if-present",
"pretest": "npm run build",
"test": "server-test test:browser:server 3000 test:all",
"test:all": "npm-run-all test:*:*:*",
"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 --cors -p 3000 .",
"test:browser:server": "http-server -c-1 -s -p 3000 .",
"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",
"prepublishOnly": "lerna run build --scope='@ffmpeg/*'"
"prepublishOnly": "npm run build"
},
"workspaces": [
"packages/*",
@ -26,10 +27,9 @@
"devDependencies": {
"chai": "^4.3.6",
"http-server": "^14.1.1",
"lerna": "^5.4.3",
"mocha": "^10.0.0",
"mocha-headless-chrome": "^4.0.0",
"npm-run-all": "^4.1.5",
"start-server-and-test": "^1.14.0"
"start-server-and-test": "^2.0.0"
}
}

5
packages/ffmpeg/package.json
View File

@ -17,7 +17,7 @@
"clean": "rimraf dist",
"build:umd": "webpack",
"build:esm": "tsc -p tsconfig.esm.json",
"build": "npm-run-all clean build:*",
"build": "npm-run-all clean build:esm build:umd",
"docs": "typedoc --entryPointStrategy expand ./src",
"docs:serve": "http-server docs"
},
@ -62,7 +62,6 @@
"worker-loader": "^3.0.8"
},
"dependencies": {
"@ffmpeg/types": "^0.12.0-alpha.1",
"events": "^3.3.0"
"@ffmpeg/types": "^0.12.0-alpha.1"
}
}

121
packages/ffmpeg/src/classes.ts
View File

@ -1,5 +1,4 @@
import EventEmitter from "events";
import { FFMessageType } from "./const";
import { FFMessageType } from "./const.js";
import {
CallbackData,
Callbacks,
@ -10,50 +9,13 @@ import {
IsFirst,
LogEvent,
Message,
Progress,
ProgressEvent,
LogEventCallback,
ProgressEventCallback,
FileData,
} from "./types";
import { getMessageID } from "./utils";
import { ERROR_TERMINATED, ERROR_NOT_LOADED } from "./errors";
export declare interface FFmpeg {
/**
* Listen to log events from `ffmpeg.exec()`.
*
* @example
* ```ts
* ffmpeg.on(FFmpeg.LOG, ({ message }) => {
* // ...
* })
* ```
*
* @remarks
* log includes output to stdout and stderr.
*
* @category Event
*/
on(event: typeof FFmpeg.LOG, listener: (log: LogEvent) => void): this;
/**
* Listen to progress events from `ffmpeg.exec()`.
*
* @example
* ```ts
* ffmpeg.on(FFmpeg.PROGRESS, ({ progress }) => {
* // ...
* })
* ```
*
* @remarks
* The progress events are accurate only when the length of
* input and output video/audio file are the same.
*
* @category Event
*/
on(
event: typeof FFmpeg.PROGRESS,
listener: (progress: Progress) => void
): this;
}
} from "./types.js";
import { getMessageID } from "./utils.js";
import { ERROR_TERMINATED, ERROR_NOT_LOADED } from "./errors.js";
/**
* Provides APIs to interact with ffmpeg web worker.
@ -63,10 +25,7 @@ export declare interface FFmpeg {
* const ffmpeg = new FFmpeg();
* ```
*/
export class FFmpeg extends EventEmitter {
/** @event */ static readonly LOG = "log" as const;
/** @event */ static readonly PROGRESS = "progress" as const;
export class FFmpeg {
#worker: Worker | null = null;
/**
* #resolves and #rejects tracks Promise resolves and rejects to
@ -75,11 +34,10 @@ export class FFmpeg extends EventEmitter {
#resolves: Callbacks = {};
#rejects: Callbacks = {};
public loaded = false;
#logEventCallbacks: LogEventCallback[] = [];
#progressEventCallbacks: ProgressEventCallback[] = [];
constructor() {
super();
}
public loaded = false;
/**
* register worker message event handlers.
@ -105,10 +63,12 @@ export class FFmpeg extends EventEmitter {
this.#resolves[id](data);
break;
case FFMessageType.LOG:
this.emit(FFmpeg.LOG, data as LogEvent);
this.#logEventCallbacks.forEach((f) => f(data as LogEvent));
break;
case FFMessageType.PROGRESS:
this.emit(FFmpeg.PROGRESS, data as Progress);
this.#progressEventCallbacks.forEach((f) =>
f(data as ProgressEvent)
);
break;
case FFMessageType.ERROR:
this.#rejects[id](data);
@ -139,6 +99,53 @@ export class FFmpeg extends EventEmitter {
});
};
/**
* Listen to log or prgress events from `ffmpeg.exec()`.
*
* @example
* ```ts
* ffmpeg.on(FFmpeg.LOG, ({ message }) => {
* // ...
* })
* ```
*
* @remarks
* log includes output to stdout and stderr.
*
* @example
* ```ts
* ffmpeg.on(FFmpeg.PROGRESS, ({ progress }) => {
* // ...
* })
* ```
*
* @remarks
* The progress events are accurate only when the length of
* input and output video/audio file are the same.
*
*/
public on(
event: "log" | "progress",
callback: LogEventCallback | ProgressEventCallback
) {
if (event === "log") {
this.#logEventCallbacks.push(callback as LogEventCallback);
} else if (event === "progress") {
this.#progressEventCallbacks.push(callback as ProgressEventCallback);
}
}
public off(
event: "log" | "progress",
callback: LogEventCallback | ProgressEventCallback
) {
if (event === "log") {
this.#logEventCallbacks.filter((f) => f !== callback);
} else if (event === "progress") {
this.#progressEventCallbacks.filter((f) => f !== callback);
}
}
/**
* Loads ffmpeg-core inside web worker. It is required to call this method first
* as it initializes WebAssembly and other essential variables.
@ -148,7 +155,9 @@ export class FFmpeg extends EventEmitter {
*/
public load = (config: FFMessageLoadConfig = {}): Promise<IsFirst> => {
if (!this.#worker) {
this.#worker = new Worker(new URL("./worker", import.meta.url));
this.#worker = new Worker(new URL("./worker.js", import.meta.url), {
type: "module",
});
this.#registerHandlers();
}
return this.#send({

2
packages/ffmpeg/src/index.ts
View File

@ -1 +1 @@
export * from "./classes";
export * from "./classes.js";

7
packages/ffmpeg/src/types.ts
View File

@ -117,7 +117,7 @@ export interface LogEvent {
message: string;
}
export interface Progress {
export interface ProgressEvent {
progress: number;
}
@ -137,7 +137,7 @@ export type CallbackData =
| ExitCode
| ErrorMessage
| LogEvent
| Progress
| ProgressEvent
| IsFirst
| OK
| Error
@ -148,6 +148,9 @@ export interface Callbacks {
[id: number | string]: (data: CallbackData) => void;
}
export type LogEventCallback = (event: LogEvent) => void;
export type ProgressEventCallback = (event: ProgressEvent) => void;
export interface FFMessageEventCallback {
data: {
id: number;

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

@ -21,8 +21,8 @@ import type {
FSNode,
FileData,
} from "./types";
import { CORE_URL, FFMessageType } from "./const";
import { ERROR_UNKNOWN_MESSAGE_TYPE, ERROR_NOT_LOADED } from "./errors";
import { CORE_URL, FFMessageType } from "./const.js";
import { ERROR_UNKNOWN_MESSAGE_TYPE, ERROR_NOT_LOADED } from "./errors.js";
declare global {
interface WorkerGlobalScope {

3
packages/ffmpeg/tsconfig.esm.json
View File

@ -4,6 +4,7 @@
"rootDir": "src",
"declaration": true,
"outDir": "./dist/esm",
"target": "esnext"
"target": "esnext",
"moduleResolution": "nodenext"
}
}

15
packages/ffmpeg/webpack.config.js
View File

@ -3,20 +3,9 @@ const path = require("path");
module.exports = {
mode: "production",
devtool: "source-map",
entry: "./src/index.ts",
module: {
rules: [
{
test: /\.ts$/,
loader: "ts-loader",
options: {
transpileOnly: false,
},
},
],
},
entry: "./dist/esm/index.js",
resolve: {
extensions: [".ts"],
extensions: [".js"],
},
output: {
path: path.resolve(__dirname, "dist/umd"),

6
packages/util/src/index.ts
View File

@ -1,9 +1,9 @@
import {
ERROR_RESPONSE_BODY_READER,
ERROR_INCOMPLETED_DOWNLOAD,
} from "./errors";
import { HeaderContentLength } from "./const";
import { ProgressCallback } from "./types";
} from "./errors.js";
import { HeaderContentLength } from "./const.js";
import { ProgressCallback } from "./types.js";
export const readFromBlobOrFile = (blob: Blob | File): Promise<Uint8Array> =>
new Promise((resolve, reject) => {

2
packages/util/tsconfig-esm.json
View File

@ -4,6 +4,6 @@
"module": "esnext",
"outDir": "dist/esm",
"target": "esnext",
"moduleResolution": "node"
"moduleResolution": "nodenext"
}
}

2
src/bind/ffmpeg/export.js
View File

@ -1,3 +1,3 @@
const EXPORTED_FUNCTIONS = ["_ffmpeg", "_abort"];
const EXPORTED_FUNCTIONS = ["_ffmpeg", "_abort", "_malloc"];
console.log(EXPORTED_FUNCTIONS.join(","));

8
tests/ffmpeg.test.js
View File

@ -120,11 +120,11 @@ describe(genName("FFmpeg.exec()"), function () {
const listener = ({ message }) => {
m = message;
};
ffmpeg.on(FFmpeg.LOG, listener);
ffmpeg.on("log", listener);
const ret = await ffmpeg.exec(["-h"]);
expect(ret).to.equal(0);
expect(m).to.be.a("string");
ffmpeg.removeListener(FFmpeg.LOG, listener);
ffmpeg.off("log", listener);
});
it("should transcode mp4 to avi", async () => {
@ -132,11 +132,11 @@ describe(genName("FFmpeg.exec()"), function () {
const listener = ({ progress }) => {
p = progress;
};
ffmpeg.on(FFmpeg.PROGRESS, listener);
ffmpeg.on("progress", listener);
const ret = await ffmpeg.exec(["-i", "video.mp4", "video.avi"]);
expect(ret).to.equal(0);
expect(p).to.equal(1);
ffmpeg.removeListener(FFmpeg.PROGRESS, listener);
ffmpeg.off("progress", listener);
});
it("should stop if timeout", async () => {