Skip to content

Commit ca31b13

Browse files
jeromewujeromewu
committed
Complete overview page
1 parent e7b83ba commit ca31b13

File tree

9 files changed

+178
-24
lines changed

9 files changed

+178
-24
lines changed

‎apps/website/docs/getting-started/lib-versions.md

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎apps/website/docs/getting-started/usage.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
Learn the basics of using ffmpeg.wasm.
44

55
:::note
6-
It is recommended to read [introduction](/docs/intro) to fully understand the
6+
It is recommended to read [overview](/docs/overview) to fully understand the
77
rationale.
88
:::
99

‎apps/website/docs/intro.md

Lines changed: 0 additions & 14 deletions
This file was deleted.

‎apps/website/docs/overview.md

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
import MuiThemeProvider from "@site/src/components/common/MuiThemeProvider";
2+
import Table from '@mui/material/Table';
3+
import TableBody from '@mui/material/TableBody';
4+
import TableCell from '@mui/material/TableCell';
5+
import TableContainer from '@mui/material/TableContainer';
6+
import TableHead from '@mui/material/TableHead';
7+
import TableRow from '@mui/material/TableRow';
8+
import Paper from '@mui/material/Paper';
9+
10+
# Overview
11+
12+
## Introduction
13+
14+
ffmpeg.wasm is a pure WebAssembly / JavaScript port of [FFmpeg](https://www.ffmpeg.org/)
15+
enabling video & audio record, convert and stream right inside browsers.
16+
17+
We leverage
18+
[Emscripten](https://emscripten.org/) to transpile FFmpeg source code and many
19+
libraries to WebAssembly and develop a minimal but essential library to free
20+
developers from common requirements like running ffmpeg inside web worker and
21+
more.
22+
23+
## Advantages
24+
25+
- **Security**: your users' data only lives inside their browser, no need to
26+
worry about any data leakage or network latency.
27+
- **Client-side computing**: instead of hosting a cluster of server-end servers,
28+
you can now offload multimedia processing to client-side.
29+
- **Flexible**: ffmpeg.wasm comes with single-thread and multi-thread cores, you
30+
can use whichever fits your use case.
31+
32+
## Architecture
33+
34+
![architecture](/img/ffmpegwasm-arch.png)
35+
36+
Multimedia transcoding is a resource-intensive task that you don't want to
37+
execute in main thread, thus in ffmpeg.wasm we offload those task to web worker
38+
(`ffmpeg.worker`) by default. This makes almost all function calls in ffmpeg.wasm
39+
are asynchronous and it is recommended to use **async** / **await** syntax.
40+
41+
`ffmpeg.worker` downloads WebAssembly code (`ffmpeg-core`) from CDN
42+
and initialized it in WorkerGlobalScope. For any input video file you would like
43+
to process, you need to first populated them inside ffmpeg-core File System and
44+
also read result from `ffmpeg-core` File System once it is done.
45+
46+
If you are using a multi-thread version of `ffmpeg-core`, more web workers will
47+
be spawned by `ffmpeg-core` inside `ffmpeg.worker`
48+
49+
## Libraries
50+
51+
ffmpeg.wasm is built with toolchains / libraries:
52+
53+
<TableContainer>
54+
<Table sx={{ minWidth: 650 }} aria-label="simple table">
55+
<TableHead>
56+
<TableRow>
57+
<TableCell align="center">Name</TableCell>
58+
<TableCell align="center">Version</TableCell>
59+
<TableCell align="center">Note</TableCell>
60+
</TableRow>
61+
</TableHead>
62+
<TableBody>
63+
{[
64+
{name: "Emscripten", version: "3.1.40", note: ""},
65+
{name: "FFmpeg", version: "n5.1.3", note: ""},
66+
{name: "x264", version: "0.164.x", note: ""},
67+
{name: "x265", version: "3.4", note: ""},
68+
{name: "libvpx", version: "v1.9.0", note: ""},
69+
{name: "lame", version: "3.100", note: ""},
70+
{name: "ogg", version: "v1.3.4", note: ""},
71+
{name: "theora", version: "v1.1.1", note: ""},
72+
{name: "opus", version: "v1.3.1", note: ""},
73+
{name: "vorbis", version: "v1.3.3", note: ""},
74+
{name: "zlib", version: "v1.2.11", note: ""},
75+
{name: "libwebp", version: "v1.1.0", note: ""},
76+
{name: "freetype2", version: "v2.10.4", note: ""},
77+
{name: "fribidi", version: "v1.0.9", note: ""},
78+
{name: "harfbuzz", version: "5.2.0", note: ""},
79+
{name: "libass", version: "0.15.0", note: ""},
80+
].map((row) => (
81+
<TableRow
82+
key={row.name}
83+
>
84+
<TableCell component="th" scope="row">
85+
{row.name}
86+
</TableCell>
87+
<TableCell align="center">{row.version}</TableCell>
88+
<TableCell align="center">{row.note}</TableCell>
89+
</TableRow>
90+
))}
91+
</TableBody>
92+
</Table>
93+
</TableContainer>

‎apps/website/docusaurus.config.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ const config = {
7272
items: [
7373
{
7474
type: "doc",
75-
docId: "intro",
75+
docId: "overview",
7676
position: "left",
7777
label: "Docs",
7878
},

‎apps/website/sidebars.js

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -18,15 +18,11 @@ const sidebars = {
1818

1919
// But you can create a sidebar manually
2020
tutorialSidebar: [
21-
"intro",
21+
"overview",
2222
{
2323
type: "category",
2424
label: "Getting Started",
25-
items: [
26-
"getting-started/installation",
27-
"getting-started/usage",
28-
"getting-started/lib-versions",
29-
],
25+
items: ["getting-started/installation", "getting-started/usage"],
3026
},
3127
"migration",
3228
"faq",

‎apps/website/src/pages/playground.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ development!
3232

3333
## How to Use :rocket:
3434

35-
> It is recommended to read [Introduction](/docs/intro) first to learn
35+
> It is recommended to read [Overview](/docs/overview) first to learn
3636
ffmpeg.wasm fundamentals.
3737

3838
Demo Video:

‎apps/website/static/asset/ffmpegwasm-arch.drawio

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
<mxfile host="Electron" modified="2023-07-25T14:12:19.793Z" agent="Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/21.6.1 Chrome/112.0.5615.204 Electron/24.6.1 Safari/537.36" etag="yk2PXCvCPGaUw3GiHUln" version="21.6.1" type="device">
2+
<diagram name="Page-1" id="EXaSSQoJnIOsS1fF1PBt">
3+
<mxGraphModel dx="1114" dy="829" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1169" pageHeight="827" math="0" shadow="0">
4+
<root>
5+
<mxCell id="0" />
6+
<mxCell id="1" parent="0" />
7+
<mxCell id="veUAN4s3yOlf8Hxa7Fyb-27" value="if core is multithread version" style="rounded=0;whiteSpace=wrap;html=1;verticalAlign=top;dashed=1;fontSize=14;fontFamily=Noto Sans;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DNoto%2BSans;" vertex="1" parent="1">
8+
<mxGeometry x="720" y="110" width="220" height="420" as="geometry" />
9+
</mxCell>
10+
<mxCell id="veUAN4s3yOlf8Hxa7Fyb-7" value="Sends Message" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.25;exitDx=0;exitDy=0;entryX=0;entryY=0.25;entryDx=0;entryDy=0;fontSize=14;fontFamily=Noto Sans;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DNoto%2BSans;" edge="1" parent="1" source="veUAN4s3yOlf8Hxa7Fyb-1" target="veUAN4s3yOlf8Hxa7Fyb-3">
11+
<mxGeometry relative="1" as="geometry">
12+
<mxPoint as="offset" />
13+
</mxGeometry>
14+
</mxCell>
15+
<mxCell id="veUAN4s3yOlf8Hxa7Fyb-1" value="ffmpeg&lt;br style=&quot;font-size: 14px;&quot;&gt;(JavaScript)" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;verticalAlign=top;fontSize=14;fontFamily=Noto Sans;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DNoto%2BSans;" vertex="1" parent="1">
16+
<mxGeometry x="130" y="110" width="120" height="420" as="geometry" />
17+
</mxCell>
18+
<mxCell id="veUAN4s3yOlf8Hxa7Fyb-2" value="Main Thread" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=14;fontFamily=Noto Sans;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DNoto%2BSans;" vertex="1" parent="1">
19+
<mxGeometry x="145" y="50" width="90" height="30" as="geometry" />
20+
</mxCell>
21+
<mxCell id="veUAN4s3yOlf8Hxa7Fyb-8" value="Sends Message" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0;exitY=0.75;exitDx=0;exitDy=0;entryX=1;entryY=0.75;entryDx=0;entryDy=0;fontSize=14;fontFamily=Noto Sans;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DNoto%2BSans;" edge="1" parent="1" source="veUAN4s3yOlf8Hxa7Fyb-3" target="veUAN4s3yOlf8Hxa7Fyb-1">
22+
<mxGeometry relative="1" as="geometry">
23+
<mxPoint as="offset" />
24+
</mxGeometry>
25+
</mxCell>
26+
<mxCell id="veUAN4s3yOlf8Hxa7Fyb-3" value="ffmpeg.worker&lt;br style=&quot;font-size: 14px;&quot;&gt;(JavaScript)" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;verticalAlign=top;fontSize=14;fontFamily=Noto Sans;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DNoto%2BSans;" vertex="1" parent="1">
27+
<mxGeometry x="450" y="110" width="150" height="420" as="geometry" />
28+
</mxCell>
29+
<mxCell id="veUAN4s3yOlf8Hxa7Fyb-4" value="Web Worker&lt;br style=&quot;font-size: 14px;&quot;&gt;(Worker Thread)" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=14;fontFamily=Noto Sans;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DNoto%2BSans;" vertex="1" parent="1">
30+
<mxGeometry x="465" y="50" width="120" height="30" as="geometry" />
31+
</mxCell>
32+
<mxCell id="veUAN4s3yOlf8Hxa7Fyb-5" value="load()" style="rounded=0;whiteSpace=wrap;html=1;fontSize=14;fontFamily=Noto Sans;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DNoto%2BSans;" vertex="1" parent="1">
33+
<mxGeometry x="140" y="210" width="100" height="50" as="geometry" />
34+
</mxCell>
35+
<mxCell id="veUAN4s3yOlf8Hxa7Fyb-6" value="exec()" style="rounded=0;whiteSpace=wrap;html=1;fontSize=14;fontFamily=Noto Sans;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DNoto%2BSans;" vertex="1" parent="1">
36+
<mxGeometry x="140" y="280" width="100" height="50" as="geometry" />
37+
</mxCell>
38+
<mxCell id="veUAN4s3yOlf8Hxa7Fyb-22" value="Spawns" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;fontSize=14;fontFamily=Noto Sans;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DNoto%2BSans;" edge="1" parent="1" source="veUAN4s3yOlf8Hxa7Fyb-9" target="veUAN4s3yOlf8Hxa7Fyb-20">
39+
<mxGeometry x="0.0087" relative="1" as="geometry">
40+
<mxPoint as="offset" />
41+
</mxGeometry>
42+
</mxCell>
43+
<mxCell id="veUAN4s3yOlf8Hxa7Fyb-23" value="Spawns" style="rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;fontSize=14;fontFamily=Noto Sans;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DNoto%2BSans;" edge="1" parent="1" source="veUAN4s3yOlf8Hxa7Fyb-9" target="veUAN4s3yOlf8Hxa7Fyb-15">
44+
<mxGeometry x="0.0025" relative="1" as="geometry">
45+
<mxPoint as="offset" />
46+
</mxGeometry>
47+
</mxCell>
48+
<mxCell id="veUAN4s3yOlf8Hxa7Fyb-24" value="Spawns" style="rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;fontSize=14;fontFamily=Noto Sans;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DNoto%2BSans;" edge="1" parent="1" source="veUAN4s3yOlf8Hxa7Fyb-9" target="veUAN4s3yOlf8Hxa7Fyb-21">
49+
<mxGeometry relative="1" as="geometry" />
50+
</mxCell>
51+
<mxCell id="veUAN4s3yOlf8Hxa7Fyb-9" value="ffmpeg-core&lt;br style=&quot;font-size: 14px;&quot;&gt;(WebAssembly)" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#e1d5e7;strokeColor=#9673a6;verticalAlign=top;fontSize=14;fontFamily=Noto Sans;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DNoto%2BSans;" vertex="1" parent="1">
52+
<mxGeometry x="465" y="210" width="120" height="230" as="geometry" />
53+
</mxCell>
54+
<mxCell id="veUAN4s3yOlf8Hxa7Fyb-10" value="File System" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#e1d5e7;strokeColor=#9673a6;fontSize=14;fontFamily=Noto Sans;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DNoto%2BSans;" vertex="1" parent="1">
55+
<mxGeometry x="475" y="378" width="100" height="46" as="geometry" />
56+
</mxCell>
57+
<mxCell id="veUAN4s3yOlf8Hxa7Fyb-25" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;startArrow=classic;startFill=1;fontSize=14;fontFamily=Noto Sans;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DNoto%2BSans;" edge="1" parent="1" source="veUAN4s3yOlf8Hxa7Fyb-11" target="veUAN4s3yOlf8Hxa7Fyb-10">
58+
<mxGeometry relative="1" as="geometry">
59+
<mxPoint as="offset" />
60+
</mxGeometry>
61+
</mxCell>
62+
<mxCell id="veUAN4s3yOlf8Hxa7Fyb-11" value="exec()" style="rounded=0;whiteSpace=wrap;html=1;fontSize=14;fontFamily=Noto Sans;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DNoto%2BSans;" vertex="1" parent="1">
63+
<mxGeometry x="475" y="260" width="100" height="50" as="geometry" />
64+
</mxCell>
65+
<mxCell id="veUAN4s3yOlf8Hxa7Fyb-15" value="ffmpeg-core.worker&lt;br style=&quot;font-size: 14px;&quot;&gt;(JavaScript)" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;verticalAlign=middle;fontSize=14;fontFamily=Noto Sans;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DNoto%2BSans;" vertex="1" parent="1">
66+
<mxGeometry x="755" y="160" width="150" height="70" as="geometry" />
67+
</mxCell>
68+
<mxCell id="veUAN4s3yOlf8Hxa7Fyb-20" value="ffmpeg-core.worker&lt;br style=&quot;font-size: 14px;&quot;&gt;(JavaScript)" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;verticalAlign=middle;fontSize=14;fontFamily=Noto Sans;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DNoto%2BSans;" vertex="1" parent="1">
69+
<mxGeometry x="755" y="290" width="150" height="70" as="geometry" />
70+
</mxCell>
71+
<mxCell id="veUAN4s3yOlf8Hxa7Fyb-21" value="ffmpeg-core.worker&lt;br style=&quot;font-size: 14px;&quot;&gt;(JavaScript)" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;verticalAlign=middle;fontSize=14;fontFamily=Noto Sans;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DNoto%2BSans;" vertex="1" parent="1">
72+
<mxGeometry x="755" y="410" width="150" height="70" as="geometry" />
73+
</mxCell>
74+
<mxCell id="veUAN4s3yOlf8Hxa7Fyb-26" value="File I/O" style="text;html=1;strokeColor=none;fillColor=#e1d5e7;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=14;fontFamily=Noto Sans;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DNoto%2BSans;" vertex="1" parent="1">
75+
<mxGeometry x="495" y="330" width="60" height="30" as="geometry" />
76+
</mxCell>
77+
</root>
78+
</mxGraphModel>
79+
</diagram>
80+
</mxfile>

‎apps/website/static/img/ffmpegwasm-arch.png

77.6 KB
Loading

0 commit comments

Comments
 (0)