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

@@ -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) {

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) {

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) {

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) {

tsconfig.vite.json

@@ -19,6 +19,8 @@
 		"./examples/**/*.ts"
 	],
 	"references": [
-        { "path": "./src" }
+		{ "path": "./src" },
-    ]
+		{ "path": "./packages/ac3" },
-}
+		{ "path": "./packages/prores" }
+	]
+}

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':