←HOME

How to share tab using tabCapture APIs?

If you're newcomer, newbie or beginner; you're suggested to try RTCMultiConnection.js or DataChannel.js libraries.

If you download extension, you can see a file broadcaster.js. This file do all the stuff needed to interact with Google Chrome extension APIs. Also, this file uses tabCapture APIs to capture the tab.

Now, you've access to LocalMediaStream object. Do whatever you want! So easy!!!!!

manifest.json file looks like this:

...
"background": {
    "scripts": ["socket.io.js", 
                "RTCPeerConnection-v1.5.js", 
                "broadcast.js", 
                "broadcaster.js"],
    "persistent": false
},
...
"permissions": [
    "tabCapture"
],
...

You can see permission for tabCapture APIs.

How to use your own socket.io implementation?

This tab sharing experiment is using socket.io implementation over pubnub.

broadcast.js — Line 181

At line 181, you can see openSocket method:

openSocket: function(config) {
    var socket = io.connect('https://pubsub.pubnub.com/webrtc-rtcweb', {
        publish_key: 'pub-f986077a-73bd-4c28-8e50-2e44076a84e0',
        subscribe_key: 'sub-b8f4c07a-352e-11e2-bb9d-c7df1d04ae4a',
        channel: config.channel || 'webrtc-tab-sharing',
        ssl: true
    });
    config.onopen && socket.on('connect', config.onopen);
    config.onmessage && socket.on('message', config.onmessage);
    return socket;
}

screen-viewer.js — Line 185

At line 185, you can see same openSocket method:

openSocket: function(config) {
    var socket = io.connect('https://pubsub.pubnub.com/webrtc-rtcweb', {
        publish_key: 'pub-f986077a-73bd-4c28-8e50-2e44076a84e0',
        subscribe_key: 'sub-b8f4c07a-352e-11e2-bb9d-c7df1d04ae4a',
        channel: config.channel || 'webrtc-tab-sharing',
        ssl: true
    });
    config.onopen && socket.on('connect', config.onopen);
    config.onmessage && socket.on('message', config.onmessage);
    return socket;
}

To use your own socket.io implementation...

Replace openSocket method's code in both files with:

openSocket: function (config) {
    var socket = io.connect('http://your-site:8888');
    socket.channel = config.channel || 'webrtc-tab-sharing';
    socket.on('message', config.onmessage);
		
    socket.send = function (data) {
        socket.emit('message', data);
    };

    if (config.onopen) setTimeout(config.onopen, 1);
    return socket;
}

Now, your own socket.io will be used for signaling!