Skip to content

[Bug] Screen capture in Electron app crops left/right content and doesn't scale correctly #23

@prophesier

Description

@prophesier

Describe the bug

When using the screen capture feature in the Electron desktop app, the transmitted screenshot is missing content on the left and right sides of the screen. Two bugs are responsible:

Bug 1: Hardcoded resolution constraint crops the screen

In ScreenCaptureProvider, when running inside Electron, the screen is captured via getUserMedia with mandatory resolution constraints:

mandatory: {
chromeMediaSource: "desktop",
chromeMediaSourceId: sourceId,
minWidth: 1280,
maxWidth: 1280, // ← forces capture to exactly 1280px wide
minHeight: 720,
maxHeight: 720,
}
On screens wider than 1280px (e.g. 1920×1080, 2560×1440), Chromium center-crops the display to fit 1280×720, causing content on the left and right sides to be lost entirely.

Bug 2: drawImage draws at natural size instead of scaling

In the frame capture function, the canvas is correctly resized to respect DEFAULT_IMAGE_MAX_WIDTH, but drawImage is called without destination dimensions:

// canvas is resized to e.g. 1080×607, but bitmap is still 1920×1080
ctx.drawImage(bitmap, 0, 0); // ← draws at natural size, clips the right/bottom
Should be:

ctx.drawImage(bitmap, 0, 0, width, height); // scales to fit canvas
This means even if Bug 1 is fixed, images wider than DEFAULT_IMAGE_MAX_WIDTH (1080px) will still be clipped on the right and bottom.

To Reproduce

Use the Electron desktop app on a screen wider than 1280px
Enable screen capture and send a message with vision
Observe that the screenshot sent to the LLM is missing left/right (and possibly bottom) content
Expected behavior

The full screen content should be captured and proportionally scaled down to fit within DEFAULT_IMAGE_MAX_WIDTH.

Suggested Fix

Bug 1 — Remove the hardcoded minWidth/maxWidth/minHeight/maxHeight constraints and let the OS capture at native resolution:

mandatory: {
chromeMediaSource: "desktop",
chromeMediaSourceId: sourceId,
// no size constraints
}
Bug 2 — Pass destination dimensions to drawImage:

ctx.drawImage(bitmap, 0, 0, width, height);
Environment

App: Electron desktop client
OS: Windows 11
Screen resolution: wider than 1280px

Note:
The issue was discovered by me, but the fix was generated with the help of AI. It may not be complete or entirely correct, though it did resolve the problem on my end.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions