From d3f052e04098cde52ef894462f54fe1743d63a08 Mon Sep 17 00:00:00 2001
From: Mustafa BOLEKEN <mustafaboleken@yahoo.com>
Date: Mon, 25 Nov 2024 09:48:23 +0300
Subject: [PATCH] Move to offscreen canvas in setDesktopwithCameraSource

---
 src/main/js/media_manager.js | 75 +++++++++++++++++-------------------
 1 file changed, 36 insertions(+), 39 deletions(-)

diff --git a/src/main/js/media_manager.js b/src/main/js/media_manager.js
index ff6ead3f..7229e78f 100644
--- a/src/main/js/media_manager.js
+++ b/src/main/js/media_manager.js
@@ -354,63 +354,60 @@ export class MediaManager {
      */
     setDesktopwithCameraSource(stream, streamId, onEndedCallback) {
         this.desktopStream = stream;
-        return this.navigatorUserMedia({video: true, audio: false}, cameraStream => {
-            this.smallVideoTrack = cameraStream.getVideoTracks()[0];
 
-            //create a canvas element
-            var canvas = document.createElement("canvas");
-            var canvasContext = canvas.getContext("2d");
+        return this.navigatorUserMedia({ video: true, audio: false }, (cameraStream) => {
+            this.smallVideoTrack = cameraStream.getVideoTracks()[0];
 
-            //create video element for screen
-            //var screenVideo = document.getElementById('sourceVideo');
-            var screenVideo = document.createElement('video');
+            // Create an offscreen canvas
+            const offscreenCanvas = new OffscreenCanvas(1, 1); // Initial dimensions will be updated dynamically
+            const canvasContext = offscreenCanvas.getContext("2d");
 
+            // Create video elements for screen and camera
+            const screenVideo = document.createElement('video');
             screenVideo.srcObject = stream;
             screenVideo.play();
-            //create video element for camera
-            var cameraVideo = document.createElement('video');
 
+            const cameraVideo = document.createElement('video');
             cameraVideo.srcObject = cameraStream;
             cameraVideo.play();
-            var canvasStream = canvas.captureStream(15);
+
+            // Capture stream from the offscreen canvas
+            const canvasStream = offscreenCanvas.captureStream(15);
 
             if (onEndedCallback != null) {
-                stream.getVideoTracks()[0].onended = function (event) {
+                stream.getVideoTracks()[0].onended = (event) => {
                     onEndedCallback(event);
-                }
-            }
-            var promise;
-            if (this.localStream == null) {
-                promise = this.gotStream(canvasStream);
-            } else {
-                promise = this.updateVideoTrack(canvasStream, streamId, onended, null);
+                };
             }
 
-            promise.then(() => {
+            const promise = this.localStream == null
+                ? this.gotStream(canvasStream)
+                : this.updateVideoTrack(canvasStream, streamId, onEndedCallback, null);
 
-                //update the canvas
+            promise.then(() => {
+                // Update the offscreen canvas at a regular interval
                 this.desktopCameraCanvasDrawerTimer = setInterval(() => {
-                    //draw screen to canvas
-                    canvas.width = screenVideo.videoWidth;
-                    canvas.height = screenVideo.videoHeight;
-                    canvasContext.drawImage(screenVideo, 0, 0, canvas.width, canvas.height);
-
-                    var cameraWidth = screenVideo.videoWidth * (this.camera_percent / 100);
-                    var cameraHeight = (cameraVideo.videoHeight / cameraVideo.videoWidth) * cameraWidth
-
-                    var positionX = (canvas.width - cameraWidth) - this.camera_margin;
-                    var positionY;
-
-                    if (this.camera_location == "top") {
-                        positionY = this.camera_margin;
-                    } else { //if not top, make it bottom
-                        //draw camera on right bottom corner
-                        positionY = (canvas.height - cameraHeight) - this.camera_margin;
-                    }
+                    // Set canvas size to match the screen video
+                    offscreenCanvas.width = screenVideo.videoWidth;
+                    offscreenCanvas.height = screenVideo.videoHeight;
+
+                    // Draw screen video to the canvas
+                    canvasContext.drawImage(screenVideo, 0, 0, offscreenCanvas.width, offscreenCanvas.height);
+
+                    // Calculate camera overlay dimensions
+                    const cameraWidth = screenVideo.videoWidth * (this.camera_percent / 100);
+                    const cameraHeight = (cameraVideo.videoHeight / cameraVideo.videoWidth) * cameraWidth;
+
+                    const positionX = offscreenCanvas.width - cameraWidth - this.camera_margin;
+                    const positionY = this.camera_location === "top"
+                        ? this.camera_margin
+                        : offscreenCanvas.height - cameraHeight - this.camera_margin;
+
+                    // Draw camera overlay on the canvas
                     canvasContext.drawImage(cameraVideo, positionX, positionY, cameraWidth, cameraHeight);
                 }, 66);
             });
-        }, true)
+        }, true);
     }
 
     /**