Measure latency between peers and add feedback

Previews will be grey when latency is unknown (not measured yet), green when it's good (60ms or less), blue when medium (between 60 and 120), orange when it's becoming high (between 120 and 250) and red when latency is too high to have a good call (250ms or more)
To reduce confusion, slected preview will now have a reduced opacity instead of the red border
Fix #66

public/css/vroom.css

@@ -4,10 +4,24 @@
 #webRTCVideo video {
   width: 100%;
   height: auto;
-  box-shadow: 0px 0px 2pt 2pt grey;
 }
 #webRTCVideo .selected {
-  box-shadow: 0px 0px 2pt 2pt red;
+  opacity: 0.7;
+}
+.latencyUnknown{
+  box-shadow: 0px 0px 2pt 3pt grey;
+}
+.latencyGood {
+  box-shadow: 0px 0px 2pt 3pt #5CB85C;
+}
+.latencyMedium {
+  box-shadow: 0px 0px 2pt 3pt #428BCA;
+}
+.latencyWarn {
+  box-shadow: 0px 0px 3pt 3pt #F0AD4E;
+}
+.latencyPoor {
+  box-shadow: 0px 0px 3pt 3pt #D9534F;
 }
 #mainVideo{
   margin-right: auto;

public/js/vroom.js

@@ -475,6 +475,7 @@ function initVroom(room) {
             return false;
           })
           .css('max-height', maxHeight())
+          .removeClass('latencyUnknown latencyGood latencyMedium latencyWarn latencyPoor')
           .attr('id', el.attr('id') + '_main')
         );
         $('.selected').removeClass('selected');
@@ -515,6 +516,7 @@ function initVroom(room) {
       id = 'local';
       $('<div></div>').addClass('displayName').attr('id', 'name_local_screen').appendTo(div);
       updateDisplayName(id);
+      $(video).addClass('latencyUnknown');
     }
     // video id contains screen ? it's a peer sharing it's screen
     else if (video.id.match(/screen/)){
@@ -582,6 +584,7 @@ function initVroom(room) {
         micMuted: false,
         videoPaused: false,
         hasVideo: true,
+        lastPong: +new Date,
         dc: peer.getDataChannel('vroom'),
         obj: peer
       };
@@ -605,6 +608,7 @@ function initVroom(room) {
         getPeerRole(peer.id);
       }, 3000);
       video.volume = .7;
+      $(video).addClass('latencyUnknown');
       // Stop moh, we're not alone anymore
       $('#mohPlayer')[0].pause();
       $('.aloneEl').hide(300);
@@ -652,6 +656,24 @@ function initVroom(room) {
     }
   }
 
+  // Feedback for latency with this peer
+  function updatePeerLatency(id,time){
+    if (!peers[id]){
+      return;
+    }
+    var cl = 'latencyPoor';
+    if (time < 60){
+      cl = 'latencyGood';
+    }
+    else if (time < 150){
+      cl = 'latencyMedium';
+    }
+    else if (time < 250){
+      cl = 'latencyWarn';
+    }
+    $('#' + id + '_video_incoming').removeClass('latencyUnknown latencyGood latencyMedium latencyWarn latencyPoor').addClass(cl);
+  }
+
   // Add a new message to the chat history
   function newChatMessage(from,message,time,color){
     var cl = (from === 'local') ? 'chatMsgSelf':'chatMsgOthers';
@@ -969,6 +991,16 @@ function initVroom(room) {
     if (label !== 'vroom'){
       return;
     }
+    // Ping from the peer, lets just respond
+    else if (data.type == 'ping'){
+      peers[peer.id].obj.sendDirectly('vroom', 'pong', data.payload);
+    }
+    // Pong from the peer, lets compute reponse time
+    else if (data.type == 'pong'){
+      var diff = +new Date - parseInt(data.payload);
+      peers[peer.id].lastPong = +new Date;
+      updatePeerLatency(peer.id,diff);
+    }
     // The peer sets a displayName, record this in our peers object
     else if (data.type == 'setDisplayName'){
       var name = data.payload;
@@ -1909,6 +1941,18 @@ function initVroom(room) {
     });
   }, 60000);
 
+  // Ping all the peers every 5 sec to measure latency
+  // Do this through dataChannel
+  setInterval(function(){
+    $.each(peers, function(id){
+      // No response from last ping ? mark latency as poor
+      if (parseInt(peers[id].lastPong)+5000 > +new Date){
+        $('#' + id + '_video_incoming').removeClass('latencyUnknown latencyGood latencyMedium latencyWarn').addClass('latencyPoor');
+      }
+    });
+    webrtc.sendDirectlyToAll('vroom', 'ping', +new Date);
+  }, 5000);
+
   window.onresize = function (){
     $('#webRTCVideo').css('max-height', maxHeight());
     $('#mainVideo>video').css('max-height', maxHeight());

templates/default/join.html.ep

@@ -736,7 +736,7 @@
       <div id="view" class="view row-fluid">
         <div id="webRTCVideo" class="col-xs-12 col-sm-4">
           <div class="col-xs-6 col-sm-12 col-lg-6 previewContainer" id="videoLocalContainer">
-            <video id="webRTCVideoLocal" class="webRTCVideo" muted oncontextmenu="return false;">
+            <video id="webRTCVideoLocal" class="webRTCVideo latencyUnknown" muted oncontextmenu="return false;">
             </video>
             <div id="localVolume" class="volumeBar">
             </div>