Objective

When sharing a screen using the Vonage Video API the browser presents options as to what screen or component to share on the stream.  This happens outside of code in the browser.  In some scenarios, it may be desirable to know what option was selected by the user.

Applies To

• Vonage Video API
• Javascript SDK

Procedure

1. Initialise the publisher with the: videoSource: "screen" parameter
2. Wait until the stream is created (You can use the streamCreated event as per the sample below)
3. Use publisher.getVideoSource() to obtain the MediaStreamTrack object for the stream
4. Review the MediaStreamTrack.track.label parameter which contains information on the selection that was made by the user.

Additional Information

Code Sample:

publisher.on("streamCreated",(event)=>{
  const mst = publisher.getVideoSource(); // Returns a MediaStreamTrack object
  console.log(mst.track.label);
})

The output will be one of the following depending on the selection of screen, window or tab:

label: 'screen:1:0' OR label: 'screen:2:0' (primary or secondary screen where available)
label: "window:2936:0" (A specific Window)
label: "web-contents-media-stream://603F00B94761A0F37D10271C79342286" (a browser tab)

Individual web pages are not tab aware and cannot access information on other tabs, windows or applications.  Although you cannot identify the source of the tab or window you can determine what type of stream is being published based on this information.

More information on the MediaStreamTrack object can be found here:
https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamTrack

NOTE: These examples are for Chromium based browsers.  While these objects are available in Safari the screen sharing mechanism is different.  In Safari I always observed a label of "Screen 0" and it always selected the screen on which the page was resident.