Complete overview page
This commit is contained in:
Jerome Wu
parent
8a9ffadf85
commit
1565623517
@ -1 +0,0 @@
|
||||
# Library Versions
|
||||
@ -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.
|
||||
:::
|
||||
|
||||
|
||||
@ -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
|
||||
93
apps/website/docs/overview.md
Normal file
93
apps/website/docs/overview.md
Normal file
@ -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:
|
||||
|
||||
<TableContainer>
|
||||
<Table sx={{ minWidth: 650 }} aria-label="simple table">
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell align="center">Name</TableCell>
|
||||
<TableCell align="center">Version</TableCell>
|
||||
<TableCell align="center">Note</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{[
|
||||
{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) => (
|
||||
<TableRow
|
||||
key={row.name}
|
||||
>
|
||||
<TableCell component="th" scope="row">
|
||||
{row.name}
|
||||
</TableCell>
|
||||
<TableCell align="center">{row.version}</TableCell>
|
||||
<TableCell align="center">{row.note}</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
@ -72,7 +72,7 @@ const config = {
|
||||
items: [
|
||||
{
|
||||
type: "doc",
|
||||
docId: "intro",
|
||||
docId: "overview",
|
||||
position: "left",
|
||||
label: "Docs",
|
||||
},
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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:
|
||||
|
||||
80
apps/website/static/asset/ffmpegwasm-arch.drawio
Normal file
80
apps/website/static/asset/ffmpegwasm-arch.drawio
Normal file
@ -0,0 +1,80 @@
|
||||
<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">
|
||||
<diagram name="Page-1" id="EXaSSQoJnIOsS1fF1PBt">
|
||||
<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">
|
||||
<root>
|
||||
<mxCell id="0" />
|
||||
<mxCell id="1" parent="0" />
|
||||
<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">
|
||||
<mxGeometry x="720" y="110" width="220" height="420" as="geometry" />
|
||||
</mxCell>
|
||||
<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">
|
||||
<mxGeometry relative="1" as="geometry">
|
||||
<mxPoint as="offset" />
|
||||
</mxGeometry>
|
||||
</mxCell>
|
||||
<mxCell id="veUAN4s3yOlf8Hxa7Fyb-1" value="ffmpeg<br style="font-size: 14px;">(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">
|
||||
<mxGeometry x="130" y="110" width="120" height="420" as="geometry" />
|
||||
</mxCell>
|
||||
<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">
|
||||
<mxGeometry x="145" y="50" width="90" height="30" as="geometry" />
|
||||
</mxCell>
|
||||
<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">
|
||||
<mxGeometry relative="1" as="geometry">
|
||||
<mxPoint as="offset" />
|
||||
</mxGeometry>
|
||||
</mxCell>
|
||||
<mxCell id="veUAN4s3yOlf8Hxa7Fyb-3" value="ffmpeg.worker<br style="font-size: 14px;">(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">
|
||||
<mxGeometry x="450" y="110" width="150" height="420" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="veUAN4s3yOlf8Hxa7Fyb-4" value="Web Worker<br style="font-size: 14px;">(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">
|
||||
<mxGeometry x="465" y="50" width="120" height="30" as="geometry" />
|
||||
</mxCell>
|
||||
<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">
|
||||
<mxGeometry x="140" y="210" width="100" height="50" as="geometry" />
|
||||
</mxCell>
|
||||
<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">
|
||||
<mxGeometry x="140" y="280" width="100" height="50" as="geometry" />
|
||||
</mxCell>
|
||||
<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">
|
||||
<mxGeometry x="0.0087" relative="1" as="geometry">
|
||||
<mxPoint as="offset" />
|
||||
</mxGeometry>
|
||||
</mxCell>
|
||||
<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">
|
||||
<mxGeometry x="0.0025" relative="1" as="geometry">
|
||||
<mxPoint as="offset" />
|
||||
</mxGeometry>
|
||||
</mxCell>
|
||||
<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">
|
||||
<mxGeometry relative="1" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="veUAN4s3yOlf8Hxa7Fyb-9" value="ffmpeg-core<br style="font-size: 14px;">(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">
|
||||
<mxGeometry x="465" y="210" width="120" height="230" as="geometry" />
|
||||
</mxCell>
|
||||
<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">
|
||||
<mxGeometry x="475" y="378" width="100" height="46" as="geometry" />
|
||||
</mxCell>
|
||||
<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">
|
||||
<mxGeometry relative="1" as="geometry">
|
||||
<mxPoint as="offset" />
|
||||
</mxGeometry>
|
||||
</mxCell>
|
||||
<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">
|
||||
<mxGeometry x="475" y="260" width="100" height="50" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="veUAN4s3yOlf8Hxa7Fyb-15" value="ffmpeg-core.worker<br style="font-size: 14px;">(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">
|
||||
<mxGeometry x="755" y="160" width="150" height="70" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="veUAN4s3yOlf8Hxa7Fyb-20" value="ffmpeg-core.worker<br style="font-size: 14px;">(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">
|
||||
<mxGeometry x="755" y="290" width="150" height="70" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="veUAN4s3yOlf8Hxa7Fyb-21" value="ffmpeg-core.worker<br style="font-size: 14px;">(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">
|
||||
<mxGeometry x="755" y="410" width="150" height="70" as="geometry" />
|
||||
</mxCell>
|
||||
<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">
|
||||
<mxGeometry x="495" y="330" width="60" height="30" as="geometry" />
|
||||
</mxCell>
|
||||
</root>
|
||||
</mxGraphModel>
|
||||
</diagram>
|
||||
</mxfile>
|
||||
BIN
apps/website/static/img/ffmpegwasm-arch.png
Normal file
BIN
apps/website/static/img/ffmpegwasm-arch.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 78 KiB |
Loading…
Reference in New Issue
Block a user