From 94d42667f143e42cf136547eb55fc8db68b2a870 Mon Sep 17 00:00:00 2001 From: Igor Samokhovets Date: Sat, 18 Jul 2026 15:26:31 +0200 Subject: [PATCH] Add extension decoders to media player example (#433) * Add extension decoders to media player example * Enable extension decoders in input examples * Simplify media player file filter * Align input file filters across examples --- examples/file-compression/file-compression.ts | 8 +++++++- examples/hls-transcoding/hls-transcoding.ts | 8 +++++++- examples/media-player/media-player.ts | 8 +++++++- examples/thumbnail-generation/thumbnail-generation.ts | 8 +++++++- tsconfig.vite.json | 8 +++++--- vite.config.ts | 2 ++ 6 files changed, 35 insertions(+), 7 deletions(-) diff --git a/examples/file-compression/file-compression.ts b/examples/file-compression/file-compression.ts index d4613fa..81ed19b 100644 --- a/examples/file-compression/file-compression.ts +++ b/examples/file-compression/file-compression.ts @@ -9,8 +9,14 @@ import { Conversion, QUALITY_VERY_LOW, } from 'mediabunny'; +import { registerAc3Decoder } from '@mediabunny/ac3'; +import { registerProresDecoder } from '@mediabunny/prores'; import SampleFileUrl from '../../docs/assets/big-buck-bunny-trimmed.mp4'; + +// Enable codecs that aren't natively supported by WebCodecs. +registerAc3Decoder(); +registerProresDecoder(); (document.querySelector('#sample-file-download') as HTMLAnchorElement).href = SampleFileUrl; const selectMediaButton = document.querySelector('#select-file') as HTMLButtonElement; @@ -137,7 +143,7 @@ const compressFile = async (resource: File | string) => { selectMediaButton.addEventListener('click', () => { const fileInput = document.createElement('input'); fileInput.type = 'file'; - fileInput.accept = 'video/*,video/x-matroska,video/mp2t,.ts,audio/*,audio/aac'; + fileInput.accept = 'video/*,video/x-matroska,video/mp2t,.mkv,.ts,audio/*,audio/aac,.aac'; fileInput.addEventListener('change', () => { const file = fileInput.files?.[0]; if (!file) { diff --git a/examples/hls-transcoding/hls-transcoding.ts b/examples/hls-transcoding/hls-transcoding.ts index 7444bff..4b5b0eb 100644 --- a/examples/hls-transcoding/hls-transcoding.ts +++ b/examples/hls-transcoding/hls-transcoding.ts @@ -15,8 +15,14 @@ import { QUALITY_LOW, QUALITY_VERY_LOW, } from 'mediabunny'; +import { registerAc3Decoder } from '@mediabunny/ac3'; +import { registerProresDecoder } from '@mediabunny/prores'; import SampleFileUrl from '../../docs/assets/big-buck-bunny-trimmed.mp4'; + +// Enable codecs that aren't natively supported by WebCodecs. +registerAc3Decoder(); +registerProresDecoder(); (document.querySelector('#sample-file-download') as HTMLAnchorElement).href = SampleFileUrl; declare global { @@ -233,7 +239,7 @@ selectDirectoryButton.addEventListener('click', async () => { selectMediaButton.addEventListener('click', () => { const fileInput = document.createElement('input'); fileInput.type = 'file'; - fileInput.accept = 'video/*,video/x-matroska,video/mp2t,.ts'; + fileInput.accept = 'video/*,video/x-matroska,video/mp2t,.mkv,.ts'; fileInput.addEventListener('change', () => { const file = fileInput.files![0]; if (file) { diff --git a/examples/media-player/media-player.ts b/examples/media-player/media-player.ts index 30f6040..d0943b6 100644 --- a/examples/media-player/media-player.ts +++ b/examples/media-player/media-player.ts @@ -8,8 +8,14 @@ import { WrappedAudioBuffer, WrappedCanvas, } from 'mediabunny'; +import { registerAc3Decoder } from '@mediabunny/ac3'; +import { registerProresDecoder } from '@mediabunny/prores'; import SampleFileUrl from '../../docs/assets/big-buck-bunny-trimmed.mp4'; + +// Enable codecs that aren't natively supported by WebCodecs. +registerAc3Decoder(); +registerProresDecoder(); (document.querySelector('#sample-file-download') as HTMLAnchorElement).href = SampleFileUrl; const selectMediaButton = document.querySelector('#select-file') as HTMLButtonElement; @@ -732,7 +738,7 @@ window.addEventListener('resize', () => { selectMediaButton.addEventListener('click', () => { const fileInput = document.createElement('input'); fileInput.type = 'file'; - fileInput.accept = 'video/*,video/x-matroska,video/mp2t,.ts,audio/*,audio/aac'; + fileInput.accept = 'video/*,video/x-matroska,video/mp2t,.mkv,.ts,audio/*,audio/aac,.aac'; fileInput.addEventListener('change', () => { const file = fileInput.files?.[0]; if (!file) { diff --git a/examples/thumbnail-generation/thumbnail-generation.ts b/examples/thumbnail-generation/thumbnail-generation.ts index 5681568..5ab3fc5 100644 --- a/examples/thumbnail-generation/thumbnail-generation.ts +++ b/examples/thumbnail-generation/thumbnail-generation.ts @@ -1,6 +1,12 @@ import { Input, ALL_FORMATS, BlobSource, UrlSource, CanvasSink } from 'mediabunny'; +import { registerAc3Decoder } from '@mediabunny/ac3'; +import { registerProresDecoder } from '@mediabunny/prores'; import SampleFileUrl from '../../docs/assets/big-buck-bunny-trimmed.mp4'; + +// Enable codecs that aren't natively supported by WebCodecs. +registerAc3Decoder(); +registerProresDecoder(); (document.querySelector('#sample-file-download') as HTMLAnchorElement).href = SampleFileUrl; const selectMediaButton = document.querySelector('#select-file') as HTMLButtonElement; @@ -122,7 +128,7 @@ const generateThumbnails = async (resource: File | string) => { selectMediaButton.addEventListener('click', () => { const fileInput = document.createElement('input'); fileInput.type = 'file'; - fileInput.accept = 'video/*,video/x-matroska,video/mp2t,.ts,audio/*,audio/aac'; + fileInput.accept = 'video/*,video/x-matroska,video/mp2t,.mkv,.ts,audio/*,audio/aac,.aac'; fileInput.addEventListener('change', () => { const file = fileInput.files?.[0]; if (!file) { diff --git a/tsconfig.vite.json b/tsconfig.vite.json index b8dad8d..eb5ae43 100644 --- a/tsconfig.vite.json +++ b/tsconfig.vite.json @@ -19,6 +19,8 @@ "./examples/**/*.ts" ], "references": [ - { "path": "./src" } - ] -} \ No newline at end of file + { "path": "./src" }, + { "path": "./packages/ac3" }, + { "path": "./packages/prores" } + ] +} diff --git a/vite.config.ts b/vite.config.ts index df28f91..576ccc9 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -21,6 +21,8 @@ export default defineConfig({ resolve: { alias: { 'mediabunny': path.resolve(__dirname, './dist/bundles/mediabunny.mjs'), + '@mediabunny/ac3': + path.resolve(__dirname, './packages/ac3/dist/bundles/mediabunny-ac3.mjs'), '@mediabunny/aac-encoder': path.resolve(__dirname, './packages/aac-encoder/dist/bundles/mediabunny-aac-encoder.mjs'), '@mediabunny/flac-encoder':