diff --git a/apps/browser/transcode.html b/apps/browser/transcode.html
index 1b2ca23..94266fd 100644
--- a/apps/browser/transcode.html
+++ b/apps/browser/transcode.html
@@ -21,8 +21,8 @@
ffmpeg.on("log", ({ message }) => {
console.log(message);
})
- ffmpeg.on("progress", ({ progress, elapsed }) => {
- message.innerHTML = `${progress * 100} %, elapsed: ${elapsed / 1000000} s`;
+ ffmpeg.on("progress", ({ progress, time }) => {
+ message.innerHTML = `${progress * 100} %, time: ${time / 1000000} s`;
});
await ffmpeg.load({
coreURL: "/packages/core/dist/umd/ffmpeg-core.js",
diff --git a/apps/website/README.md b/apps/website/README.md
index a6f05e1..0a4980a 100644
--- a/apps/website/README.md
+++ b/apps/website/README.md
@@ -5,7 +5,7 @@ This website is built using [Docusaurus 2](https://docusaurus.io/), a modern sta
### Installation
```
-$ lerna bootstrap
+$ npm install
```
### Local Development
diff --git a/apps/website/docs/getting-started/configuration.md b/apps/website/docs/getting-started/configuration.md
deleted file mode 100644
index a025a48..0000000
--- a/apps/website/docs/getting-started/configuration.md
+++ /dev/null
@@ -1 +0,0 @@
-# Configuration
diff --git a/apps/website/docs/getting-started/installation.md b/apps/website/docs/getting-started/installation.md
index 8a12635..a7e9219 100644
--- a/apps/website/docs/getting-started/installation.md
+++ b/apps/website/docs/getting-started/installation.md
@@ -1,44 +1,67 @@
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
# Installation
-ffmpeg.wasm supports multiple ways of installation:
+:::note
+ffmpeg.wasm only supports running in browser, see [FAQ](/docs/faq) for more
+details
+:::
## Packages Managers
-To install ffmpeg.wasm using package managers like npm and yarn:
+Install ffmpeg.wasm using package managers like npm and yarn:
+
+
+
```bash
-npm install @ffmpeg/ffmpeg
+npm install @ffmpeg/ffmpeg @ffmpeg/util
```
-Or
+
+
```bash
-yarn add @ffmpeg/ffmpeg
+yarn add @ffmpeg/ffmpeg @ffmpeg/util
```
-## Vanilla HTML
+
+
-To use ffmpeg.wasm directly in your web page:
+## CDN
+
+Install ffmpeg.wasm with minimal setup via installing it via CDN.
+
+
+
```html
+
```
-Or use it as a module:
+
+
```html
```
+
+
+
diff --git a/apps/website/docs/getting-started/multi-thread.md b/apps/website/docs/getting-started/multi-thread.md
deleted file mode 100644
index 235e353..0000000
--- a/apps/website/docs/getting-started/multi-thread.md
+++ /dev/null
@@ -1 +0,0 @@
-# Use Mutlithreading
diff --git a/apps/website/docs/getting-started/usage.md b/apps/website/docs/getting-started/usage.md
new file mode 100644
index 0000000..2bc7b07
--- /dev/null
+++ b/apps/website/docs/getting-started/usage.md
@@ -0,0 +1,32 @@
+# Usage
+
+Learn the basics of using ffmpeg.wasm.
+
+:::note
+It is recommended to read [introduction](/docs/intro) to fully understand the
+rationale.
+:::
+
+## Basic
+
+Converting an AVI video to a MP4 video:
+
+```js
+import { FFmpeg } from "@ffmpeg/ffmpeg";
+import { fetchFile } from "@ffmpeg/util";
+
+const videoURL = "https://github.com/ffmpegwasm/testdata/raw/master/video-15s.avi";
+
+(async () => {
+ const ffmpeg = new FFmpeg();
+ // Create a web worker and the worker loads WebAssembly code.
+ await ffmpeg.load();
+ // Write a video file to FS.
+ await ffmpeg.writeFile("input.avi", await fetchFile(videoURL));
+ // Execute ffmpeg command.
+ await ffmpeg.exec(["-i", "input.avi", "output.mp4"]);
+ // Read the output video file from FS, the output file is a Uint8Array typed
+ // array.
+ const data = await ffmpeg.readFile("output.mp4");
+})();
+```
diff --git a/apps/website/docs/intro.md b/apps/website/docs/intro.md
index e10b99d..e9d790d 100644
--- a/apps/website/docs/intro.md
+++ b/apps/website/docs/intro.md
@@ -1 +1,14 @@
# Introduction
+
+ffmpeg.wasm is an experimental project to run [FFmpeg](https://www.ffmpeg.org/) right
+inside your browser without any back-end servers. It enables maximum security
+for end-users and equips your web application with rich multimedia processing
+capabilities.
+
+We leverage
+[Emscripten](https://emscripten.org/) to compile FFmpeg source code and many
+libraries to WebAssembly and develop a minimal but essential library to free
+developers from common requirements like running ffmpeg inside web worker and
+more.
+
+> Talk about how it works with a diagram
diff --git a/apps/website/sidebars.js b/apps/website/sidebars.js
index a43b295..3dccb8e 100644
--- a/apps/website/sidebars.js
+++ b/apps/website/sidebars.js
@@ -24,8 +24,7 @@ const sidebars = {
label: "Getting Started",
items: [
"getting-started/installation",
- "getting-started/configuration",
- "getting-started/multi-thread",
+ "getting-started/usage",
"getting-started/lib-versions",
],
},
diff --git a/packages/ffmpeg/package.json b/packages/ffmpeg/package.json
index 5864043..3c1a7c5 100644
--- a/packages/ffmpeg/package.json
+++ b/packages/ffmpeg/package.json
@@ -42,7 +42,7 @@
"url": "https://github.com/ffmpegwasm/ffmpeg.wasm/issues"
},
"engines": {
- "node": ">=16.6.0"
+ "node": ">=18.17.0"
},
"homepage": "https://github.com/ffmpegwasm/ffmpeg.wasm#readme",
"publishConfig": {
diff --git a/packages/ffmpeg/src/classes.ts b/packages/ffmpeg/src/classes.ts
index 291b67e..0c4fc27 100644
--- a/packages/ffmpeg/src/classes.ts
+++ b/packages/ffmpeg/src/classes.ts
@@ -123,6 +123,7 @@ export class FFmpeg {
* The progress events are accurate only when the length of
* input and output video/audio file are the same.
*
+ * @category FFmpeg
*/
public on(
event: "log" | "progress",
@@ -135,6 +136,11 @@ export class FFmpeg {
}
}
+ /**
+ * Unlisten to log or prgress events from `ffmpeg.exec()`.
+ *
+ * @category FFmpeg
+ */
public off(
event: "log" | "progress",
callback: LogEventCallback | ProgressEventCallback
diff --git a/packages/util/package.json b/packages/util/package.json
index c347b4b..ad7d441 100644
--- a/packages/util/package.json
+++ b/packages/util/package.json
@@ -35,7 +35,7 @@
"url": "https://github.com/ffmpegwasm/ffmpeg.wasm/issues"
},
"engines": {
- "node": ">=16.6.0"
+ "node": ">=18.17.0"
},
"homepage": "https://github.com/ffmpegwasm/ffmpeg.wasm#readme",
"publishConfig": {