Socket.IO over Node.js & RTCMultiConnection-1.3 about webrtc-experiment

[muaz-khan]

I tested socket.io over node.js with RTCMultiConnectionv-1.3 and it worked fine!

Here is the Entire Demo

<script src="https://webrtc-experiment.appspot.com/socket.io.js"></script>
<script src="https://webrtc-experiment.appspot.com/RTCMultiConnection-v1.3.js"></script>

<button id="init">Open NEW Session</button>

<table style="border-left: 1px solid black; width: 100%;">
    <tr>
        <td id="local-video-container">
            <h2>Local video container</h2>
        </td>
        <td id="remote-videos-container" style="background: white; border-left: 1px solid black;">
            <h2>Remote videos container</h2>
        </td>
    </tr>
</table>

<script>
    var SIGNALING_SERVER = 'http://webrtc-signaling.jit.su:80/',
        defaultChannel = 'default-channel';

    window.username = Math.random() * 9999 << 9999;

    var connection = new RTCMultiConnection(defaultChannel);

    connection.openSignalingChannel = function(config) {
        var channel = config.channel || defaultChannel;
        var sender = Math.round(Math.random() * 60535) + 5000;

        io.connect(SIGNALING_SERVER).emit('new-channel', {
            channel: channel,
            sender: sender
        });

        var socket = io.connect(SIGNALING_SERVER + channel);
        socket.channel = channel;
        socket.on('connect', function() {
            if (config.callback) config.callback(socket);
        });

        socket.send = function(message) {
            socket.emit('message', {
                sender: sender,
                data: message
            });
        };

        socket.on('message', config.onmessage);
    };

    connection.onstream = function(e) {
        if (e.type === 'local') {
            var video = getVideo(e, {
                username: window.username
            });

            document.getElementById('local-video-container').appendChild(video);
        }

        if (e.type === 'remote') {
            var video = getVideo(e, e.extra);

            var remoteVideosContainer = document.getElementById('remote-videos-container');
            remoteVideosContainer.appendChild(video, remoteVideosContainer.firstChild);
        }
        e.mediaElement.width = innerWidth / 3.4;
    };

    connection.onleave = function(userid, extra) {
        if (extra) console.log(extra.username + ' left you!');

        var video = document.getElementById(userid);
        if (video) video.parentNode.removeChild(video);
    };

    function getVideo(e, extra) {
        var div = document.createElement('div');
        div.className = 'video-container';
        div.id = e.userid || 'self';

        if (e.type === 'remote') {
            if (connection.isInitiator) {
                var eject = document.createElement('button');
                eject.className = 'eject';
                eject.title = 'Eject this User';

                eject.onclick = function() {
                    connection.eject(this.parentNode.id);
                    this.parentNode.style.display = 'none';
                };
                div.appendChild(eject);
            }
        }
        div.appendChild(e.mediaElement);

        if (extra) {
            var h2 = document.createElement('h2');
            h2.innerHTML = 'username: ' + extra.username;
            div.appendChild(h2);
        }
        return div;
    }

    document.getElementById('init').onclick = function() {
        connection.interval = 1000;
        connection.open();
    };

    connection.extra = {
        username: window.username
    };

    connection.connect();
</script>

@muaz-khan Thanks for pointing me the right direction. I must have been making some weird mistake. Everything's running smoothly now.

👍