Share the current chrome tab automatically

[pichayut]

Hi, I am working on the project where we need just the ability to share the Chrome tab (this means we are required the user to only use Chrome to access). What I did is that I add the following code at the beginning of this function in getScreenId.js

window.getScreenId = function(callback, custom_parameter) { custom_parameter = ['tab']; // FORCE USING TAB ...

This works great (allow the user to choose only Chrome tab for screen sharing) https://ibb.co/hvf5Mo

However, I'm wondering if we can share the current tab automatically without popping up the window above (https://ibb.co/hvf5Mo)

Thanks!

[muaz-khan]

I've a chrome extension named as "tabCapture". Here is the source: https://github.com/muaz-khan/Chrome-Extensions/tree/master/tabCapture

The most famous desktopCapture-p2p also supports this feature: https://github.com/muaz-khan/Chrome-Extensions/tree/master/desktopCapture-p2p

So here are the solutions:

1) Use TabCapture API inside a chrome extension to share tab seamlessly (without interacting with a webpage) 2) Use TabCapture API to capture tab, now share MediaStream object with the webpage using "RTCPeerConnection" API where "postMessage" is used for signaling

First option is easy and I already have two demos, linked above. However you may not be interested in these solutions because tabs are directly shared using chrome extensions.

Second options is tricky. You are using PostMessage API for signaling.

Why we need PostMessage API? Because TabCapture API do not return "chromeMediaSourceId". So we have no sourceId. We can not share sourceId with the webpage.

Now, a tricky solution is,

a) both chrome extension and webpage will use RTCPeerConnection API to get+share TabMediaStream b) after receiving the TabMediaStream, webpage can now use it like this:

peer.onaddtrack = function(event) {
    var tabMediaStream = event.streams[0];
    // now we can share this media-stream with any person using real peer connection with real signaling
    realPeerConnection.addTrack(tabMediaStream.getVideoTracks()[0], tabMediaStream);
};

I've use this technique in this extension a long time ago: https://github.com/muaz-khan/Chrome-Extensions/tree/master/screen-recording

You can check history and find it. However I'll recommend to try it yourself. Because it is very easy to write and implement.

Bottom lines:

TabCapture API do not show popup. So TabCapture API is a solution you are looking for. However TabCapture API do not returns "chromeMediaSourceId". So you need to capture TabMediaStream inside extension and share with the webpage using RTCPeerConnection API. WebPage will listen for "on-add-track" event to get the "TabMediaStream" object. PostMessage is fastest medium for signaling. It will share TabMediaStream in less than one or two seconds with the Webpage.