From d833b5ef3156b62794bca34a5dd3fb4c3fa46939 Mon Sep 17 00:00:00 2001
From: Vanilagy <1696106+Vanilagy@users.noreply.github.com>
Date: Sun, 2 Mar 2025 19:30:09 +0100
Subject: [PATCH] Make use of OffscreenCanvas

---
 src/media-sink.ts   | 15 ++++++++++-----
 src/media-source.ts |  7 +++++--
 2 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/src/media-sink.ts b/src/media-sink.ts
index f8ff8e5..e880d0a 100644
--- a/src/media-sink.ts
+++ b/src/media-sink.ts
@@ -786,7 +786,7 @@ export class VideoFrameSink extends BaseMediaFrameSink<VideoFrame> {
 
 /** @public */
 export type WrappedCanvas = {
-	canvas: HTMLCanvasElement;
+	canvas: HTMLCanvasElement | OffscreenCanvas;
 	timestamp: number;
 	duration: number;
 };
@@ -815,7 +815,7 @@ export class CanvasSink {
 	/** @internal */
 	_videoFrameSink: VideoFrameSink;
 	/** @internal */
-	_canvasPool: (HTMLCanvasElement | null)[];
+	_canvasPool: (HTMLCanvasElement | OffscreenCanvas | null)[];
 	/** @internal */
 	_nextCanvasIndex = 0;
 
@@ -885,9 +885,14 @@ export class CanvasSink {
 	_videoFrameToWrappedCanvas(frame: WrappedVideoFrame): WrappedCanvas {
 		let canvas = this._canvasPool[this._nextCanvasIndex];
 		if (!canvas) {
-			canvas = document.createElement('canvas');
-			canvas.width = this._width;
-			canvas.height = this._height;
+			if (typeof OffscreenCanvas !== 'undefined') {
+				// Prefer an OffscreenCanvas
+				canvas = new OffscreenCanvas(this._width, this._height);
+			} else {
+				canvas = document.createElement('canvas');
+				canvas.width = this._width;
+				canvas.height = this._height;
+			}
 
 			if (this._canvasPool.length > 0) {
 				this._canvasPool[this._nextCanvasIndex] = canvas;
diff --git a/src/media-source.ts b/src/media-source.ts
index aaf2767..e47e055 100644
--- a/src/media-source.ts
+++ b/src/media-source.ts
@@ -398,8 +398,11 @@ export class CanvasSource extends VideoSource {
 	private _canvas: HTMLCanvasElement | OffscreenCanvas;
 
 	constructor(canvas: HTMLCanvasElement | OffscreenCanvas, encodingConfig: VideoEncodingConfig) {
-		if (!(canvas instanceof HTMLCanvasElement)) {
-			throw new TypeError('canvas must be an HTMLCanvasElement.');
+		if (
+			!(typeof HTMLCanvasElement !== 'undefined' && canvas instanceof HTMLCanvasElement)
+			&& !(typeof OffscreenCanvas !== 'undefined' && canvas instanceof OffscreenCanvas)
+		) {
+			throw new TypeError('canvas must be an HTMLCanvasElement or OffscreenCanvas.');
 		}
 		validateVideoEncodingConfig(encodingConfig);