muaz-khan / WebRTC-Experiment

WebRTC, WebRTC and WebRTC. Everything here is all about WebRTC!!
https://www.webrtc-experiment.com/
MIT License
11.75k stars 3.95k forks source link

the new RTCMultiConnection v1.4 can not sigaling #57

Closed notedit closed 11 years ago

notedit commented 11 years ago

just have a little test

muaz-khan commented 11 years ago

I tested it with Firebase, socket.io over node.js and WebSync; and it worked fine with all of them.

Demo using Firebase for signaling

<script src="https://webrtc-experiment.appspot.com/firebase.js"></script>
<script src="https://webrtc-experiment.appspot.com/RTCMultiConnection-v1.4.js"></script>
<button id="open-new-connection">Open New Connection</button>
<ol></ol>
<script>
connection = new RTCMultiConnection('dafsfasfasdfasfasdfdsa');

connection.extra = {
    username: Math.random() * 10000
};

connection.session = {
    audio: true,
    video: true
};

connection.framerate = {
    minptime: 10,
    maxptime: 60
};

var ol = document.querySelector('ol');
connection.onNewSession = function (room) {
    var li = document.createElement('li');
    li.innerHTML = 'You can join room: ' + room.roomid + ' ------------- ';

    var button = document.createElement('button');
    button.innerHTML = 'Join';
    button.onclick = function () {
        connection.join(room);
        ol.removeChild(li);
    };
    li.appendChild(button);
    ol.appendChild(li, ol.firstChild);
};

connection.onstream = function (e) {
    document.body.appendChild(e.mediaElement);
    console.log('streamid:', e.streamid);
    resizeVideos();
};

connection.onstreamended = function (e) {
    e.mediaElement.parentNode.removeChild(e.mediaElement);
    resizeVideos();
};

connection.connect();

document.getElementById('open-new-connection').onclick = function () {
    this.style.display = 'none';
    connection.open();
};

function resizeVideos() {
    var videos = document.querySelectorAll('video');
    var peerCount = videos.length;

    // For each linked peer, determine the best size and
    // position for the video feed.
    var numCols = Math.ceil(Math.sqrt(peerCount));
    var numRows = Math.ceil(peerCount / numCols);
    var width = Math.round(640 / numCols);
    var height = (width * 480) / 640;
    var i = 0;
    var x = 0;
    for (var c = 0; c < numCols; c++) {
        var y = Math.round((480 - (numRows * height)) / 2);
        for (var r = 0; r < numRows; r++, i++) {
            if (i < peerCount) {
                var video = videos[i];
                video.style.top = y + 'px';
                video.style.left = x + 'px';
                video.style.width = width + 'px';
                video.style.height = height + 'px';
            }
            y += height;
        }
        x += width;
    }
}

window.onresize = resizeVideos;
</script>

Signaling using socket.io over node.js

Node.js server-side code:

io.sockets.on('connection', function (socket) {
    socket.on('message', function (data) {
        socket.broadcast.emit('message', data);
    });
});

Client-side code overriding openSignlaingChannel method:

connection.openSignalingChannel = function(callback) {
    return io.connect().on('message', callback);
};

Refer this comment for other signaling implementations e.g. websockets, websync etc.

notedit commented 11 years ago

it my fault, i set the same userid.