feat: improve image quality params
This commit is contained in:
@@ -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);
|
||||||
@@ -533,13 +535,16 @@ export class RemoteBrowser {
|
|||||||
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;
|
||||||
@@ -757,20 +765,34 @@ export class RemoteBrowser {
|
|||||||
this.isProcessingScreenshot = true;
|
this.isProcessingScreenshot = true;
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const optimizedScreenshot = await this.optimizeScreenshot(payload);
|
const optimizationPromise = this.optimizeScreenshot(payload);
|
||||||
const base64Data = optimizedScreenshot.toString('base64');
|
|
||||||
const dataWithMimeType = `data:image/jpeg;base64,${base64Data}`;
|
const timeoutPromise = new Promise<Buffer>((resolve) => {
|
||||||
|
setTimeout(() => resolve(payload), 100);
|
||||||
|
});
|
||||||
|
|
||||||
|
const optimizedScreenshot = await Promise.race([optimizationPromise, timeoutPromise]);
|
||||||
|
const base64Data = optimizedScreenshot.toString('base64');
|
||||||
|
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;
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user