diff --git a/apps/website/assets/background.xcf b/apps/website/assets/background.xcf new file mode 100644 index 0000000..d94cdbc Binary files /dev/null and b/apps/website/assets/background.xcf differ diff --git a/apps/website/assets/react-vite.xcf b/apps/website/assets/react-vite.xcf new file mode 100644 index 0000000..643550b Binary files /dev/null and b/apps/website/assets/react-vite.xcf differ diff --git a/apps/website/assets/vanilla.xcf b/apps/website/assets/vanilla.xcf new file mode 100644 index 0000000..2023509 Binary files /dev/null and b/apps/website/assets/vanilla.xcf differ diff --git a/apps/website/assets/vue-vite.xcf b/apps/website/assets/vue-vite.xcf new file mode 100644 index 0000000..a217f94 Binary files /dev/null and b/apps/website/assets/vue-vite.xcf differ diff --git a/apps/website/docs/getting-started/examples.md b/apps/website/docs/getting-started/examples.md new file mode 100644 index 0000000..3894350 --- /dev/null +++ b/apps/website/docs/getting-started/examples.md @@ -0,0 +1,36 @@ +import Grid from '@mui/material/Unstable_Grid2'; +import MuiThemeProvider from "@site/src/components/common/MuiThemeProvider"; +import ExampleCard from "@site/src/components/common/ExampleCard"; + +# Examples + +You can find how to use ffmpeg.wasm with frameworks here. :smile: + + + + + + + + + + + + + + diff --git a/apps/website/docs/getting-started/installation.md b/apps/website/docs/getting-started/installation.md index ca25128..94855bc 100644 --- a/apps/website/docs/getting-started/installation.md +++ b/apps/website/docs/getting-started/installation.md @@ -8,7 +8,7 @@ ffmpeg.wasm only supports running in browser, see [FAQ](/docs/faq) for more details ::: -## Packages Managers +## Package Managers Install ffmpeg.wasm using package managers like npm and yarn: @@ -29,39 +29,7 @@ yarn add @ffmpeg/ffmpeg @ffmpeg/util -## CDN - -Install ffmpeg.wasm with minimal setup via installing it via CDN. - - - - -```html - - - - - - - -``` - - - - -```html - - - - - -``` - - - +:::info +As ffmpeg.wasm spawns a web worker, you cannot import ffmpeg.wasm from CDN like +unpkg. It is recommended to download it and self-hosted most of the time. +::: diff --git a/apps/website/docs/getting-started/usage.md b/apps/website/docs/getting-started/usage.md index 9a87bd5..ed2939b 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 [overview](/docs/overview) first. +It is recommended to read [Overview](/docs/overview) first. ::: ## Transcoding video diff --git a/apps/website/docs/overview.md b/apps/website/docs/overview.md index b0abe7d..1b97def 100644 --- a/apps/website/docs/overview.md +++ b/apps/website/docs/overview.md @@ -46,6 +46,27 @@ 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` +:::info +The concept of `core` in ffmpeg.wasm is like the engine of a car, it is not only +the most important part of ffmpeg.wasm but also a swappable component. Currently +we maintain single-thread (`@ffmpeg/core`) and multi-thread version +(`@ffmpeg/core-mt`) cores, you can build your own core (ex. a core with x264 + lib only to minimize ffmpeg-core.wasm file size) using build scripts in the repository. +::: + +## Packages + +All ffmpeg.wasm packages are under [@ffmpeg](https://www.npmjs.com/search?q=%40ffmpeg) +name space: + +| Name | Usage | +| ---- | ----- | +| @ffmpeg/ffmpeg | ffmpeg.wasm main package | +| @ffmpeg/util | common utility functions | +| @ffmpeg/types | TypeScript types | +| @ffmpeg/core | single-thread ffmpeg.wasm core | +| @ffmpeg/core-mt | multi-thread ffmpeg.wasm core | + ## Libraries ffmpeg.wasm is built with toolchains / libraries: diff --git a/apps/website/sidebars.js b/apps/website/sidebars.js index f9f024b..79ffbb4 100644 --- a/apps/website/sidebars.js +++ b/apps/website/sidebars.js @@ -22,7 +22,11 @@ const sidebars = { { type: "category", label: "Getting Started", - items: ["getting-started/installation", "getting-started/usage"], + items: [ + "getting-started/installation", + "getting-started/usage", + "getting-started/examples", + ], }, "migration", "faq", diff --git a/apps/website/src/components/common/ExampleCard.tsx b/apps/website/src/components/common/ExampleCard.tsx new file mode 100644 index 0000000..98c16ef --- /dev/null +++ b/apps/website/src/components/common/ExampleCard.tsx @@ -0,0 +1,39 @@ +import * as React from "react"; +import Card from "@mui/material/Card"; +import CardContent from "@mui/material/CardContent"; +import CardMedia from "@mui/material/CardMedia"; +import CardActions from "@mui/material/CardActions"; +import Button from "@mui/material/Button"; +import Typography from "@mui/material/Typography"; + +export default function ActionAreaCard({ img, title, desc, url }) { + return ( + + + + + {title} + + + {desc} + + + + + + + ); +} diff --git a/apps/website/static/img/react-vite.png b/apps/website/static/img/react-vite.png new file mode 100644 index 0000000..08bcd57 Binary files /dev/null and b/apps/website/static/img/react-vite.png differ diff --git a/apps/website/static/img/vanilla.png b/apps/website/static/img/vanilla.png new file mode 100644 index 0000000..43b3450 Binary files /dev/null and b/apps/website/static/img/vanilla.png differ diff --git a/apps/website/static/img/vue-vite.png b/apps/website/static/img/vue-vite.png new file mode 100644 index 0000000..9b71503 Binary files /dev/null and b/apps/website/static/img/vue-vite.png differ