diff --git a/apps/website/docs/getting-started/lib-versions.md b/apps/website/docs/getting-started/lib-versions.md
deleted file mode 100644
index b530bec..0000000
--- a/apps/website/docs/getting-started/lib-versions.md
+++ /dev/null
@@ -1 +0,0 @@
-# Library Versions
diff --git a/apps/website/docs/getting-started/usage.md b/apps/website/docs/getting-started/usage.md
index 2bc7b07..5bebf24 100644
--- a/apps/website/docs/getting-started/usage.md
+++ b/apps/website/docs/getting-started/usage.md
@@ -3,7 +3,7 @@
Learn the basics of using ffmpeg.wasm.
:::note
-It is recommended to read [introduction](/docs/intro) to fully understand the
+It is recommended to read [overview](/docs/overview) to fully understand the
rationale.
:::
diff --git a/apps/website/docs/intro.md b/apps/website/docs/intro.md
deleted file mode 100644
index e9d790d..0000000
--- a/apps/website/docs/intro.md
+++ /dev/null
@@ -1,14 +0,0 @@
-# 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/docs/overview.md b/apps/website/docs/overview.md
new file mode 100644
index 0000000..b146a17
--- /dev/null
+++ b/apps/website/docs/overview.md
@@ -0,0 +1,93 @@
+import MuiThemeProvider from "@site/src/components/common/MuiThemeProvider";
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableContainer from '@mui/material/TableContainer';
+import TableHead from '@mui/material/TableHead';
+import TableRow from '@mui/material/TableRow';
+import Paper from '@mui/material/Paper';
+
+# Overview
+
+## Introduction
+
+ffmpeg.wasm is a pure WebAssembly / JavaScript port of [FFmpeg](https://www.ffmpeg.org/)
+enabling video & audio record, convert and stream right inside browsers.
+
+We leverage
+[Emscripten](https://emscripten.org/) to transpile 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.
+
+## Advantages
+
+- **Security**: your users' data only lives inside their browser, no need to
+ worry about any data leakage or network latency.
+- **Client-side computing**: instead of hosting a cluster of server-end servers,
+ you can now offload multimedia processing to client-side.
+- **Flexible**: ffmpeg.wasm comes with single-thread and multi-thread cores, you
+ can use whichever fits your use case.
+
+## Architecture
+
+
+
+Multimedia transcoding is a resource-intensive task that you don't want to
+execute in main thread, thus in ffmpeg.wasm we offload those task to web worker
+(`ffmpeg.worker`) by default. This makes almost all function calls in ffmpeg.wasm
+are asynchronous and it is recommended to use **async** / **await** syntax.
+
+`ffmpeg.worker` downloads WebAssembly code (`ffmpeg-core`) from CDN
+and initialized it in WorkerGlobalScope. For any input video file you would like
+to process, you need to first populated them inside ffmpeg-core File System and
+also read result from `ffmpeg-core` File System once it is done.
+
+If you are using a multi-thread version of `ffmpeg-core`, more web workers will
+be spawned by `ffmpeg-core` inside `ffmpeg.worker`
+
+## Libraries
+
+ffmpeg.wasm is built with toolchains / libraries:
+
+
+
+
+
+ Name
+ Version
+ Note
+
+
+
+ {[
+ {name: "Emscripten", version: "3.1.40", note: ""},
+ {name: "FFmpeg", version: "n5.1.3", note: ""},
+ {name: "x264", version: "0.164.x", note: ""},
+ {name: "x265", version: "3.4", note: ""},
+ {name: "libvpx", version: "v1.9.0", note: ""},
+ {name: "lame", version: "3.100", note: ""},
+ {name: "ogg", version: "v1.3.4", note: ""},
+ {name: "theora", version: "v1.1.1", note: ""},
+ {name: "opus", version: "v1.3.1", note: ""},
+ {name: "vorbis", version: "v1.3.3", note: ""},
+ {name: "zlib", version: "v1.2.11", note: ""},
+ {name: "libwebp", version: "v1.1.0", note: ""},
+ {name: "freetype2", version: "v2.10.4", note: ""},
+ {name: "fribidi", version: "v1.0.9", note: ""},
+ {name: "harfbuzz", version: "5.2.0", note: ""},
+ {name: "libass", version: "0.15.0", note: ""},
+ ].map((row) => (
+
+
+ {row.name}
+
+ {row.version}
+ {row.note}
+
+ ))}
+
+
+
diff --git a/apps/website/docusaurus.config.js b/apps/website/docusaurus.config.js
index 95fe318..eae8156 100644
--- a/apps/website/docusaurus.config.js
+++ b/apps/website/docusaurus.config.js
@@ -72,7 +72,7 @@ const config = {
items: [
{
type: "doc",
- docId: "intro",
+ docId: "overview",
position: "left",
label: "Docs",
},
diff --git a/apps/website/sidebars.js b/apps/website/sidebars.js
index 3dccb8e..58559ef 100644
--- a/apps/website/sidebars.js
+++ b/apps/website/sidebars.js
@@ -18,15 +18,11 @@ const sidebars = {
// But you can create a sidebar manually
tutorialSidebar: [
- "intro",
+ "overview",
{
type: "category",
label: "Getting Started",
- items: [
- "getting-started/installation",
- "getting-started/usage",
- "getting-started/lib-versions",
- ],
+ items: ["getting-started/installation", "getting-started/usage"],
},
"migration",
"faq",
diff --git a/apps/website/src/pages/playground.md b/apps/website/src/pages/playground.md
index 0c202fc..3535c28 100644
--- a/apps/website/src/pages/playground.md
+++ b/apps/website/src/pages/playground.md
@@ -32,7 +32,7 @@ development!
## How to Use :rocket:
-> It is recommended to read [Introduction](/docs/intro) first to learn
+> It is recommended to read [Overview](/docs/overview) first to learn
ffmpeg.wasm fundamentals.
Demo Video:
diff --git a/apps/website/static/asset/ffmpegwasm-arch.drawio b/apps/website/static/asset/ffmpegwasm-arch.drawio
new file mode 100644
index 0000000..c76f1dc
--- /dev/null
+++ b/apps/website/static/asset/ffmpegwasm-arch.drawio
@@ -0,0 +1,80 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/apps/website/static/img/ffmpegwasm-arch.png b/apps/website/static/img/ffmpegwasm-arch.png
new file mode 100644
index 0000000..f0ec68b
Binary files /dev/null and b/apps/website/static/img/ffmpegwasm-arch.png differ