CODEWITHSUNDEEP
google-chrome-extension
freethinker
freethinker

Reputation: 2435

Chrome screen sharing get monitor info

I implemented chrome extension which using chrome.desktopCapture.chooseDesktopMedia to retrieve screen id. This is my background script:

chrome.runtime.onConnect.addListener(function (port) {
    port.onMessage.addListener(messageHandler);

    // listen to "content-script.js"
    function messageHandler(message) {
        if(message == 'get-screen-id') {
            chrome.desktopCapture.chooseDesktopMedia(['screen', 'window'], port.sender.tab, onUserAction);
        }
    }

    function onUserAction(sourceId) {

        //Access denied
        if(!sourceId || !sourceId.length) {
            return port.postMessage('permission-denie');
        }

        port.postMessage({
            sourceId: sourceId
        });
    }
});

I need to get shared monitor info(resolution, landscape or portrait).

My question is: If customer using more than one monitor, how can i determine which monitor he picked? Can i add for example "system.display" permissions to my extension and get picked monitor info from "chrome.system.display.getInfo"?

Upvotes: 1

Views: 2490

Answers (2)

elbecita
elbecita

Reputation: 2664

This is a year old question, but I came across it since I was after the same information and I finally managed to figure how you can identify which monitor the user selected for screen-sharing in Chrome.

First of all: this information will not come from the extension that you probably built for screen-sharing in Chrome, because:

  • The chrome.desktopCapture.chooseDesktopMedia API callback only returns a sourceId, which is a string that represents a stream id, that you can then use to call the getMediaSource API to build the media stream.
  • The chrome.system.display.getInfo will give you a list of the displays, yes, but from that info you can't tell which one is being shared, and there is no way to match the sourceId with any of the fields returned for each display.

So... the solution I've found comes from the MediaStream object itself. Once you have the stream, after calling getMediaSource, you need to get the video track, and in there you will find a property called "label". This label gives you an idea of which screen the user picked.

You can get the video track with something like:

const videoTrack = mediaStream.getVideoTracks()[0];

(Check the getVideoTracks API here: https://developer.mozilla.org/en-US/docs/Web/API/MediaStream/getVideoTracks).

If you print that object, you will see the "label" field. In Chrome screen 1 shows as "0:0", whereas screen 2 shows as "1:0", and I assume screen i would be "i-1:0" (I've only tested with 2 screens). Here is a capture of that object printed in the console:

video track (Chrome)

And not only works for Chrome, but for other browsers that implement it! In Firefox they show up as "Screen i":

video track (Firefox)

Also, if you check Chrome chrome://webrtc-internals you'll see this is what they show in the addStream event:

Chrome webrtc-internals addStream event

And that's it! It's not ideal, since this is a label, more than a real screen identifier, but well, it's something to work with. Once you have the screen identified, in Chrome you can work with the chrome.system.display.getInfo to get information for that display.

Upvotes: 1

Sergey Martynov
Sergey Martynov

Reputation: 406

You are right. You could add system.display permission and call chrome.system.display.getDisplayLayout(callbackFuncion(DisplayLayout)) and handle the DisplayLayout.position in the callback to get the layout and the chrome.system.display.getInfo to handle the array of displayInfo in the callback. You should look for 'isPrimary' value

Upvotes: 1

Related Questions