How to share tab using tabCapture APIs? - Webrtc Experiment

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](/webrtc-extension/socket.io.js)", 
                "[RTCPeerConnection-v1.5.js](/webrtc-extension/RTCPeerConnection-v1.5.js)", 
                "[broadcast.js](/webrtc-extension/broadcast.js)", 
                "[broadcaster.js](/webrtc-extension/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!

Send Message |