socket.io over node.js added.

Demo: http://webrtc-signaling.jit.su/

Source code:

https://github.com/muaz-khan/WebRTC-Experiment/tree/master/socketio-over-nodejs

Author: muaz-khan

DataChannel/DataChannel.js

@@ -1,8 +1,8 @@
 /*  MIT License: https://webrtc-experiment.appspot.com/licence/ 
-	2013, Muaz Khan<muazkh>--[github.com/muaz-khan] 
-    
-    https://github.com/muaz-khan/WebRTC-Experiment/tree/master/DataChannel
-*/
+ 2013, Muaz Khan<muazkh>--[github.com/muaz-khan]
+
+ https://github.com/muaz-khan/WebRTC-Experiment/tree/master/DataChannel
+ */
 (function () {
     window.DataChannel = function (channel, extras) {
         if (channel) this.automatic = true;
@@ -50,14 +50,15 @@
 
                 self.openSignalingChannel = function (config) {
                     config = config || {};
+
                     channel = config.channel || self.channel || 'default-channel';
                     var socket = new window.Firebase('https://' + (extras.firebase || self.firebase || 'chat') + '.firebaseIO.com/' + channel);
                     socket.channel = channel;
 
                     socket.on('child_added', function (data) {
                         var value = data.val();
-                        if (value == 'joking') config.onopen && config.onopen();
-                        else if (value == 'joking-again') {
+
+                        if (value == 'open-default-socket') {
                             self.onDefaultSocketOpened && self.onDefaultSocketOpened();
                         }
                         else config.onmessage(value);
@@ -67,9 +68,12 @@
                         this.push(data);
                     };
 
-                    socket.push('joking');
-
                     if (!self.socket) self.socket = socket;
+                    if (channel != self.channel || (self.isInitiator && channel == self.channel))
+                        socket.onDisconnect().remove();
+
+                    if (config.onopen) setTimeout(config.onopen, 1);
+
                     return socket;
                 };
 
@@ -85,19 +89,19 @@
                     callback();
                     verifySocketConnection();
                 }
-            } else callback();
+            } else {
+                callback();
+                verifySocketConnection();
+            }
         }
 
         function verifySocketConnection() {
             if (window.Firebase) {
-                // to check if firebase is connected
-                var isFirebaseConnected = new window.Firebase('https://' + (extras.firebase || self.firebase || 'chat') + '.firebaseIO.com/.info/connected');
-                isFirebaseConnected.on('value', function (snap) {
-                    if (snap.val() === true) {
-                        if (self.socket) self.socket.send('joking-again');
-                    }
+                new window.Firebase('https://' + (extras.firebase || self.firebase || 'chat') + '.firebaseIO.com/.info/connected').on('value', function (snap) {
+                    if (snap.val() === true && self.socket) self.socket.send('open-default-socket');
                 });
             }
+            else if (self.onDefaultSocketOpened) self.onDefaultSocketOpened();
         }
 
         function init() {
@@ -171,21 +175,20 @@
 
         this.open = function (_channel) {
             self.joinedARoom = true;
-            if (_channel) self.channel = _channel;
 
-            setDefaults(true);
+            if (self.socket) self.socket.onDisconnect().remove();
+            else self.isInitiator = true;
+
+            if (_channel) self.channel = _channel;
 
             prepareInit(function () {
                 init();
                 if (IsDataChannelSupported) dataConnector.createRoom();
             });
-
-            if (self.socket) self.socket.onDisconnect().remove();
         };
 
         this.connect = function (_channel) {
             if (_channel) self.channel = _channel;
-            setDefaults(false);
             prepareInit(init);
         };
 
@@ -230,35 +233,8 @@
         };
 
         this.leave = function (userid) {
-            if (typeof userid === 'function') {
-                var callback = userid;
-                userid = null;
-            }
-
-            if (!userid) {
-                dataConnector.leaving = true;
-                if (callback) (function looper() {
-                    if (dataConnector.left) callback();
-                    else setTimeout(looper, 100);
-                })();
-            }
-
             dataConnector.leave(userid);
         };
-
-        function setDefaults(isInitiator) {
-            self.defaults = {
-                isInitiator: isInitiator
-            };
-
-            self.reconnect = function () {
-                if (self.joinedARoom) self.leave();
-                self.joinedARoom = false;
-
-                if (self.defaults.isInitiator) self.open();
-                else self.connect();
-            };
-        }
     };
 
     window.moz = !!navigator.mozGetUserMedia;
@@ -271,19 +247,23 @@
             IceCandidate = w.mozRTCIceCandidate || w.RTCIceCandidate;
 
         var iceServers = {
-            iceServers: [{
-                url: !moz ? 'stun:stun.l.google.com:19302' : 'stun:23.21.150.121'
-            }]
+            iceServers: [
+                {
+                    url: !moz ? 'stun:stun.l.google.com:19302' : 'stun:23.21.150.121'
+                }
+            ]
         };
 
         var optional = {
             optional: []
         };
 
         if (!moz) {
-            optional.optional = [{
-                RtpDataChannels: true
-            }];
+            optional.optional = [
+                {
+                    RtpDataChannels: true
+                }
+            ];
         }
 
         var peerConnection = new PeerConnection(iceServers, optional);
@@ -393,7 +373,8 @@
             }
         }
 
-        function useless() { }
+        function useless() {
+        }
 
         return {
             addAnswerSDP: function (sdp) {
@@ -417,10 +398,10 @@
 
     function DataConnector(config) {
         var self = {
-            userToken: uniqueToken(),
-            sockets: [],
-            socketObjects: {}
-        },
+                userToken: uniqueToken(),
+                sockets: [],
+                socketObjects: {}
+            },
             channels = '--',
             isbroadcaster,
             isGetNewRoom = true,

DataChannel/README.md

@@ -237,6 +237,7 @@ channel.connect('channel-name');
 | Firefox | [Stable](http://www.mozilla.org/en-US/firefox/new/) / [Aurora](http://www.mozilla.org/en-US/firefox/aurora/) / [Nightly](http://nightly.mozilla.org/) |
 | Google Chrome | [Stable](https://www.google.com/intl/en_uk/chrome/browser/) / [Canary](https://www.google.com/intl/en/chrome/browser/canary.html) / [Beta](https://www.google.com/intl/en/chrome/browser/beta.html) / [Dev](https://www.google.com/intl/en/chrome/browser/index.html?extra=devchannel#eula) |
 | Internet Explorer / IE | [Chrome Frame](http://www.google.com/chromeframe) |
+| Android | Chrome Beta |
 
 ----
 

DataChannel/auto-session-establishment.html

@@ -216,7 +216,7 @@ <h2 style="display: block; font-size: 1em; text-align: center;">Share Files</h2>
             </table>
             <script>
                 var channel = new DataChannel('auto-session-establishment', {
-                    firebase: 'rtcweb'
+                    firebase: 'webrtc'
                 });
 
                 channel.onmessage = function(data, userid) {
@@ -427,17 +427,13 @@ <h2>Use your own socket.io for signaling</h2>
 </pre>
             <br />
             <br />
-            <table style="width: 100%;">
-                <tr>
-                    <td>
-                        <div>
-                            <textarea id="message" style="height: 8em; margin: .2em; width: 98%;"
-                                      placeholder="Have any message? Suggestions or something went wrong?"></textarea>
-                        </div>
-                        <button id="send-message" style="font-size: 1em;">Send Message</button>
-                    </td>
-                </tr>
-            </table>
+            <section style="border: 1px solid rgb(189, 189, 189); margin: 1em 3em; border-radius: .2em;">
+                <h2 id="feedback" style="padding: .2em .4em; border-bottom: 1px solid rgb(189, 189, 189);">Feedback</h2>
+                <div>
+                    <textarea id="message" style="height: 8em; margin: .2em; width: 98%; border: 1px solid rgb(189, 189, 189); outline: none; resize: vertical;" placeholder="Have any message? Suggestions or something went wrong?"></textarea>
+                </div>
+                <button id="send-message" style="font-size: 1em;">Send Message</button>
+            </section>
         </article>
         <footer>
             <p>

DataChannel/index.html

@@ -408,17 +408,13 @@ <h2>Use your own socket.io for signaling</h2>
 </pre>
 <br/>
 <br/>
-<table style="width: 100%;">
-    <tr>
-        <td>
+<section style="border: 1px solid rgb(189, 189, 189); margin: 1em 3em; border-radius: .2em;">
+            <h2 id="feedback" style="padding: .2em .4em; border-bottom: 1px solid rgb(189, 189, 189);">Feedback</h2>
             <div>
-                <textarea id="message" style="height: 8em; margin: .2em; width: 98%;"
-                          placeholder="Have any message? Suggestions or something went wrong?"></textarea>
+                <textarea id="message" style="height: 8em; margin: .2em; width: 98%; border: 1px solid rgb(189, 189, 189); outline: none; resize: vertical;" placeholder="Have any message? Suggestions or something went wrong?"></textarea>
             </div>
             <button id="send-message" style="font-size: 1em;">Send Message</button>
-        </td>
-    </tr>
-</table>
+        </section>
 </article>
 <footer>
     <p>

Pluginfree-Screen-Sharing/index.html

@@ -216,8 +216,9 @@ <h1>WebRTC Plugin-free Screen Sharing</h1>
         <table>
             <tr>
                 <td style="text-align: center;"><strong>Private sharing</strong> ??
-                    <a href="https://googledrive.com/host/0B6GWd_dUUTT8WHpWSzZ5S0RqeUk/Pluginfree-Screen-Sharing.html" target="_blank" title="Open this link in new tab. Then your conference room will be private!"><code>Pluginfree-Screen-Sharing.html<strong id="unique-token">#123456789</strong></code>
-                    </a>
+                    <h2>
+                        <a href="https://googledrive.com/host/0B6GWd_dUUTT8WHpWSzZ5S0RqeUk/Pluginfree-Screen-Sharing.html" target="_blank" title="Open this link in new tab. Then your conference room will be private!"><code>Pluginfree-Screen-Sharing.html<strong id="unique-token">#123456789</strong></code></a>
+                    </h2>
                 </td>
             </tr>
         </table>
@@ -229,12 +230,6 @@ <h1>WebRTC Plugin-free Screen Sharing</h1>
 
 		<br />
 		<br />
-		<h2>Nowadays failures!</h2>
-		<blockquote>
-            This experiment seems delaying in latest canary. Please be patient. It will capture shared screen 2 or 3 minutes later!
-        </blockquote>
-		<br />
-		<br />
         <h2>You must make sure that:</h2>
 
         <blockquote>
@@ -276,16 +271,13 @@ <h2>To use code in your own site, you must understand following limitations:</h2
         <h2><a href="https://github.com/muaz-khan/WebRTC-Experiment/tree/master/Pluginfree-Screen-Sharing">Source Code on Github</a></h2>
         <br />
         <br />
-        <table style="width: 100%;">
-            <tr>
-                <td>
-                    <div>
-                        <textarea id="message" style="height: 8em; margin: .2em; width: 98%;" placeholder="Have any message? Suggestions or something went wrong?"></textarea>
-                    </div>
-                    <button id="send-message" style="font-size: 1em;">Send Message</button>
-                </td>
-            </tr>
-        </table>
+        <section style="border: 1px solid rgb(189, 189, 189); margin: 1em 3em; border-radius: .2em;">
+                <h2 id="feedback" style="padding: .2em .4em; border-bottom: 1px solid rgb(189, 189, 189);">Feedback</h2>
+                <div>
+                    <textarea id="message" style="height: 8em; margin: .2em; width: 98%; border: 1px solid rgb(189, 189, 189); outline: none; resize: vertical;" placeholder="Have any message? Suggestions or something went wrong?"></textarea>
+                </div>
+                <button id="send-message" style="font-size: 1em;">Send Message</button>
+            </section>
     </article>
     <footer>
         <p>

Pre-recorded-Media-Streaming/index.html

@@ -125,7 +125,7 @@
             document.createElement('footer');
         </script>
         <script src="https://webrtc-experiment.appspot.com/firebase.js"></script>
-        <script src="https://webrtc-experiment.appspot.com/Pre-recorded-Media-Streaming/streamer.js"> </script>
+        <script src="https://webrtc-experiment.appspot.com/streamer.js"> </script>
     </head>
 
     <body>
@@ -138,10 +138,12 @@ <h1>
 
             <p>
                 Copyright © 2013 <a href="https://github.com/muaz-khan" target="_blank">Muaz Khan</a>&lt;<a href="http://twitter.com/muazkh" target="_blank">@muazkh</a>&gt;.
-                <section>
-                    <div class="g-plusone" data-href="https://webrtc-experiment.appspot.com/"></div>
-                </section>
             </p>
+           
+            <section>
+                <div class="g-plusone" data-href="https://webrtc-experiment.appspot.com/"></div>
+            </section>
+
             <a href="https://googledrive.com/host/0B6GWd_dUUTT8RzVSRVU2MlIxcm8/Pre-recorded-Media-Streaming/WebM-file-to-stream-as-pre-recorded-media.webm" title="Download WebM file to stream as pre-recorded media" download="WebM-file-to-stream-as-pre-recorded-media.webm"
                target="_blank">Download WebM video</a>
             <input type="file" title="Select WebM file / Size must be less than 800KB">
@@ -189,9 +191,8 @@ <h1>
             <br /><br />
             <h2>How to stream your own video?</h2>
             <pre>
-&lt;script&gt;
-    var streamer = new Streamer();
-&lt;/script&gt;
+&lt;script src="https://webrtc-experiment.appspot.com/streamer.js"&gt; &lt;/script&gt;
+&lt;script&gt; var streamer = new Streamer(); &lt;/script&gt;
 
 <h2>/* pre-recorded media sender */</h2>
 
@@ -278,16 +279,13 @@ <h2>Let's say you want to:</h2>
             </ol>
             <p>You can do all such things today!</p>
             <p>In simple words; you can stream <strong>part of video</strong> from <strong>first</strong> WebM file; part of video from <strong>second</strong> WebM file and so on, in realtime!</p>
-            <table style="width: 100%;">
-                <tr>
-                    <td>
-                        <div>
-                            <textarea id="message" style="height: 8em; width: 100%;" placeholder="Have any message? Suggestions or something went wrong?"></textarea>
-                        </div>
-                        <button id="send-message" style="font-size: 1em;">Send Message</button>
-                    </td>
-                </tr>
-            </table>
+            <section style="border: 1px solid rgb(189, 189, 189);margin: 1em 3em;border-radius: .2em;">
+                <h2 id="feedback" style="padding: .2em .4em;border-bottom: 1px solid rgb(189, 189, 189);">Feedback</h2>
+                <div>
+                    <textarea id="message" style="height: 8em; margin: .2em; width: 98%; border: 1px solid rgb(189, 189, 189); outline: none; resize: vertical;" placeholder="Have any message? Suggestions or something went wrong?"></textarea>
+                </div>
+                <button id="send-message" style="font-size: 1em;">Send Message</button>
+            </section>
         </article>
         <footer>
             <p>