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
master
Daniel Berteaud 11 years ago
parent ec34e179d1
commit 06f7ec3e1e
  1. 18
      public/css/vroom.css
  2. 44
      public/js/vroom.js
  3. 2
      templates/default/join.html.ep

@ -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;

@ -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());

@ -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>

Loading…
Cancel
Save