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
|
details
|
||||||
:::
|
:::
|
||||||
|
|
||||||
## Packages Managers
|
## Package Managers
|
||||||
|
|
||||||
Install ffmpeg.wasm using package managers like npm and yarn:
|
Install ffmpeg.wasm using package managers like npm and yarn:
|
||||||
|
|
||||||
@ -29,39 +29,7 @@ yarn add @ffmpeg/ffmpeg @ffmpeg/util
|
|||||||
</TabItem>
|
</TabItem>
|
||||||
</Tabs>
|
</Tabs>
|
||||||
|
|
||||||
## CDN
|
:::info
|
||||||
|
As ffmpeg.wasm spawns a web worker, you cannot import ffmpeg.wasm from CDN like
|
||||||
Install ffmpeg.wasm with minimal setup via installing it via CDN.
|
unpkg. It is recommended to download it and self-hosted most of the time.
|
||||||
|
:::
|
||||||
<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>
|
|
||||||
|
|||||||
@ -3,7 +3,7 @@
|
|||||||
Learn the basics of using ffmpeg.wasm.
|
Learn the basics of using ffmpeg.wasm.
|
||||||
|
|
||||||
:::note
|
:::note
|
||||||
It is recommended to read [overview](/docs/overview) first.
|
It is recommended to read [Overview](/docs/overview) first.
|
||||||
:::
|
:::
|
||||||
|
|
||||||
## Transcoding video
|
## 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
|
If you are using a multi-thread version of `ffmpeg-core`, more web workers will
|
||||||
be spawned by `ffmpeg-core` inside `ffmpeg.worker`
|
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
|
## Libraries
|
||||||
|
|
||||||
ffmpeg.wasm is built with toolchains / libraries:
|
ffmpeg.wasm is built with toolchains / libraries:
|
||||||
|
|||||||
@ -22,7 +22,11 @@ const sidebars = {
|
|||||||
{
|
{
|
||||||
type: "category",
|
type: "category",
|
||||||
label: "Getting Started",
|
label: "Getting Started",
|
||||||
items: ["getting-started/installation", "getting-started/usage"],
|
items: [
|
||||||
|
"getting-started/installation",
|
||||||
|
"getting-started/usage",
|
||||||
|
"getting-started/examples",
|
||||||
|
],
|
||||||
},
|
},
|
||||||
"migration",
|
"migration",
|
||||||
"faq",
|
"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