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",