CODEWITHSUNDEEP
electron
Kenn
Kenn

Reputation: 2479

Correlating the screen information from electron.desktopCapturer.getSources() and electron.screen.getAllDisplays()

I'm grabbing some information about the user's screen resolutions and screen setup.

electron.desktopCapturer.getSources() returns DesktopCapturerSource[] which I use to get a thumbnail of the screen.

electron.screen.getAllDisplays() returns Display[] which I use to get the screen dimensions, rotation, etc.

Both are arrays of equal size, wherein each element represents different information about the desktop screen. They have names and ids, neither of which seem to match up between the objects. I'm unsure of how exactly I can correlate the data between the two objects to guarantee I am talking about the same screen.

Upvotes: 3

Views: 761

Answers (1)

Manik
Manik

Reputation: 1515

You can join both of the calls and correspond id from the objects returned by screen.getAllDisplays() with display_id from the objects returned by desktopCapturer.getSources().

Please note that this was tried on MacOS Big Sur with Electron 12 and that the results may not be the same with other operating systems.

Example output from screen.getAllDisplays():

[
  {
    id: 2077748985,
    bounds: { x: 0, y: 0, width: 1792, height: 1120 },
    workArea: { x: 0, y: 25, width: 1792, height: 1095 },
    accelerometerSupport: 'unknown',
    monochrome: false,
    colorDepth: 30,
    colorSpace: '{primaries:BT709, transfer:IEC61966_2_1_HDR, matrix:RGB, range:FULL}',
    depthPerComponent: 10,
    size: { width: 1792, height: 1120 },
    displayFrequency: 59,
    workAreaSize: { width: 1792, height: 1095 },
    scaleFactor: 2,
    rotation: 0,
    internal: true,
    touchSupport: 'unknown'
  }
]

Example output from desktopCapturer.getSources():

[
    {
        "name": "Entire Screen",
        "id": "screen:2077748985:0",
        "thumbnail": {
            "isMacTemplateImage": false
        },
        "display_id": "2077748985",
        "appIcon": null
    },
    {
        "name": "Hello World!",
        "id": "window:33637:0",
        "thumbnail": {
            "isMacTemplateImage": false
        },
        "display_id": "",
        "appIcon": null
    },
    {
        "name": "Hello World!",
        "id": "window:33636:0",
        "thumbnail": {
            "isMacTemplateImage": false
        },
        "display_id": "",
        "appIcon": null
    },
    {
        "name": "Correlating the screen information from electron.desktopCapturer.getSources() and electron.screen.getAllDisplays() - Stack Overflow",
        "id": "window:3257:0",
        "thumbnail": {
            "isMacTemplateImage": false
        },
        "display_id": "",
        "appIcon": null
    },
    {
        "name": "electron-fun — Electron Helper (Renderer) ◂ npm TERM_PROGRAM=Apple_Terminal SHELL=/bin/zsh — 127×68",
        "id": "window:32731:0",
        "thumbnail": {
            "isMacTemplateImage": false
        },
        "display_id": "",
        "appIcon": null
    },
    {
        "name": "Calculator",
        "id": "window:32797:0",
        "thumbnail": {
            "isMacTemplateImage": false
        },
        "display_id": "",
        "appIcon": null
    }
]

Note that id is: 2077748985 and display_id is also: 2077748985.

Upvotes: 1

Related Questions