diff --git a/packages/av-cliper/demo-vite.config.ts b/packages/av-cliper/demo-vite.config.ts new file mode 100644 index 00000000..273c75db --- /dev/null +++ b/packages/av-cliper/demo-vite.config.ts @@ -0,0 +1,11 @@ +import { resolve } from 'path' +import { defineConfig } from 'vitest/config' + +export default defineConfig({ + server: { + host: '0.0.0.0', + port: 6066 + }, + publicDir: resolve(__dirname, '../../doc-site/public') +}) + diff --git a/packages/av-cliper/demo/chromakey.demo.ts b/packages/av-cliper/demo/chromakey.demo.ts index 2446af51..93292e30 100644 --- a/packages/av-cliper/demo/chromakey.demo.ts +++ b/packages/av-cliper/demo/chromakey.demo.ts @@ -7,7 +7,7 @@ const ctx = cvs.getContext('2d', { ; (async () => { const img = new Image() - img.src = './public/img/green-dog.jpeg' + img.src = './img/green-dog.jpeg' await new Promise(resolve => { img.onload = resolve }) diff --git a/packages/av-cliper/demo/chromakey.html b/packages/av-cliper/demo/chromakey.html index bf694613..ac634f4e 100644 --- a/packages/av-cliper/demo/chromakey.html +++ b/packages/av-cliper/demo/chromakey.html @@ -10,7 +10,7 @@

Source

- +

Output

diff --git a/packages/av-cliper/demo/concat-media.ts b/packages/av-cliper/demo/concat-media.ts index e7a4a75e..34e751f5 100644 --- a/packages/av-cliper/demo/concat-media.ts +++ b/packages/av-cliper/demo/concat-media.ts @@ -19,7 +19,7 @@ const playerContiner = document.querySelector('#player-continer')! document.querySelector('#mp4-img')?.addEventListener('click', () => { ; (async () => { - const resList = ['./public/video/webav1.mp4', './public/img/bunny.png'] + const resList = ['./video/webav1.mp4', './img/bunny.png'] const { loadStream } = playOutputStream(resList, playerContiner) const spr1 = new OffscreenSprite( @@ -82,12 +82,12 @@ document.querySelector('#mp4-img')?.addEventListener('click', () => { document.querySelector('#mp4-mp3')?.addEventListener('click', () => { ; (async () => { const resList = [ - './public/video/webav1.mp4', - './public/audio/44.1kHz-2chan.mp3' + './video/webav1.mp4', + './audio/44.1kHz-2chan.mp3' ] const { loadStream } = playOutputStream(resList, playerContiner) - // const resp1 = await fetch('./public/video/pri-bunny_avc_frag.mp4') + // const resp1 = await fetch('./video/pri-bunny_avc_frag.mp4') const resp1 = await fetch(resList[0]) const spr1 = new OffscreenSprite('spr1', new MP4Clip(resp1.body!)) @@ -113,8 +113,8 @@ document.querySelector('#mp4-mp3')?.addEventListener('click', () => { document.querySelector('#mix-audio')?.addEventListener('click', () => { ; (async () => { const resList = [ - './public/audio/44.1kHz-2chan.m4a', - './public/audio/16kHz-1chan.mp3' + './audio/44.1kHz-2chan.m4a', + './audio/16kHz-1chan.mp3' ] const { loadStream } = playOutputStream(resList, playerContiner) @@ -137,8 +137,8 @@ document.querySelector('#mix-audio')?.addEventListener('click', () => { document.querySelector('#concat-audio')?.addEventListener('click', () => { ; (async () => { const resList = [ - './public/audio/16kHz-1chan.mp3', - './public/audio/44.1kHz-2chan.m4a' + './audio/16kHz-1chan.mp3', + './audio/44.1kHz-2chan.m4a' ] const { loadStream } = playOutputStream(resList, playerContiner) @@ -159,8 +159,8 @@ document.querySelector('#concat-audio')?.addEventListener('click', () => { document.querySelector('#gif-m4a')?.addEventListener('click', () => { ; (async () => { const resList = [ - './public/img/animated.gif', - './public/audio/44.1kHz-2chan.m4a' + './img/animated.gif', + './audio/44.1kHz-2chan.m4a' ] const { loadStream } = playOutputStream(resList, playerContiner) @@ -182,8 +182,8 @@ document.querySelector('#gif-m4a')?.addEventListener('click', () => { document.querySelector('#mp4-srt')?.addEventListener('click', () => { ; (async () => { const resList = [ - './public/video/webav1.mp4', - './public/subtitles/test-sample.srt' + './video/webav1.mp4', + './subtitles/test-sample.srt' ] const { loadStream } = playOutputStream(resList, playerContiner) @@ -220,8 +220,8 @@ document.querySelector('#mp4-srt')?.addEventListener('click', () => { document.querySelector('#mp4-chromakey')?.addEventListener('click', () => { ; (async () => { const resList = [ - './public/video/chromakey-test.mp4', - './public/img/bunny.png' + './video/chromakey-test.mp4', + './img/bunny.png' ] const { loadStream } = playOutputStream(resList, playerContiner) @@ -281,9 +281,9 @@ document.querySelector('#mp4-chromakey')?.addEventListener('click', () => { document.querySelector('#complex')?.addEventListener('click', () => { ; (async () => { const mp4List = [ - './public/video/123.mp4', - './public/video/223.mp4', - './public/video/323.mp4' + './video/123.mp4', + './video/223.mp4', + './video/323.mp4' ] const width = 1280 @@ -318,7 +318,7 @@ document.querySelector('#complex')?.addEventListener('click', () => { 'spr3', new ImgClip( await createImageBitmap( - await (await fetch('./public/img/bunny.png')).blob() + await (await fetch('./img/bunny.png')).blob() ) ) ) diff --git a/packages/av-cliper/demo/decode-media.ts b/packages/av-cliper/demo/decode-media.ts index 94865e57..725aa7af 100644 --- a/packages/av-cliper/demo/decode-media.ts +++ b/packages/av-cliper/demo/decode-media.ts @@ -18,10 +18,10 @@ const cvs = document.querySelector('canvas') as HTMLCanvasElement const ctx = cvs.getContext('2d')! const imgs = { - 'image/avif': './public/img/animated.avif', - 'image/webp': './public/img/animated.webp', - 'image/png': './public/img/animated.png', - 'image/gif': './public/img/animated.gif' + 'image/avif': './img/animated.avif', + 'image/webp': './img/animated.webp', + 'image/png': './img/animated.png', + 'image/gif': './img/animated.gif' } let stopImg = () => { } @@ -53,9 +53,9 @@ document.querySelector('#decode-img')?.addEventListener('click', () => { }) const audios = { - '44.1kHz-2chan.m4a': './public/audio/44.1kHz-2chan.m4a', - '44.1kHz-2chan.mp3': './public/audio/44.1kHz-2chan.mp3', - '16kHz-1chan.mp3': './public/audio/16kHz-1chan.mp3' + '44.1kHz-2chan.m4a': './audio/44.1kHz-2chan.m4a', + '44.1kHz-2chan.mp3': './audio/44.1kHz-2chan.mp3', + '16kHz-1chan.mp3': './audio/16kHz-1chan.mp3' } let stopAudio = () => { } @@ -111,8 +111,8 @@ document.querySelector('#decode-audio')?.addEventListener('click', () => { }) const videos = { - 'bunny.mp4': './public/video/bunny-avc.mp4', - 'bear.mp4': './public/video/bear-vp9.mp4' + 'bunny.mp4': './video/bunny-avc.mp4', + 'bear.mp4': './video/bear-vp9.mp4' } document.querySelector('#decode-video')?.addEventListener('click', () => { ; (async () => { @@ -174,7 +174,7 @@ document.querySelector('#decode-video')?.addEventListener('click', () => { }) const subtitles = { - 'test-sample.srt': './public/subtitles/test-sample.srt' + 'test-sample.srt': './subtitles/test-sample.srt' } document.querySelector('#decode-subtitles')?.addEventListener('click', () => { ; (async () => { @@ -214,7 +214,7 @@ document.querySelector('#decode-subtitles')?.addEventListener('click', () => { document.querySelector('#chromakey')?.addEventListener('click', () => { ; (async () => { const clip = new MP4Clip( - (await fetch('./public/video/chromakey-test.mp4')).body! + (await fetch('./video/chromakey-test.mp4')).body! ) const chromakey = createChromakey({ similarity: 0.4, diff --git a/packages/av-cliper/demo/decode-video-worker.ts b/packages/av-cliper/demo/decode-video-worker.ts index 2d3be193..0aa2170a 100644 --- a/packages/av-cliper/demo/decode-video-worker.ts +++ b/packages/av-cliper/demo/decode-video-worker.ts @@ -1,17 +1,17 @@ import { MP4Clip } from '../src/clips' -;(async () => { - const resp1 = await fetch('./public/video/123.mp4') - const clip = new MP4Clip(resp1.body!) - await clip.ready - let time = 0 - while (true) { - const { state, video, audio } = await clip.tick(time) - console.log('worker decode', { time, video, audio, state }) - if (state === 'done') break - if (video != null && state === 'success') { - video.close() + ; (async () => { + const resp1 = await fetch('./video/123.mp4') + const clip = new MP4Clip(resp1.body!) + await clip.ready + let time = 0 + while (true) { + const { state, video, audio } = await clip.tick(time) + console.log('worker decode', { time, video, audio, state }) + if (state === 'done') break + if (video != null && state === 'success') { + video.close() + } + time += 33000 } - time += 33000 - } - clip.destroy() -})() + clip.destroy() + })() diff --git a/packages/av-cliper/demo/fast-concat-mp4.ts b/packages/av-cliper/demo/fast-concat-mp4.ts index 424f4608..88856c85 100644 --- a/packages/av-cliper/demo/fast-concat-mp4.ts +++ b/packages/av-cliper/demo/fast-concat-mp4.ts @@ -3,8 +3,8 @@ import { fastConcatMP4, mixinMP4AndAudio } from '../src/mp4-utils' import { playOutputStream } from './play-video' document.querySelector('#fast-concat-mp4')?.addEventListener('click', () => { - ;(async () => { - const resList = ['./public/video/webav1.mp4', './public/video/webav2.mp4'] + ; (async () => { + const resList = ['./video/webav1.mp4', './video/webav2.mp4'] const stream = fastConcatMP4( await Promise.all(resList.map(async url => (await fetch(url)).body!)) ) @@ -14,10 +14,10 @@ document.querySelector('#fast-concat-mp4')?.addEventListener('click', () => { }) document.querySelector('#mixin-mp4-audio')?.addEventListener('click', () => { - ;(async () => { + ; (async () => { const resList = [ - './public/video/webav1.mp4', - './public/audio/44.1kHz-2chan.mp3' + './video/webav1.mp4', + './audio/44.1kHz-2chan.mp3' ] const stream = mixinMP4AndAudio((await fetch(resList[0])).body!, { stream: (await fetch(resList[1])).body!, @@ -30,11 +30,11 @@ document.querySelector('#mixin-mp4-audio')?.addEventListener('click', () => { }) document.querySelector('#concat-and-mixin')?.addEventListener('click', () => { - ;(async () => { + ; (async () => { const resList = [ - './public/video/webav1.mp4', - './public/video/webav2.mp4', - './public/audio/44.1kHz-2chan.mp3' + './video/webav1.mp4', + './video/webav2.mp4', + './audio/44.1kHz-2chan.mp3' ] const mp4Stream = fastConcatMP4([ (await fetch(resList[0])).body!, diff --git a/packages/av-cliper/demo/public b/packages/av-cliper/demo/public deleted file mode 120000 index 20b5ee9f..00000000 --- a/packages/av-cliper/demo/public +++ /dev/null @@ -1 +0,0 @@ -../../../doc-site/public \ No newline at end of file diff --git a/packages/av-cliper/package.json b/packages/av-cliper/package.json index 5c3f021e..df56b960 100644 --- a/packages/av-cliper/package.json +++ b/packages/av-cliper/package.json @@ -19,7 +19,7 @@ "module": "dist/av-cliper.js", "main": "dist/av-cliper.umd.cjs", "scripts": { - "dev": "vite demo --host 0.0.0.0 --port 6066", + "dev": "vite demo --config demo-vite.config.ts", "test": "vitest", "test:coverage": "vitest run --coverage", "build": "vite build && tsc -p build.tsconfig.json --outDir dist",