Implement demo media player, add internal queue to media frame iterator, adjust audio buffer timestamps

dev/demux.html

@@ -13,10 +13,32 @@
 			source
 		});
 
+		const videoTrack = await input.getPrimaryVideoTrack();
+		const drain = new Metamuxer.VideoFrameDrain(videoTrack);
+		const width = await videoTrack.getWidth();
+		const height = await videoTrack.getHeight();
+
+		const canvas = document.createElement('canvas');
+		canvas.width = width;
+		canvas.height = height;
+		document.body.append(canvas);
+
+		const context = canvas.getContext('2d');
+
+		// Top-level for await loop inside the event listener
+		for await (const frame of drain.frames()) {
+			context.drawImage(frame, 0, 0, width, height);
+			frame.close();
+
+			await new Promise(resolve => setTimeout(resolve, 1000 / 24));
+		}
+
+		/*
 		const videoTrack = await input.getPrimaryVideoTrack();
 		const audioTrack = await input.getPrimaryAudioTrack();;
 		console.log(videoTrack.computeDuration());
 		console.log(await audioTrack.computeDuration());
+		*/
 
 		/*
 		const audioTrack = await input.getPrimaryAudioTrack();