diff options
Diffstat (limited to 'src/routes/ffmpeg-test/+page.svelte')
| -rw-r--r-- | src/routes/ffmpeg-test/+page.svelte | 45 |
1 files changed, 45 insertions, 0 deletions
diff --git a/src/routes/ffmpeg-test/+page.svelte b/src/routes/ffmpeg-test/+page.svelte new file mode 100644 index 0000000..226fc3c --- /dev/null +++ b/src/routes/ffmpeg-test/+page.svelte @@ -0,0 +1,45 @@ +<script lang="ts"> + import { FFmpeg } from '@ffmpeg/ffmpeg'; + // @ts-ignore + import type { LogEvent } from '@ffmpeg/ffmpeg/dist/esm/types'; + import { fetchFile, toBlobURL } from '@ffmpeg/util'; + + let videoEl: HTMLVideoElement; + + const baseURL = 'https://unpkg.com/@ffmpeg/core-mt@0.12.6/dist/esm'; + const videoURL = 'https://raw.githubusercontent.com/ffmpegwasm/testdata/master/video-15s.avi'; + + let message = $state('Click Start to Transcode'); + + const transcode = async () => { + const ffmpeg = new FFmpeg(); + message = 'Loading ffmpeg-core.js'; + ffmpeg.on('log', ({ message: msg }: LogEvent) => { + message = msg; + console.log(message); + }); + await ffmpeg.load({ + coreURL: await toBlobURL(`${baseURL}/ffmpeg-core.js`, 'text/javascript'), + wasmURL: await toBlobURL(`${baseURL}/ffmpeg-core.wasm`, 'application/wasm'), + workerURL: await toBlobURL(`${baseURL}/ffmpeg-core.worker.js`, 'text/javascript') + }); + message = 'Start transcoding'; + await ffmpeg.writeFile('test.avi', await fetchFile(videoURL)); + await ffmpeg.exec(['-i', 'test.avi', 'test.mp4']); + message = 'Complete transcoding'; + const data = await ffmpeg.readFile('test.mp4'); + console.log('done'); + videoEl.src = URL.createObjectURL( + // @ts-ignore bufferlike is good enuf + new Blob([(data as Uint8Array).buffer], { type: 'video/mp4' }) + ); + }; +</script> + +<div> + <!-- svelte-ignore a11y_media_has_caption --> + <video bind:this={videoEl} controls></video> + <br /> + <button onclick={transcode}>Start</button> + <p>{message}</p> +</div> |