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

+ + ) + : ( + + ) + ); +} +```