From 0d68bdbf9ed54f79d89798cb4c59997f4834dfa9 Mon Sep 17 00:00:00 2001 From: amhsirak Date: Thu, 20 Mar 2025 19:01:46 +0530 Subject: [PATCH 1/7] feat: use png instead of jpeg --- server/src/browser-management/classes/RemoteBrowser.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/server/src/browser-management/classes/RemoteBrowser.ts b/server/src/browser-management/classes/RemoteBrowser.ts index ee2dccf8..79912b36 100644 --- a/server/src/browser-management/classes/RemoteBrowser.ts +++ b/server/src/browser-management/classes/RemoteBrowser.ts @@ -35,7 +35,7 @@ const SCREENCAST_CONFIG: { compressionQuality: number; maxQueueSize: number; } = { - format: 'jpeg', + format: 'png', maxWidth: 1280, maxHeight: 720, targetFPS: 30, From 80900ce9e3d80e194be1e67c58d08017823a395e Mon Sep 17 00:00:00 2001 From: amhsirak Date: Thu, 20 Mar 2025 20:04:38 +0530 Subject: [PATCH 2/7] feat: set device scale factor to 2 --- server/src/browser-management/classes/RemoteBrowser.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/server/src/browser-management/classes/RemoteBrowser.ts b/server/src/browser-management/classes/RemoteBrowser.ts index 79912b36..6c3fe195 100644 --- a/server/src/browser-management/classes/RemoteBrowser.ts +++ b/server/src/browser-management/classes/RemoteBrowser.ts @@ -282,6 +282,7 @@ export class RemoteBrowser { isMobile: false, hasTouch: false, userAgent: this.getUserAgent(), + deviceScaleFactor: 2, }; if (proxyOptions.server) { From 3a1a6768f48cadc6a88039993aa7b59782ce6b57 Mon Sep 17 00:00:00 2001 From: amhsirak Date: Thu, 20 Mar 2025 20:08:34 +0530 Subject: [PATCH 3/7] feat: use png from sharp --- server/src/browser-management/classes/RemoteBrowser.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/server/src/browser-management/classes/RemoteBrowser.ts b/server/src/browser-management/classes/RemoteBrowser.ts index 6c3fe195..5d71905e 100644 --- a/server/src/browser-management/classes/RemoteBrowser.ts +++ b/server/src/browser-management/classes/RemoteBrowser.ts @@ -531,7 +531,7 @@ export class RemoteBrowser { private async optimizeScreenshot(screenshot: Buffer): Promise { try { return await sharp(screenshot) - .jpeg({ + .png({ quality: Math.round(SCREENCAST_CONFIG.compressionQuality * 100), progressive: true }) From 6533ce018e5476c21806f9de668978e5026fe432 Mon Sep 17 00:00:00 2001 From: Rohit Date: Thu, 20 Mar 2025 23:14:07 +0530 Subject: [PATCH 4/7] feat: improve image quality params --- .../classes/RemoteBrowser.ts | 48 ++++++++++++++----- 1 file changed, 35 insertions(+), 13 deletions(-) diff --git a/server/src/browser-management/classes/RemoteBrowser.ts b/server/src/browser-management/classes/RemoteBrowser.ts index 5d71905e..33fc8228 100644 --- a/server/src/browser-management/classes/RemoteBrowser.ts +++ b/server/src/browser-management/classes/RemoteBrowser.ts @@ -39,7 +39,7 @@ const SCREENCAST_CONFIG: { maxWidth: 1280, maxHeight: 720, targetFPS: 30, - compressionQuality: 0.8, + compressionQuality: 0.95, maxQueueSize: 2 }; @@ -255,6 +255,8 @@ export class RemoteBrowser { "--disable-extensions", "--no-sandbox", "--disable-dev-shm-usage", + "--force-color-profile=srgb", + "--force-device-scale-factor=2", ], })); const proxyConfig = await getDecryptedProxyConfig(userId); @@ -532,14 +534,17 @@ export class RemoteBrowser { try { return await sharp(screenshot) .png({ - quality: Math.round(SCREENCAST_CONFIG.compressionQuality * 100), - progressive: true + quality: Math.round(SCREENCAST_CONFIG.compressionQuality * 100), + compressionLevel: 3, + adaptiveFiltering: true, + force: true }) .resize({ width: SCREENCAST_CONFIG.maxWidth, height: SCREENCAST_CONFIG.maxHeight, fit: 'inside', - withoutEnlargement: true + withoutEnlargement: true, + kernel: sharp.kernel.mitchell }) .toBuffer(); } catch (error) { @@ -701,6 +706,9 @@ export class RemoteBrowser { try { await this.client.send('Page.startScreencast', { format: SCREENCAST_CONFIG.format, + quality: Math.round(SCREENCAST_CONFIG.compressionQuality * 100), + maxWidth: SCREENCAST_CONFIG.maxWidth, + maxHeight: SCREENCAST_CONFIG.maxHeight, }); // Set flag to indicate screencast is active this.isScreencastActive = true; @@ -753,27 +761,41 @@ export class RemoteBrowser { } return; } - + this.isProcessingScreenshot = true; - + try { - const optimizedScreenshot = await this.optimizeScreenshot(payload); + const optimizationPromise = this.optimizeScreenshot(payload); + + const timeoutPromise = new Promise((resolve) => { + setTimeout(() => resolve(payload), 100); + }); + + const optimizedScreenshot = await Promise.race([optimizationPromise, timeoutPromise]); const base64Data = optimizedScreenshot.toString('base64'); - const dataWithMimeType = `data:image/jpeg;base64,${base64Data}`; - - // Emit with user context to ensure the frontend can identify which browser's screenshot this is + const dataWithMimeType = `data:image/png;base64,${base64Data}`; + this.socket.emit('screencast', { image: dataWithMimeType, userId: this.userId, viewport: viewportSize || await this.currentPage?.viewportSize() || null }); - - logger.debug('Screenshot emitted'); } catch (error) { logger.error('Screenshot emission failed:', error); + try { + const base64Data = payload.toString('base64'); + const dataWithMimeType = `data:image/png;base64,${base64Data}`; + this.socket.emit('screencast', { + image: dataWithMimeType, + userId: this.userId, + viewport: viewportSize || await this.currentPage?.viewportSize() || null + }); + } catch (e) { + logger.error('Fallback screenshot emission also failed:', e); + } } finally { this.isProcessingScreenshot = false; - + if (this.screenshotQueue.length > 0) { const nextScreenshot = this.screenshotQueue.shift(); if (nextScreenshot) { From 3c397c8a15ade1218c14c5f497d08347f3356dcd Mon Sep 17 00:00:00 2001 From: Rohit Date: Fri, 21 Mar 2025 00:52:11 +0530 Subject: [PATCH 5/7] feat: reduce margin browser recorder --- src/index.css | 29 +++-------------------------- 1 file changed, 3 insertions(+), 26 deletions(-) diff --git a/src/index.css b/src/index.css index a5422132..bed297c9 100644 --- a/src/index.css +++ b/src/index.css @@ -60,9 +60,9 @@ code { align-items: center; position: relative; box-sizing: border-box; - width: calc(100% - 4rem); - height: calc(100vh - 4rem); - margin: 2rem 2rem 2rem 2rem; + width: 100%; + height: calc(100vh - 2rem); + margin: 1rem 1rem 1rem 1rem; overflow: hidden; } @@ -81,7 +81,6 @@ code { } .right-side-panel { - margin-left: 1.5rem; transform: scale(1); transform-origin: top left; overflow: hidden; @@ -91,26 +90,4 @@ code { .MuiButton-root[sx*="position: 'absolute'"] { bottom: 2rem !important; margin-bottom: 0 !important; -} - -/* Consistent layout across all screen sizes */ -@media screen and (min-width: 1024px) { - #browser-recorder { - width: calc(100% - 4rem); - height: calc(100vh - 4rem); - margin: 2rem 2rem 2rem 2rem; - } -} - -/* Adjust for very small screens */ -@media screen and (max-width: 1023px) { - #browser-recorder { - width: calc(100% - 2rem); - height: calc(100vh - 3rem); - margin: 1.5rem 1rem 1.5rem 1rem; - } - - .right-side-panel { - margin-left: 1rem; - } } \ No newline at end of file From a25747eac86885c728376c890a9435a1f36c697a Mon Sep 17 00:00:00 2001 From: Rohit Date: Fri, 21 Mar 2025 00:53:00 +0530 Subject: [PATCH 6/7] feat: increase dimensions for browser --- src/helpers/dimensionUtils.ts | 38 +++++++++++++++++------------------ 1 file changed, 19 insertions(+), 19 deletions(-) diff --git a/src/helpers/dimensionUtils.ts b/src/helpers/dimensionUtils.ts index 03c1c0c2..ab9dd209 100644 --- a/src/helpers/dimensionUtils.ts +++ b/src/helpers/dimensionUtils.ts @@ -42,27 +42,27 @@ export const getResponsiveDimensions = (): AppDimensions => { const windowWidth = window.innerWidth; const windowHeight = window.innerHeight; - const browserWidth = windowWidth * 0.7; - const outputPreviewWidth = windowWidth * 0.716; + const browserWidth = windowWidth * 0.735; + const outputPreviewWidth = windowWidth * 0.743; const heightBreakpoints = [ - { height: HEIGHT_BREAKPOINTS.xxxxxxxxxxxxxl, fraction: 0.82 }, - { height: HEIGHT_BREAKPOINTS.xxxxxxxxxxxxl, fraction: 0.81 }, - { height: HEIGHT_BREAKPOINTS.xxxxxxxxxxxl, fraction: 0.80 }, - { height: HEIGHT_BREAKPOINTS.xxxxxxxxxxl, fraction: 0.79 }, - { height: HEIGHT_BREAKPOINTS.xxxxxxxxxl, fraction: 0.78 }, - { height: HEIGHT_BREAKPOINTS.xxxxxxxxl, fraction: 0.77 }, - { height: HEIGHT_BREAKPOINTS.xxxxxxxl, fraction: 0.76 }, - { height: HEIGHT_BREAKPOINTS.xxxxxxl, fraction: 0.75 }, - { height: HEIGHT_BREAKPOINTS.xxxxxl, fraction: 0.74 }, - { height: HEIGHT_BREAKPOINTS.xxxxl, fraction: 0.73 }, - { height: HEIGHT_BREAKPOINTS.xxxl, fraction: 0.72 }, - { height: HEIGHT_BREAKPOINTS.xxl, fraction: 0.71 }, - { height: HEIGHT_BREAKPOINTS.xl, fraction: 0.70 }, - { height: HEIGHT_BREAKPOINTS.lg, fraction: 0.68 }, - { height: HEIGHT_BREAKPOINTS.md, fraction: 0.66 }, - { height: HEIGHT_BREAKPOINTS.sm, fraction: 0.63 }, - { height: 0, fraction: 0.62 } + { height: HEIGHT_BREAKPOINTS.xxxxxxxxxxxxxl, fraction: 0.84 }, + { height: HEIGHT_BREAKPOINTS.xxxxxxxxxxxxl, fraction: 0.83 }, + { height: HEIGHT_BREAKPOINTS.xxxxxxxxxxxl, fraction: 0.82 }, + { height: HEIGHT_BREAKPOINTS.xxxxxxxxxxl, fraction: 0.81 }, + { height: HEIGHT_BREAKPOINTS.xxxxxxxxxl, fraction: 0.80 }, + { height: HEIGHT_BREAKPOINTS.xxxxxxxxl, fraction: 0.79 }, + { height: HEIGHT_BREAKPOINTS.xxxxxxxl, fraction: 0.78 }, + { height: HEIGHT_BREAKPOINTS.xxxxxxl, fraction: 0.77 }, + { height: HEIGHT_BREAKPOINTS.xxxxxl, fraction: 0.76 }, + { height: HEIGHT_BREAKPOINTS.xxxxl, fraction: 0.75 }, + { height: HEIGHT_BREAKPOINTS.xxxl, fraction: 0.741 }, + { height: HEIGHT_BREAKPOINTS.xxl, fraction: 0.74 }, + { height: HEIGHT_BREAKPOINTS.xl, fraction: 0.72 }, + { height: HEIGHT_BREAKPOINTS.lg, fraction: 0.70 }, + { height: HEIGHT_BREAKPOINTS.md, fraction: 0.68 }, + { height: HEIGHT_BREAKPOINTS.sm, fraction: 0.67 }, + { height: 0, fraction: 0.67 } ]; const heightFraction = heightBreakpoints.find(bp => windowHeight >= bp.height)?.fraction ?? 0.62; From eaef5c5fa79815950e05d84d64f760d231fa747d Mon Sep 17 00:00:00 2001 From: amhsirak Date: Fri, 21 Mar 2025 01:09:06 +0530 Subject: [PATCH 7/7] fix: set margin 1rem --- src/index.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/index.css b/src/index.css index bed297c9..f4ee6615 100644 --- a/src/index.css +++ b/src/index.css @@ -62,7 +62,7 @@ code { box-sizing: border-box; width: 100%; height: calc(100vh - 2rem); - margin: 1rem 1rem 1rem 1rem; + margin: 1rem; overflow: hidden; }