Merge pull request mozilla#48 from tOkeshu/mobile-chat

Mobile chat
Standard8 · Jan 31, 2013 · 5d6b83c · 5d6b83c
2 parents d3532ad + 04cfdd7
commit 5d6b83c
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 48 deletions.
diff --git a/static/media.js b/static/media.js
@@ -6,11 +6,6 @@ var webrtcMedia = {
     var pc = this._createBasicPc(aWin, aPerson, true, aAudioOnly, aConnectionCallback,
                                  aDataConnectionCallback);
 
-    // XXX Disable the data channel if it is an audio-only call to accomodate android for now.
-    var constraints;
-    if (aAudioOnly)
-      constraints = { 'mandatory': { "MozDontOfferDataChannel": true }};
-
     (aAudioOnly ? this._setupAudioOnly : this._setupAudioVideo)(aWin,
       pc,
       function() {
@@ -27,7 +22,7 @@ var webrtcMedia = {
             });
           }, function(err) { alert("setLocalDescription failed: " + err);
           });
-        }, function(err) { alert("createOffer failed: " + err); }, constraints);
+        }, function(err) { alert("createOffer failed: " + err); });
       });
     return pc;
   },
@@ -37,11 +32,6 @@ var webrtcMedia = {
     var pc = this._createBasicPc(aWin, aData.from, false, aAudioOnly, aConnectionCallback,
                                  aDataConnectionCallback);
 
-    // XXX Disable the data channel if it is an audio-only call to accomodate android for now.
-    var constraints;
-    if (aAudioOnly)
-      constraints = { 'mandatory': { "MozDontOfferDataChannel": true }};
-
     pc.setRemoteDescription(JSON.parse(aData.request), function() {
       (aAudioOnly ? webrtcMedia._setupAudioOnly :
                     webrtcMedia._setupAudioVideo)(aWin, pc, function() {
@@ -55,40 +45,27 @@ var webrtcMedia = {
                                .join("m=");
           }
           pc.setLocalDescription(answer, function() {
-            if (aAudioOnly) {
-              $.ajax({
-                type: 'POST',
-                url: '/answer',
-                contentType: 'application/json',
-                data: JSON.stringify({
-                  to: aData.from,
-                  request: JSON.stringify(answer)
-                })
-              });
-            }
-            else {
-              var randomPort = function() {
-                return Math.round(Math.random() * 60535) + 5000;
-              };
-              var localPort = randomPort();
-              var remotePort = randomPort();
-              while (remotePort == localPort) // Avoid being extremely unlucky...
-                remotePort = randomPort();
-              $.ajax({
-                type: 'POST',
-                url: '/answer',
-                contentType: 'application/json',
-                data: JSON.stringify({
-                  to: aData.from,
-                  request: JSON.stringify(answer),
-                  callerPort: remotePort,
-                  calleePort: localPort
-                })
-              });
-              pc.connectDataConnection(localPort, remotePort);
-            }
+            var randomPort = function() {
+              return Math.round(Math.random() * 60535) + 5000;
+            };
+            var localPort = randomPort();
+            var remotePort = randomPort();
+            while (remotePort == localPort) // Avoid being extremely unlucky...
+              remotePort = randomPort();
+            $.ajax({
+              type: 'POST',
+              url: '/answer',
+              contentType: 'application/json',
+              data: JSON.stringify({
+                to: aData.from,
+                request: JSON.stringify(answer),
+                callerPort: remotePort,
+                calleePort: localPort
+              })
+            });
+            pc.connectDataConnection(localPort, remotePort);
           }, function(err) {alert("failed to setLocalDescription, " + err);});
-        }, function(err) {alert("failed to createAnswer, " + err);}, constraints);
+        }, function(err) {alert("failed to createAnswer, " + err);});
       }, true);
     }, function(err) {alert("failed to setRemoteDescription, " + err); });
 

diff --git a/static/mobile.css b/static/mobile.css
@@ -31,6 +31,11 @@ button {
   padding-top: 1em;
 }
 
+#chat {
+  overflow: hidden;
+  height: 53px;
+}
+
 /*
  * 946 is the max width of the center area plus its padding
  */

diff --git a/static/mobile.html b/static/mobile.html
@@ -52,6 +52,11 @@
   <div id="localVideoContainer">
     <video id="localVideo" muted></video>
   </div>
+  <div id="chat"></div>
+  <form id="chatForm">
+    <input id="localChat" type="text" disabled="true"/>
+    <input type="submit" style="display:none;"/>
+  </form>
   <button id="closecall" onclick="closeCall();">End Call</button>
   <audio id="localAudio" muted></audio>
   <audio id="remoteAudio"></audio>

diff --git a/static/mobile.js b/static/mobile.js
@@ -87,7 +87,7 @@ function callPerson(aPerson) {
   $("#header").hide();
   $("#contacts").hide();
 
-  gChat.pc = webrtcMedia.startCall(aPerson, window, gChat.audioOnly);
+  gChat.pc = webrtcMedia.startCall(aPerson, window, gChat.audioOnly, onConnection, setupChat);
 }
 
 var filename = "default.txt";
@@ -139,19 +139,19 @@ function setupEventSource() {
 
       if (!document.getElementById("shareCamera").checked)
         gChat.audioOnly = audioOnly = true;
-      gChat.pc = webrtcMedia.handleOffer(data, window, audioOnly);
+      gChat.pc = webrtcMedia.handleOffer(data, window, audioOnly, onConnection, setupChat);
     };
   }, false);
 
   source.addEventListener("answer", function(e) {
     var data = JSON.parse(e.data);
     var pc = gChat.pc;
     pc.setRemoteDescription(JSON.parse(data.request), function() {
-      // XXX Data connections don't currently work on mobile
       // Nothing to do for the audio/video. The interesting things for
       // them will happen in onaddstream.
       // We need to establish the data connection though.
-      // pc.connectDataConnection(5000,5001);
+      if (data.callerPort && data.calleePort)
+        pc.connectDataConnection(data.callerPort, data.calleePort);
     }, function(err) {alert("failed to setRemoteDescription with answer, " + err);});
   }, false);
 
@@ -171,6 +171,40 @@ function setupEventSource() {
   }, true);
 }
 
+function onConnection(aWin, aPc, aPerson, aOriginator) {
+  if (aOriginator)
+    setupChat(aWin, aPc.createDataChannel("SocialAPI", {}));
+}
+
+function setupChat(aWin, aChannel) {
+  aChannel.binaryType = "blob";
+  aChannel.onmessage = function(evt) {
+    insertChatMessage("Them", evt.data);
+  }
+
+  document.getElementById("chatForm").onsubmit = function() {
+    var localChat = document.getElementById("localChat");
+    var message = localChat.value;
+    aChannel.send(message);
+    localChat.value = "";
+    insertChatMessage("Me", message);
+    return false;
+  };
+  document.getElementById("localChat").removeAttribute("disabled");
+}
+
+function insertChatMessage(aFrom, aMessage) {
+  var box = document.getElementById("chat");
+  box.innerHTML += "<span class=\"" + aFrom + "\">" + aFrom + "</span>: " + aMessage + "<br/>";
+  box.scrollTop = box.scrollTopMax;
+}
+
+function cleanChat() {
+  var box = document.getElementById("chat");
+  box.innerHTML = '';
+  document.getElementById("localChat").setAttribute("disabled", "disabled");
+}
+
 function closeCall() {
   if (!gChat)
     return;
@@ -191,4 +225,6 @@ function endCall() {
   $("#call").hide();
   $("#header").show();
   $("#contacts").show();
+
+  cleanChat();
 }