Improve error messages in examples

examples/live-recording/live-recording.ts

@@ -38,6 +38,7 @@ const startRecording = async () => {
 		mainContainer.style.display = 'none';
 		videoElement.src = '';
 		downloadButton.style.display = 'none';
+		errorElement.textContent = '';
 
 		// Paint a white background to the canvas
 		context.fillStyle = 'white';

examples/media-player/index.html

@@ -29,6 +29,8 @@
 		<hr class="w-full max-w-96 my-4 border-zinc-300 dark:border-zinc-700" style="display: none;">
 
 		<p id="error-element" class="text-red-500"></p>
+		<p id="warning-element" class="text-amber-500 mb-1"></p>
+
 		<div id="player" class="relative bg-black rounded-xl shrink min-h-14 min-w-0 w-full max-w-5xl overflow-hidden select-none" style="display: none;">
 			<canvas class="size-full object-contain" width="1280" height="720"></canvas>
 

examples/media-player/media-player.ts

@@ -30,6 +30,7 @@ const volumeIconWrapper = document.querySelector('#volume-icon-wrapper') as HTML
 const volumeButton = document.querySelector('#volume-button') as HTMLButtonElement;
 const fullscreenButton = document.querySelector('#fullscreen-button') as HTMLButtonElement;
 const errorElement = document.querySelector('#error-element') as HTMLDivElement;
+const warningElement = document.querySelector('#warning-element') as HTMLDivElement;
 
 const context = canvas.getContext('2d', { alpha: false, desynchronized: true })!;
 
@@ -81,6 +82,8 @@ const initMediaPlayer = async (file: File) => {
 		fileNameElement.textContent = file.name;
 		horizontalRule.style.display = '';
 		playerContainer.style.display = 'none';
+		errorElement.textContent = '';
+		warningElement.textContent = '';
 
 		// Create an Input from the file
 		const input = new Input({
@@ -95,17 +98,38 @@ const initMediaPlayer = async (file: File) => {
 		let videoTrack = await input.getPrimaryVideoTrack();
 		let audioTrack = await input.getPrimaryAudioTrack();
 
-		if (!(await videoTrack?.canDecode())) {
-			// We can't decode the video track, so treat it like there is no video track
-			videoTrack = null;
+		let problemMessage = '';
+
+		if (videoTrack) {
+			if (videoTrack.codec === null) {
+				problemMessage += 'Unsupported video codec. ';
+				videoTrack = null;
+			} else if (!(await videoTrack.canDecode())) {
+				problemMessage += 'Unable to decode the video track. ';
+				videoTrack = null;
+			}
 		}
-		if (!(await audioTrack?.canDecode())) {
-			// We can't decode the audio track, so treat it like there is no audio track
-			audioTrack = null;
+
+		if (audioTrack) {
+			if (audioTrack.codec === null) {
+				problemMessage += 'Unsupported audio codec. ';
+				audioTrack = null;
+			} else if (!(await audioTrack.canDecode())) {
+				problemMessage += 'Unable to decode the audio track. ';
+				audioTrack = null;
+			}
 		}
 
 		if (!videoTrack && !audioTrack) {
-			throw new Error('Media file has no playable video or audio track.');
+			if (!problemMessage) {
+				problemMessage = 'No audio or video track found.';
+			}
+
+			throw new Error(problemMessage);
+		}
+
+		if (problemMessage) {
+			warningElement.textContent = problemMessage;
 		}
 
 		// We must create the audio context with the matching sample rate for correct acoustic results

examples/thumbnail-generation/thumbnail-generation.ts

@@ -15,7 +15,7 @@ const THUMBNAIL_SIZE = 200;
 const generateThumbnails = async (file: File) => {
 	fileNameElement.textContent = file.name;
 	horizontalRule.style.display = '';
-	errorElement.innerHTML = '';
+	errorElement.textContent = '';
 	thumbnailContainer.innerHTML = '';
 
 	try {
@@ -30,6 +30,14 @@ const generateThumbnails = async (file: File) => {
 			throw new Error('File has no video track.');
 		}
 
+		if (videoTrack.codec === null) {
+			throw new Error('Unsupported video codec.');
+		}
+
+		if (!(await videoTrack.canDecode())) {
+			throw new Error('Unable to decode the video track.');
+		}
+
 		// Compute width and height of the thumbnails such that the larger dimension is equal to THUMBNAIL_SIZE
 		const width = videoTrack.displayWidth > videoTrack.displayHeight
 			? THUMBNAIL_SIZE