-
-
Notifications
You must be signed in to change notification settings - Fork 1.1k
Description
Feature Description
Currently, Deskreen displays generic screen names like "Screen 1", "Screen 2", "Screen 3" when selecting which display to share. This makes it difficult for users with multiple monitors to identify which screen they're selecting, especially when monitors are of the same resolution.
It would be much more user-friendly to display actual monitor names like:
- "LG UltraFine"
- "Dell U2720Q"
- "Samsung TV"
- "Built-in Retina Display"
Current Behavior
When selecting a screen to share, users see:
- Screen 1
- Screen 2
- Screen 3
Proposed Behavior
Display actual monitor model names:
- LG 27UK850
- Dell U2720Q
- MacBook Pro Built-in Display
Technical Analysis
Root Cause
Electron's desktopCapturer.getSources()
API only provides generic names. The screen names come directly from this API call in app/features/DesktopCapturerSourcesService/index.ts
:
const capturerSources = await desktopCapturer.getSources({
types: [
DesktopCapturerSourceType.WINDOW,
DesktopCapturerSourceType.SCREEN,
],
thumbnailSize: { width: 500, height: 500 },
fetchWindowIcons: true,
});
Proposed Solution
Create a native Node.js addon that queries OS-specific display APIs to get friendly monitor names:
macOS Implementation:
// Using Core Graphics
CFStringRef displayName = CGDisplayCopyDisplayName(displayID);
Windows Implementation:
// Using Windows Display Configuration API
DISPLAYCONFIG_TARGET_DEVICE_NAME targetName;
DisplayConfigGetDeviceInfo(&targetName);
Linux Implementation:
// Using X11/XRandR or Wayland protocols
// More fragmented, depends on display server
Implementation Approach
-
Create Native Module (
native-display-names
):- Use node-gyp for building
- Implement platform-specific code for each OS
- Return a mapping of display IDs to friendly names
-
Integrate with Deskreen:
// In DesktopCapturerSourcesService import { getDisplayNames } from 'native-display-names'; const displayNames = await getDisplayNames(); const sources = await this.getDesktopCapturerSources(); // Map display IDs to friendly names sources.forEach((source) => { if (source.type === DesktopCapturerSourceType.SCREEN) { const friendlyName = displayNames[source.display_id]; if (friendlyName) { source.name = friendlyName; } } });
-
Update UI Component:
- Modify
SharingSourcePreviewCard
to display the enhanced names - Add fallback to generic names if native module fails
- Modify
Benefits
- Improved User Experience: Users can immediately identify which physical monitor they're selecting
- Reduced Errors: Less chance of selecting the wrong screen
- Professional Feel: Makes the application feel more polished and aware of the user's setup
Alternatives Considered
-
Electron Modification: Submit PR to Electron to add this feature to core
- Pros: Benefits all Electron apps
- Cons: Long approval process, may not be accepted
-
System Command Workarounds: Parse output from system commands
- Pros: No native code needed
- Cons: Fragile, platform-specific, may break with OS updates
Implementation Complexity
- Estimated Effort: 2-3 weeks for native module development
- Platforms: macOS, Windows, Linux
- Dependencies: node-gyp, platform-specific SDKs
References
- Similar request for Electron core: Allow Mac accessibility for apps other than VoiceOver electron/electron#7206
- Example macOS implementation: node-mac-displays
- Windows Display Configuration API documentation