feat: support render to offscreen canvas

libraries/scrcpy-decoder-tinyh264/src/types.ts

@@ -11,7 +11,7 @@ export interface ScrcpyVideoDecoderCapability {
 }
 
 export interface ScrcpyVideoDecoder extends Disposable {
-    readonly renderer: HTMLElement;
+    readonly renderer: HTMLElement | OffscreenCanvas;
     readonly sizeChanged: Event<{ width: number; height: number }>;
     readonly framesRendered: number;
     readonly framesSkipped: number;

libraries/scrcpy-decoder-webcodecs/src/video/decoder.ts

@@ -36,7 +36,7 @@ export class WebCodecsVideoDecoder implements ScrcpyVideoDecoder {
         return this.#writable;
     }
 
-    #canvas: HTMLCanvasElement;
+    #canvas: HTMLCanvasElement | OffscreenCanvas;
     get renderer() {
         return this.#canvas;
     }
@@ -68,11 +68,20 @@ export class WebCodecsVideoDecoder implements ScrcpyVideoDecoder {
      * @param enableCapture
      * Whether to allow capturing the canvas content using APIs like `readPixels` and `toDataURL`.
      * Enable this option may reduce performance.
+     * @param canvas Optional render target cavas element or offscreen canvas
      */
-    constructor(codec: ScrcpyVideoCodecId, enableCapture: boolean) {
+    constructor(codec: ScrcpyVideoCodecId, enableCapture: boolean, canvas?: HTMLCanvasElement | OffscreenCanvas) {
         this.#codec = codec;
 
+        if (canvas) {
+            this.#canvas = canvas
+        } else if (typeof document !== 'undefined') {
             this.#canvas = document.createElement("canvas");
+        } else if (typeof OffscreenCanvas !== 'undefined') {
+            this.#canvas = new OffscreenCanvas(0, 0);
+        } else {
+            throw new Error('no canvas input found nor any canvas can be created');
+        }
 
         try {
             this.#renderer = new WebGLFrameRenderer(

libraries/scrcpy-decoder-webcodecs/src/video/render/bitmap.ts

@@ -3,7 +3,7 @@ import type { FrameRenderer } from "./type.js";
 export class BitmapFrameRenderer implements FrameRenderer {
     #context: ImageBitmapRenderingContext;
 
-    constructor(canvas: HTMLCanvasElement) {
+    constructor(canvas: HTMLCanvasElement | OffscreenCanvas) {
         this.#context = canvas.getContext("bitmaprenderer", { alpha: false })!;
     }
 

libraries/scrcpy-decoder-webcodecs/src/video/render/webgl.ts

@@ -33,7 +33,7 @@ export class WebGLFrameRenderer implements FrameRenderer {
      * Whether to allow capturing the canvas content using APIs like `readPixels` and `toDataURL`.
      * Enable this option may reduce performance.
      */
-    constructor(canvas: HTMLCanvasElement, enableCapture: boolean) {
+    constructor(canvas: HTMLCanvasElement | OffscreenCanvas, enableCapture: boolean) {
         const gl =
             canvas.getContext("webgl2", {
                 alpha: false,