Add thumbnail generation example, fix MP3 detection code error, prefer canvas element over OffscreenCanvas

src/input-format.ts

@@ -226,7 +226,7 @@ export class Mp3InputFormat extends InputFormat {
 		const framesStartPos = mp3Reader.pos;
 		await mp3Reader.reader.loadRange(mp3Reader.pos, mp3Reader.pos + 4096);
 
-		const firstHeader = mp3Reader.readNextFrameHeader(framesStartPos + 4096);
+		const firstHeader = mp3Reader.readNextFrameHeader(Math.min(framesStartPos + 4096, sourceSize));
 		if (!firstHeader) {
 			return false;
 		}
@@ -239,7 +239,7 @@ export class Mp3InputFormat extends InputFormat {
 		// Fine, we found one frame header, but we're still not entirely sure this is MP3. Let's check if we can find
 		// another header nearby:
 		mp3Reader.pos = firstHeader.startPos + firstHeader.totalSize;
-		const secondHeader = mp3Reader.readNextFrameHeader(framesStartPos + 4096);
+		const secondHeader = mp3Reader.readNextFrameHeader(Math.min(framesStartPos + 4096, sourceSize));
 		if (!secondHeader) {
 			return false;
 		}

src/media-sink.ts

@@ -922,6 +922,8 @@ export type CanvasSinkOptions = {
  * A sink that renders video samples (frames) of the given video track to canvases. This is often more useful than
  * directly retrieving frames, as it comes with common preprocessing steps such as resizing or applying rotation
  * metadata.
+ *
+ * This sink will yield HTMLCanvasElements when in a DOM context, and OffscreenCanvases otherwise.
  * @public
  */
 export class CanvasSink {
@@ -1008,13 +1010,13 @@ export class CanvasSink {
 	_videoSampleToWrappedCanvas(sample: VideoSample): WrappedCanvas {
 		let canvas = this._canvasPool[this._nextCanvasIndex];
 		if (!canvas) {
-			if (typeof OffscreenCanvas !== 'undefined') {
-				// Prefer an OffscreenCanvas
-				canvas = new OffscreenCanvas(this._width, this._height);
-			} else {
+			if (typeof document !== 'undefined') {
+				// Prefer an HTMLCanvasElement
 				canvas = document.createElement('canvas');
 				canvas.width = this._width;
 				canvas.height = this._height;
+			} else {
+				canvas = new OffscreenCanvas(this._width, this._height);
 			}
 
 			if (this._canvasPool.length > 0) {