Add examples
This commit is contained in:
Jerome Wu
parent
2aa84aa0fa
commit
ba5dd17723
BIN
apps/website/assets/background.xcf
Normal file
BIN
apps/website/assets/background.xcf
Normal file
Binary file not shown.
BIN
apps/website/assets/react-vite.xcf
Normal file
BIN
apps/website/assets/react-vite.xcf
Normal file
Binary file not shown.
BIN
apps/website/assets/vanilla.xcf
Normal file
BIN
apps/website/assets/vanilla.xcf
Normal file
Binary file not shown.
BIN
apps/website/assets/vue-vite.xcf
Normal file
BIN
apps/website/assets/vue-vite.xcf
Normal file
Binary file not shown.
36
apps/website/docs/getting-started/examples.md
Normal file
36
apps/website/docs/getting-started/examples.md
Normal file
@ -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:
|
||||
|
||||
<MuiThemeProvider>
|
||||
<Grid container rowSpacing={1} columnSpacing={1}>
|
||||
<Grid xs={12} sm={6} md={6} lg={6} xl={4}>
|
||||
<ExampleCard
|
||||
img="/img/vanilla.png"
|
||||
title="Vanilla JavaScript"
|
||||
desc="Plain JavaScript without any libraries"
|
||||
url="https://github.com/ffmpegwasm/ffmpeg.wasm/tree/main/apps/vanilla-app"
|
||||
/>
|
||||
</Grid>
|
||||
<Grid xs={12} sm={6} md={6} lg={6} xl={4}>
|
||||
<ExampleCard
|
||||
img="/img/react-vite.png"
|
||||
title="React + Vite"
|
||||
desc="React with Vite"
|
||||
url="https://github.com/ffmpegwasm/ffmpeg.wasm/tree/main/apps/react-vite-app"
|
||||
/>
|
||||
</Grid>
|
||||
<Grid xs={12} sm={6} md={6} lg={6} xl={4}>
|
||||
<ExampleCard
|
||||
img="/img/vue-vite.png"
|
||||
title="Vue + Vite"
|
||||
desc="Vue with Vite"
|
||||
url="https://github.com/ffmpegwasm/ffmpeg.wasm/tree/main/apps/vue-vite-app"
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</MuiThemeProvider>
|
||||
@ -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
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
|
||||
## CDN
|
||||
|
||||
Install ffmpeg.wasm with minimal setup via installing it via CDN.
|
||||
|
||||
<Tabs>
|
||||
<TabItem value="classic" label="classic" default>
|
||||
|
||||
```html
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://unpkg.com/@ffmpeg/ffmpeg@0.12.1/dist/umd/ffmpeg.js"></script>
|
||||
<script src="https://unpkg.com/@ffmpeg/util@0.12.0/dist/umd/index.js"></script>
|
||||
<script>
|
||||
const { FFmpeg } = FFmpegWASM;
|
||||
const { fetchFile } = FFmpegUtil;
|
||||
</script>
|
||||
</head>
|
||||
</html>
|
||||
```
|
||||
|
||||
</TabItem>
|
||||
<TabItem value="module" label="module">
|
||||
|
||||
```html
|
||||
<html>
|
||||
<head>
|
||||
<script type="module">
|
||||
import { FFmpeg } from "https://unpkg.com/@ffmpeg/ffmpeg@0.12.1/dist/esm/ffmpeg.js";
|
||||
import { fetchFile } from "https://unpkg.com/@ffmpeg/util@0.12.0/dist/esm/index.js";
|
||||
</script>
|
||||
</head>
|
||||
</html>
|
||||
```
|
||||
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
:::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.
|
||||
:::
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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:
|
||||
|
||||
@ -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",
|
||||
|
||||
39
apps/website/src/components/common/ExampleCard.tsx
Normal file
39
apps/website/src/components/common/ExampleCard.tsx
Normal file
@ -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 (
|
||||
<Card sx={{ maxWidth: 320 }}>
|
||||
<CardMedia
|
||||
component="img"
|
||||
height="180"
|
||||
image={img}
|
||||
alt="framework image"
|
||||
/>
|
||||
<CardContent>
|
||||
<Typography gutterBottom variant="h5" component="div">
|
||||
{title}
|
||||
</Typography>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
{desc}
|
||||
</Typography>
|
||||
</CardContent>
|
||||
<CardActions>
|
||||
<Button
|
||||
size="small"
|
||||
color="primary"
|
||||
onClick={() => {
|
||||
window.open(url, "_blank");
|
||||
}}
|
||||
>
|
||||
Open
|
||||
</Button>
|
||||
</CardActions>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
BIN
apps/website/static/img/react-vite.png
Normal file
BIN
apps/website/static/img/react-vite.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
BIN
apps/website/static/img/vanilla.png
Normal file
BIN
apps/website/static/img/vanilla.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
BIN
apps/website/static/img/vue-vite.png
Normal file
BIN
apps/website/static/img/vue-vite.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
Loading…
Reference in New Issue
Block a user