diff --git a/examples/live-recording/live-recording.ts b/examples/live-recording/live-recording.ts
index dd4c721..435cc2d 100644
--- a/examples/live-recording/live-recording.ts
+++ b/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';
diff --git a/examples/media-player/index.html b/examples/media-player/index.html
index a5d5e62..17eaa76 100644
--- a/examples/media-player/index.html
+++ b/examples/media-player/index.html
@@ -29,6 +29,8 @@
+
+
diff --git a/examples/media-player/media-player.ts b/examples/media-player/media-player.ts
index e59ad80..f106c3f 100644
--- a/examples/media-player/media-player.ts
+++ b/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
diff --git a/examples/thumbnail-generation/thumbnail-generation.ts b/examples/thumbnail-generation/thumbnail-generation.ts
index c88bc6a..d5c62a7 100644
--- a/examples/thumbnail-generation/thumbnail-generation.ts
+++ b/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