Skip to content

Commit c2a5330

Browse files
committed
Add interlace example
1 parent 8ad6290 commit c2a5330

File tree

1 file changed

+61
-0
lines changed
  • apps/website/docs/getting-started

1 file changed

+61
-0
lines changed

apps/website/docs/getting-started/usage.md

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -359,3 +359,64 @@ function() {
359359
);
360360
}
361361
```
362+
363+
## Interlaced 2 Videos
364+
365+
```jsx live
366+
// import { FFmpeg } from '@ffmpeg/ffmpeg';
367+
// import { fetchFile } from '@ffmpeg/util';
368+
function() {
369+
const [loaded, setLoaded] = useState(false);
370+
const ffmpegRef = useRef(new FFmpeg());
371+
const videoRef = useRef(null);
372+
const messageRef = useRef(null);
373+
374+
const load = async () => {
375+
const baseURL = 'https://unpkg.com/@ffmpeg/[email protected]/dist/umd'
376+
const ffmpeg = ffmpegRef.current;
377+
ffmpeg.on('log', ({ message }) => {
378+
messageRef.current.innerHTML = message;
379+
console.log(message);
380+
});
381+
// toBlobURL is used to bypass CORS issue, urls with the same
382+
// domain can be used directly.
383+
await ffmpeg.load({
384+
coreURL: await toBlobURL(`${baseURL}/ffmpeg-core.js`, 'text/javascript'),
385+
wasmURL: await toBlobURL(`${baseURL}/ffmpeg-core.wasm`, 'application/wasm'),
386+
});
387+
setLoaded(true);
388+
}
389+
390+
const transcode = async () => {
391+
const ffmpeg = ffmpegRef.current;
392+
await ffmpeg.writeFile('input.webm', await fetchFile('https://raw.githubusercontent.com/ffmpegwasm/testdata/master/Big_Buck_Bunny_180_10s.webm'));
393+
await ffmpeg.writeFile('reversed.webm', await fetchFile('https://raw.githubusercontent.com/ffmpegwasm/testdata/master/Big_Buck_Bunny_180_10s_reversed.webm'));
394+
await ffmpeg.exec([
395+
'-i',
396+
'input.webm',
397+
'-i',
398+
'reversed.webm',
399+
'-filter_complex',
400+
'[0:v][1:v]blend=all_expr=\'A*(if(eq(0,N/2),1,T))+B*(if(eq(0,N/2),T,1))\'',
401+
'output.mp4',
402+
]);
403+
const data = await ffmpeg.readFile('output.mp4');
404+
videoRef.current.src =
405+
URL.createObjectURL(new Blob([data.buffer], {type: 'video/mp4'}));
406+
}
407+
408+
return (loaded
409+
? (
410+
<>
411+
<video ref={videoRef} controls></video><br/>
412+
<button onClick={transcode}>Interlace two webm video to mp4</button>
413+
<p ref={messageRef}></p>
414+
<p>Open Developer Tools (Ctrl+Shift+I) to View Logs</p>
415+
</>
416+
)
417+
: (
418+
<button onClick={load}>Load ffmpeg-core (~31 MB)</button>
419+
)
420+
);
421+
}
422+
```

0 commit comments

Comments
 (0)