@@ -359,3 +359,64 @@ function() {
359
359
);
360
360
}
361
361
```
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