Skip to content

Feature Request: Show actual monitor names instead of generic "Screen 1", "Screen 2" #283

@kaovilai

Description

@kaovilai

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

  1. 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
  2. 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;
        }
      }
    });
  3. Update UI Component:

    • Modify SharingSourcePreviewCard to display the enhanced names
    • Add fallback to generic names if native module fails

Benefits

  1. Improved User Experience: Users can immediately identify which physical monitor they're selecting
  2. Reduced Errors: Less chance of selecting the wrong screen
  3. Professional Feel: Makes the application feel more polished and aware of the user's setup

Alternatives Considered

  1. 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
  2. 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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions