Skip to content

Commit

Permalink
Showing 9 changed files with 67 additions and 57 deletions.
11 changes: 11 additions & 0 deletions packages/av-cliper/demo-vite.config.ts
Original file line number Diff line number Diff line change
@@ -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')
})

2 changes: 1 addition & 1 deletion packages/av-cliper/demo/chromakey.demo.ts
Original file line number Diff line number Diff line change
@@ -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
})
2 changes: 1 addition & 1 deletion packages/av-cliper/demo/chromakey.html
Original file line number Diff line number Diff line change
@@ -10,7 +10,7 @@

<body>
<H2>Source</H2>
<img src="./public/img/green-dog.jpeg" alt="">
<img src="./img/green-dog.jpeg" alt="">
<H2>Output</H2>
<canvas id="canvas" width="900" height="500"></canvas>
<script src="./chromakey.demo.ts" type="module"></script>
36 changes: 18 additions & 18 deletions packages/av-cliper/demo/concat-media.ts
Original file line number Diff line number Diff line change
@@ -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()
)
)
)
22 changes: 11 additions & 11 deletions packages/av-cliper/demo/decode-media.ts
Original file line number Diff line number Diff line change
@@ -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,
30 changes: 15 additions & 15 deletions packages/av-cliper/demo/decode-video-worker.ts
Original file line number Diff line number Diff line change
@@ -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()
})()
18 changes: 9 additions & 9 deletions packages/av-cliper/demo/fast-concat-mp4.ts
Original file line number Diff line number Diff line change
@@ -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!,
1 change: 0 additions & 1 deletion packages/av-cliper/demo/public

This file was deleted.

2 changes: 1 addition & 1 deletion packages/av-cliper/package.json
Original file line number Diff line number Diff line change
@@ -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",

0 comments on commit 5d447e6

Please sign in to comment.