myselfgaurav · Mar 9, 2012 · Mar 9, 2012 · Mar 9, 2012 · Mar 13, 2012 · Mar 13, 2012
diff --git a/README.md b/README.md
@@ -5,14 +5,14 @@ This project is developed by Clément Mouret and Luc Tribolet during an internsh
 This prototype is only available for Chrome/Chromium with WebRTC support.
 This web application allows you to video chat with someone else by sharing a single link.
 There is an embedded chat. But for the moment the chat is using the signalling server for the message transport.
-As we can't send any other data than video and voice with WebRTC, the presentation is just a set of images in a carousel which the actions next and prev are shared trhough the signalling server.
+As we can't send any other data than video and voice trhough WebRTC, the presentation is just image in a carousel which the next and prev actions are shared trhough the signalling server too.
 
 
 ## Requirements
 
 You have to install 
 
-- node.js (socket.IO is directly provided with the sources)
+- node.js (Websocket module is directly provided with the sources)
 - a HTTP server
 - Chrome or Chromium (please use the latest version of Chrome/Chromium Dev or Chrome Canary)
 
@@ -33,4 +33,8 @@ This project use the differents following projects :
 - jQuery
 - Bootstrap Twitter
 
-And it's been inspired directly from this application : https://apprtc.appspot.com/
+And it's been inspired directly from this application : https://apprtc.appspot.com/
+
+# Contacts
+
+Feel free to contact us for any further information.
diff --git a/index.php b/index.php
@@ -1,31 +1,28 @@
 <!doctype html>
 <html>
     <head>
-    
-      	<title>WebRTC</title>
+
+        <title>WebRTC</title>
 
         <!-- Stylesheet Ressources -->
         <link rel="stylesheet" href="css/global.css">
-      	<link rel="stylesheet" href="css/bootstrap.min.css">
-
-        <!-- Call the socket.io Ressources of the server -->
-      	<script src="http://localhost:8888/socket.io/socket.io.js" type="text/javascript" charset="utf-8"></script>
+        <link rel="stylesheet" href="css/bootstrap.min.css">
 
         <!-- JavaScript Ressources -->
-      	<script src="js/jquery-1.7.1.min.js" type="text/javascript" charset="utf-8"></script>
-      	<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
+        <script src="js/jquery-1.7.1.min.js" type="text/javascript" charset="utf-8"></script>
+        <script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
         <script src="js/global.js" type="text/javascript" charset="utf-8"></script>
-        <script src="js/tchat.js" type="text/javascript" charset="utf-8"></script>
-      	<script src="js/webrtc.js" type="text/javascript" charset="utf-8"></script>
-        <script src="js/slide.js" type="text/javascript" charset="utf-8"></script>
+        <script src="js/adapt.js" type="text/javascript" charset="utf-8"></script>
+        <script src="js/webrtc.js" type="text/javascript" charset="utf-8"></script>
+
 
     </head>
 
     <body>
-        
+
         <!-- Modal Connection -->
         <div class="modal hide fade" id="ModalConnection">
-            
+
             <div class="modal-header">
               <h3>WebRTC Sample Connection</h3>
             </div>
@@ -47,7 +44,7 @@
 
         <!-- Modal About -->
         <div class="modal hide fade" id="ModalAbout">
-            
+
             <div class="modal-header">
               <h3>About WebRTC</h3>
             </div>
@@ -82,7 +79,7 @@
               <div class="nav-collapse">
                 <ul class="nav">
                   <li class="active"><a href="./index.php">Home</a></li>
-                  <li><a href="https://github.com/MouMou/EWP" target="_blank">Project GitHub</a></li>
+                  <li><a href="https://github.com/ltribolet/webrtc-example" target="_blank">Project GitHub</a></li>
                   <li><a href="http://wiki.tribolet.fr/" target="_blank">Wiki</a></li>
                   <li><span id="about" class="about">About webRTC</span></li>
                 </ul>
@@ -101,123 +98,38 @@
               <p>This is a demo for testing WebRTC in a LAN between two clients with WebRTC support.</p>
             </div>
             <!-- End of Introduction -->
-      
+
             <div class="row-fluid">
 
-                <div class="span3">
-
+                <div class="span6">
                   <!-- Local Video -->
                   <div class="row-fluid">
                     <div style="position: relative;" class="span12">
                       <h2 align="left">Local</h2>
                       <span id="locallive" class="live hide">LIVE</span>
-                      <video width="100%" height="100%" id="localVideo" autoplay="autoplay" 
+                      <video width="100%" height="100%" id="localVideo" autoplay="autoplay"
                       style="opacity: 0;
                       -webkit-transition-property: opacity;
                       -webkit-transition-duration: 2s;">
                       </video>
                     </div>
                   </div>
                   <!-- End of Local Video -->
-
+                </div>
+                <div class="span6">
                   <!-- Remote Video -->
                   <div class="row-fluid">
                     <div style="position: relative;" class="span12">
                       <h2 align="left">Remote</h2>
                       <span id="remotelive" class="live hide">LIVE</span>
                       <video width="100%" height="100%" id="remoteVideo" autoplay="autoplay"
-                      style="opacity: 0; 
+                      style="opacity: 0;
                       -webkit-transition-property: opacity;
                       -webkit-transition-duration: 2s;">
                       </video>
                     </div>
                   </div>
                   <!-- End of Remote Video -->
-
-                </div>
-
-                <div class="span9">
-
-                  <!-- Carousel -->
-                  <div class="row-fluid" align="center">
-                    <div class="span12">
-                      <div id="myCarousel" class="carousel">
-                        <div class="carousel-inner">
-                          <div class="active item">
-                              <img src="img/carousel/diapositive1.jpg" width="450" alt="Slide 1">
-                          </div>
-                          <div class="item">
-                              <img src="img/carousel/diapositive2.jpg" width="450" alt="Slide 2">
-                          </div>
-                          <div class="item">
-                              <img src="img/carousel/diapositive3.jpg" width="450" alt="Slide 3">
-                          </div>
-                          <div class="item">
-                              <img src="img/carousel/diapositive4.jpg" width="450" alt="Slide 4">
-                          </div>
-                          <div class="item">
-                              <img src="img/carousel/diapositive5.jpg" width="450" alt="Slide 5">
-                          </div>
-                          <div class="item">
-                              <img src="img/carousel/diapositive6.jpg" width="450" alt="Slide 6">
-                          </div>
-                          <div class="item">
-                              <img src="img/carousel/diapositive7.jpg" width="450" alt="Slide 7">
-                          </div>
-                          <div class="item">
-                              <img src="img/carousel/diapositive8.jpg" width="450" alt="Slide 8">
-                          </div>
-                          <div class="item">
-                              <img src="img/carousel/diapositive9.jpg" width="450" alt="Slide 9">
-                          </div>
-                          <div class="item">
-                              <img src="img/carousel/diapositive10.jpg" width="450" alt="Slide 10">
-                          </div>
-                          <div class="item">
-                              <img src="img/carousel/diapositive11.jpg" width="450" alt="Slide 11">
-                          </div>
-                          <div class="item">
-                              <img src="img/carousel/diapositive12.jpg" width="450" alt="Slide 12">
-                          </div>
-                          <div class="item">
-                              <img src="img/carousel/diapositive13.jpg" width="450" alt="Slide 13">
-                          </div>
-                          <div class="item">
-                              <img src="img/carousel/diapositive14.jpg" width="450" alt="Slide 14">
-                          </div>
-                          <div class="item">
-                              <img src="img/carousel/diapositive15.jpg" width="450" alt="Slide 15">
-                          </div>
-                          <div class="item">
-                              <img src="img/carousel/diapositive16.jpg" width="450" alt="Slide 16">
-                          </div>
-                          <div class="item">
-                              <img src="img/carousel/diapositive17.jpg" width="450" alt="Slide 17">
-                          </div>
-                        </div>
-                        <a id="prevSlide" class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
-                        <a  id="nextSlide" class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
-                      </div>
-                    </div>
-                  </div>
-                  <!-- End of Carousel -->
-
-                  <!-- Chat -->
-                  <div class="row-fluid">
-                    <div class="span12">
-                        <h2 align="left">Chat</h2>
-                        <div class="well">
-                            <div id="tchat" class="tchat"></div>
-                            <hr>
-                            <form align="center" class="form-inline">
-                                <input id="mess" type="text" class="input span8" autocomplete="off" placeholder="Message">
-                                <button id="send" class="btn btn-primary">Send</button>
-                            </form>
-                        </div>
-                    </div>
-                  </div>
-                  <!-- End of Chat -->
-
                 </div>
 
             </div>
@@ -234,4 +146,4 @@
         <!-- End of the Content -->
 
     </body>
-</html>
+</html>
diff --git a/js/adapt.js b/js/adapt.js
@@ -0,0 +1,132 @@
+var RTCPeerConnection = null;
+var getUserMedia = null;
+var attachMediaStream = null;
+var reattachMediaStream = null;
+var webrtcDetectedBrowser = null;
+var webrtcDetectedVersion = null;
+
+function trace(text) {
+  // This function is used for logging.
+  if (text[text.length - 1] == '\n') {
+    text = text.substring(0, text.length - 1);
+  }
+  console.log((performance.now() / 1000).toFixed(3) + ": " + text);
+}
+
+if (navigator.mozGetUserMedia) {
+  console.log("This appears to be Firefox");
+
+  webrtcDetectedBrowser = "firefox";
+
+  // The RTCPeerConnection object.
+  RTCPeerConnection = mozRTCPeerConnection;
+
+  // The RTCSessionDescription object.
+  RTCSessionDescription = mozRTCSessionDescription;
+
+  // The RTCIceCandidate object.
+  RTCIceCandidate = mozRTCIceCandidate;
+
+  // Get UserMedia (only difference is the prefix).
+  // Code from Adam Barth.
+  getUserMedia = navigator.mozGetUserMedia.bind(navigator);
+
+  // Creates Turn Uri with new turn format.
+  createIceServer = function(turn_url, username, password) {
+    var iceServer = { 'url': turn_url,
+                      'credential': password,
+                      'username': username };
+    return iceServer;
+  };
+
+  // Attach a media stream to an element.
+  attachMediaStream = function(element, stream) {
+    console.log("Attaching media stream");
+    element.mozSrcObject = stream;
+    element.play();
+  };
+
+  reattachMediaStream = function(to, from) {
+    console.log("Reattaching media stream");
+    to.mozSrcObject = from.mozSrcObject;
+    to.play();
+  };
+
+  // Fake get{Video,Audio}Tracks
+  MediaStream.prototype.getVideoTracks = function() {
+    return [];
+  };
+
+  MediaStream.prototype.getAudioTracks = function() {
+    return [];
+  };
+} else if (navigator.webkitGetUserMedia) {
+  console.log("This appears to be Chrome");
+
+  webrtcDetectedBrowser = "chrome";
+  webrtcDetectedVersion =
+             parseInt(navigator.userAgent.match(/Chrom(e|ium)\/([0-9]+)\./)[2]);
+
+  // For pre-M28 chrome versions use old turn format, else use the new format.
+  if (webrtcDetectedVersion < 28) {
+    createIceServer = function(turn_url, username, password) {
+      var iceServer = { 'url': 'turn:' + username + '@' + turn_url,
+                        'credential': password };
+      return iceServer;
+    };
+  } else {
+    createIceServer = function(turn_url, username, password) {
+      var iceServer = { 'url': turn_url,
+                        'credential': password,
+                        'username': username };
+      return iceServer;
+    };
+  }
+
+  // The RTCPeerConnection object.
+  RTCPeerConnection = webkitRTCPeerConnection;
+
+  // Get UserMedia (only difference is the prefix).
+  // Code from Adam Barth.
+  getUserMedia = navigator.webkitGetUserMedia.bind(navigator);
+
+  // Attach a media stream to an element.
+  attachMediaStream = function(element, stream) {
+    if (typeof element.srcObject !== 'undefined') {
+      element.srcObject = stream;
+    } else if (typeof element.mozSrcObject !== 'undefined') {
+      element.mozSrcObject = stream;
+    } else if (typeof element.src !== 'undefined') {
+      element.src = URL.createObjectURL(stream);
+    } else {
+      console.log('Error attaching stream to element.');
+    }
+  };
+
+  reattachMediaStream = function(to, from) {
+    to.src = from.src;
+  };
+
+  // The representation of tracks in a stream is changed in M26.
+  // Unify them for earlier Chrome versions in the coexisting period.
+  if (!webkitMediaStream.prototype.getVideoTracks) {
+    webkitMediaStream.prototype.getVideoTracks = function() {
+      return this.videoTracks;
+    };
+    webkitMediaStream.prototype.getAudioTracks = function() {
+      return this.audioTracks;
+    };
+  }
+
+  // New syntax of getXXXStreams method in M26.
+  if (!webkitRTCPeerConnection.prototype.getLocalStreams) {
+    webkitRTCPeerConnection.prototype.getLocalStreams = function() {
+      return this.localStreams;
+    };
+    webkitRTCPeerConnection.prototype.getRemoteStreams = function() {
+      return this.remoteStreams;
+    };
+  }
+} else {
+  console.log("Browser does not appear to be WebRTC-capable");
+}