feat: improve image quality params

This commit is contained in:
Rohit
2025-03-20 23:14:07 +05:30
parent 3a1a6768f4
commit 6533ce018e

View File

@@ -39,7 +39,7 @@ const SCREENCAST_CONFIG: {
maxWidth: 1280, maxWidth: 1280,
maxHeight: 720, maxHeight: 720,
targetFPS: 30, targetFPS: 30,
compressionQuality: 0.8, compressionQuality: 0.95,
maxQueueSize: 2 maxQueueSize: 2
}; };
@@ -255,6 +255,8 @@ export class RemoteBrowser {
"--disable-extensions", "--disable-extensions",
"--no-sandbox", "--no-sandbox",
"--disable-dev-shm-usage", "--disable-dev-shm-usage",
"--force-color-profile=srgb",
"--force-device-scale-factor=2",
], ],
})); }));
const proxyConfig = await getDecryptedProxyConfig(userId); const proxyConfig = await getDecryptedProxyConfig(userId);
@@ -532,14 +534,17 @@ export class RemoteBrowser {
try { try {
return await sharp(screenshot) return await sharp(screenshot)
.png({ .png({
quality: Math.round(SCREENCAST_CONFIG.compressionQuality * 100), quality: Math.round(SCREENCAST_CONFIG.compressionQuality * 100),
progressive: true compressionLevel: 3,
adaptiveFiltering: true,
force: true
}) })
.resize({ .resize({
width: SCREENCAST_CONFIG.maxWidth, width: SCREENCAST_CONFIG.maxWidth,
height: SCREENCAST_CONFIG.maxHeight, height: SCREENCAST_CONFIG.maxHeight,
fit: 'inside', fit: 'inside',
withoutEnlargement: true withoutEnlargement: true,
kernel: sharp.kernel.mitchell
}) })
.toBuffer(); .toBuffer();
} catch (error) { } catch (error) {
@@ -701,6 +706,9 @@ export class RemoteBrowser {
try { try {
await this.client.send('Page.startScreencast', { await this.client.send('Page.startScreencast', {
format: SCREENCAST_CONFIG.format, 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 // Set flag to indicate screencast is active
this.isScreencastActive = true; this.isScreencastActive = true;
@@ -753,27 +761,41 @@ export class RemoteBrowser {
} }
return; return;
} }
this.isProcessingScreenshot = true; this.isProcessingScreenshot = true;
try { try {
const optimizedScreenshot = await this.optimizeScreenshot(payload); const optimizationPromise = this.optimizeScreenshot(payload);
const timeoutPromise = new Promise<Buffer>((resolve) => {
setTimeout(() => resolve(payload), 100);
});
const optimizedScreenshot = await Promise.race([optimizationPromise, timeoutPromise]);
const base64Data = optimizedScreenshot.toString('base64'); const base64Data = optimizedScreenshot.toString('base64');
const dataWithMimeType = `data:image/jpeg;base64,${base64Data}`; const dataWithMimeType = `data:image/png;base64,${base64Data}`;
// Emit with user context to ensure the frontend can identify which browser's screenshot this is
this.socket.emit('screencast', { this.socket.emit('screencast', {
image: dataWithMimeType, image: dataWithMimeType,
userId: this.userId, userId: this.userId,
viewport: viewportSize || await this.currentPage?.viewportSize() || null viewport: viewportSize || await this.currentPage?.viewportSize() || null
}); });
logger.debug('Screenshot emitted');
} catch (error) { } catch (error) {
logger.error('Screenshot emission failed:', 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 { } finally {
this.isProcessingScreenshot = false; this.isProcessingScreenshot = false;
if (this.screenshotQueue.length > 0) { if (this.screenshotQueue.length > 0) {
const nextScreenshot = this.screenshotQueue.shift(); const nextScreenshot = this.screenshotQueue.shift();
if (nextScreenshot) { if (nextScreenshot) {