diff --git a/apps/website/docs/getting-started/usage.md b/apps/website/docs/getting-started/usage.md
index 8ccdd30..4464f8b 100644
--- a/apps/website/docs/getting-started/usage.md
+++ b/apps/website/docs/getting-started/usage.md
@@ -359,3 +359,64 @@ function() {
);
}
```
+
+## Interlaced 2 Videos
+
+```jsx live
+// import { FFmpeg } from '@ffmpeg/ffmpeg';
+// import { fetchFile } from '@ffmpeg/util';
+function() {
+ const [loaded, setLoaded] = useState(false);
+ const ffmpegRef = useRef(new FFmpeg());
+ const videoRef = useRef(null);
+ const messageRef = useRef(null);
+
+ const load = async () => {
+ const baseURL = 'https://unpkg.com/@ffmpeg/core@0.12.2/dist/umd'
+ const ffmpeg = ffmpegRef.current;
+ ffmpeg.on('log', ({ message }) => {
+ messageRef.current.innerHTML = message;
+ console.log(message);
+ });
+ // toBlobURL is used to bypass CORS issue, urls with the same
+ // domain can be used directly.
+ await ffmpeg.load({
+ coreURL: await toBlobURL(`${baseURL}/ffmpeg-core.js`, 'text/javascript'),
+ wasmURL: await toBlobURL(`${baseURL}/ffmpeg-core.wasm`, 'application/wasm'),
+ });
+ setLoaded(true);
+ }
+
+ const transcode = async () => {
+ const ffmpeg = ffmpegRef.current;
+ await ffmpeg.writeFile('input.webm', await fetchFile('https://raw.githubusercontent.com/ffmpegwasm/testdata/master/Big_Buck_Bunny_180_10s.webm'));
+ await ffmpeg.writeFile('reversed.webm', await fetchFile('https://raw.githubusercontent.com/ffmpegwasm/testdata/master/Big_Buck_Bunny_180_10s_reversed.webm'));
+ await ffmpeg.exec([
+ '-i',
+ 'input.webm',
+ '-i',
+ 'reversed.webm',
+ '-filter_complex',
+ '[0:v][1:v]blend=all_expr=\'A*(if(eq(0,N/2),1,T))+B*(if(eq(0,N/2),T,1))\'',
+ 'output.mp4',
+ ]);
+ const data = await ffmpeg.readFile('output.mp4');
+ videoRef.current.src =
+ URL.createObjectURL(new Blob([data.buffer], {type: 'video/mp4'}));
+ }
+
+ return (loaded
+ ? (
+ <>
+
+
+
Open Developer Tools (Ctrl+Shift+I) to View Logs
+ > + ) + : ( + + ) + ); +} +```