Get SimpleWebRTC conf from the API

Instead of printing it in a JS scriplet inline. Also add a modal popup while the initial connection is being established
Also make the max frame rate to be configured

conf/settings.ini.dist

@@ -20,6 +20,11 @@
 ; the realm used for turn accounts. Must match the realm of your turn server
 ;realm = 'vroom'
 
+[video]
+; Define the max frame rate for video
+; higher will produce better quality streams, but will also require more bandwidth and CPU power
+;frame_rate = 15
+
 [email]
 ; Address set in the From field of email sent by VROOM
 ;from = 'no-reply@example.com'

lib/Vroom/Constants.pm

@@ -122,7 +122,8 @@ use constant API_ACTIONS => {
     get_room_conf    => 1,
     get_peer_role    => 1,
     join             => 1,
-    get_padd_session => 1
+    get_padd_session => 1,
+    get_rtc_conf     => 1 
   },
   anonymous => {
     create_room  => 1

lib/Vroom/I18N/en.pm

@@ -229,6 +229,8 @@ our %Lexicon = (
   "CLICK_IF_NO_WEBCAM"                   => "If you don't have a webcam, click the following link, you'll be able to join the room with audio only",
   "CONNECTION_LOST"                      => "You have been disconnected",
   "CHECK_INTERNET_ACCESS"                => "Please, check your Internet connection, then refresh this page",
+  "CONNECTING"                           => "Connecting",
+  "CONNECTING_PLEASE_WAIT"               => "Please wait while establishing the connection",
   "HOME"                                 => "Home",
   "HELP"                                 => "Help",
   "ABOUT"                                => "About",

lib/Vroom/I18N/fr.pm

@@ -238,6 +238,8 @@ our %Lexicon = (
                                                    "en audio uniquement",
     "CONNECTION_LOST"                           => "Vous avez été déconnecté",
     "CHECK_INTERNET_ACCESS"                     => "Vérifiez votre connexion, et raffraîchissez cette page ensuite",
+    "CONNECTING"                                => "Connexion en cours",
+    "CONNECTING_PLEASE_WAIT"                    => "Veuillez patienter le temps d'établir la connexion",
     "HOME"                                      => "Accueil",
     "HELP"                                      => "Aide",
     "ABOUT"                                     => "À propos",

public/js/vroom.js

@@ -21,6 +21,9 @@ var locale = {};
 // When pagination is done, how many item per page
 var itemPerPage = 20;
 
+// Will store the global webrtc object
+var webrtc = undefined;
+
 // Localize the strings we need
 $.ajax({
   url: rootUrl + 'localize/' + currentLang,
@@ -575,6 +578,30 @@ function initAdmin(){
   });
 }
 
+function initJoin(room){
+  $.ajax({
+    data: {
+      req: JSON.stringify({
+        action: 'get_rtc_conf',
+        param: {
+          room: room,
+        }
+      })
+    },
+    error: function(data){
+      showApiError(data);
+    },
+    success: function(data){
+      if (!video){
+        data.config.media.video = false;
+      }
+      data.config.localVideoEl = 'webRTCVideoLocal';
+      webrtc = new SimpleWebRTC(data.config);
+      initVroom(room);
+    }
+  });
+}
+
 // This is the main function called when you join a room
 function initVroom(room) {
 
@@ -876,7 +903,7 @@ function initVroom(room) {
         // color can be sent through the signaling channel
         peer.send('peer_color', {color: peers.local.color});
         // if we don't have a video, just signal it to this peer
-        peer.send('media_info', {video: !!videoConstraints});
+        peer.send('media_info', {video: !!video});
         // We don't have chat history yet ? Lets ask to this new peer
         if(!peers.local.hasHistory && chatIndex == 0){
           peer.sendDirectly('vroom', 'getHistory', '');
@@ -1515,11 +1542,14 @@ function initVroom(room) {
         if (data.msg){
           $.notify(data.msg, 'success');
         }
+        $('#videoLocalContainer').show(200);
+        $('#timeCounterXs,#timeCounter').tinyTimer({ from: new Date });
+        setTimeout(function(){
+          $('#connecting').modal('hide');
+        }, 200);
       }
     });
     checkMoh();
-    $('#videoLocalContainer').show(200);
-    $('#timeCounterXs,#timeCounter').tinyTimer({ from: new Date });
   });
 
   // Handle new video stream added: someone joined the room
@@ -1764,7 +1794,7 @@ function initVroom(room) {
   });
 
   // Disable suspend webcam button if no webcam
-  if (!videoConstraints){
+  if (!video){
     $('.btn-suspend-cam').addClass('disabled');
   }
 

templates/default/join.html.ep

@@ -377,6 +377,24 @@
         </div>
       </div>
     </div>
+    <div class="modal fade" role="dialog" id="connecting" aria-labelledby="connecting" aria-hidden="false" data-keyboard="false" data-backdrop="static">
+      <div class="modal-dialog modal-lg">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h4 class="modal-title">
+              <%=l 'CONNECTING' %>
+            </h4>
+          </div>
+          <div class="modal-body">
+            <img class="img-responsive center-block" src="<%= $self->get_url('/') %>img/connecting.gif" alt="<%=l 'CONNECTING' %>"/>
+            <br>
+            <p class="text-center">
+              <%=l 'CONNECTING_PLEASE_WAIT' %>
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
 %=include 'invite_modal'
 %=include 'configure_modal'
 %=include 'auth_modal'
@@ -432,7 +450,6 @@
     <script>
       var roomName = '<%= $room %>';
       $( document ).ready(function() {
-        setTimeout(function(){
           etherpad = {
             enabled: <%= $etherpad %>,
             <%
@@ -442,55 +459,9 @@
             path: "<%= $ethuri->path . '/p/' %>",
             group: "<%= $etherpadGroup %>"
           };
-          <% if ($video eq 'false'){ %>
+          video = <%= ($video eq 'false') ? 'false' : 'true' %>;
-          videoConstraints = false;
+          initJoin(roomName);
-          <% } else{ %>
+          $('#connecting').modal('show');
-          videoConstraints = {
-            mandatory: {
-              maxFrameRate: 15,
-            }
-          };
-          <% } %>
-          webrtc = new SimpleWebRTC({
-                   url: "<%= $config->{'signaling.uri'} %>",
-                   peerConnectionConfig: {
-                     iceServers: [
-                       {
-                         "url":"<%= $config->{'turn.stun_server'} %>"
-                       },
-                       <% if ($config->{'turn.turn_server'} && $config->{'turn.turn_server'} ne ''){ %>
-                       {
-                         "url":"<%= $config->{'turn.turn_server'} %>",
-                         <% if ($config->{'turn.turn_user'} && $config->{'turn.turn_user'} ne '' &&
-                                $config->{'turn.turn_password'} && $config->{'turn.turn_password'} ne '') { %>
-                         "username":"<%== $config->{'turn.turn_user'} %>",
-                         "credential":"<%== $config->{'turn.turn_password'} %>"
-                         <% } else { %>
-                         "username":"<%== $room %>",
-                         "credential":"<%== $turnPassword %>"
-                         <% } %>
-                       }
-                       <% } %>
-                     ]
-                   },
-                   localVideoEl: 'webRTCVideoLocal',
-                   autoRequestMedia: true,
-                   enableDataChannels: true,
-                   debug: false,
-                   detectSpeakingEvents: true,
-                   adjustPeerVolume: false,
-                   autoAdjustMic: false,
-                   harkOptions: {
-                     interval: 300,
-                     threshold: -20
-                   },
-                   media: {
-                     video: videoConstraints,
-                     audio: true
-                   }
-                 });
-          initVroom(roomName);
-        }, 300);
         });
     </script>
   </div>

vroom.pl

@@ -36,6 +36,7 @@ $config->{'turn.turn_server'}                  ||= undef;
 $config->{'turn.turn_user'}                    ||= undef;
 $config->{'turn.turn_password'}                ||= undef;
 $config->{'turn.realm'}                        ||= 'vroom';
+$config->{'video.frame_rate'}                  ||= 15;
 $config->{'email.from '}                       ||= 'vroom@example.com';
 $config->{'email.contact'}                     ||= 'admin@example.com';
 $config->{'email.sendmail'}                    ||= '/sbin/sendmail';
@@ -1262,6 +1263,7 @@ any '/api' => sub {
       }
     );
   }
+  # And here anonymous method, which do not require an API Key
   elsif ($req->{action} eq 'create_room'){
     $req->{param}->{room} ||= $self->get_random_name();
     $req->{param}->{room} = lc $req->{param}->{room};
@@ -1601,6 +1603,53 @@ any '/api' => sub {
       status => 403
     );
   }
+  # Return configuration for SimpleWebRTC
+  elsif ($req->{action} eq 'get_rtc_conf'){
+    my $resp = {
+      url => $config->{'signaling.uri'},
+      peerConnectionConfig => {
+        iceServers => [{
+          url => $config->{'turn.stun_server'} 
+        }]
+      },
+      autoRequestMedia => Mojo::JSON::true,
+      enableDataChannels => Mojo::JSON::true,
+      debug => Mojo::JSON::false,
+      detectSpeakingEvents => Mojo::JSON::true,
+      adjustPeerVolume => Mojo::JSON::false,
+      autoAdjustMic => Mojo::JSON::false,
+      harkOptions => {
+        interval => 300,
+        threshold => -20
+      },
+      media => {
+        audio => Mojo::JSON::true,
+        video => {
+          mandatory => {
+            maxFrameRate => $config->{'video.frame_rate'}
+          }
+        }
+      }
+    };
+    # TODO: Support several TURN server in config
+    if ($config->{'turn.turn_server'}){
+      my $turn = { url => $config->{'turn.turn_server'} };
+      if ($config->{'turn.turn_user'} && $config->{'turn.turn_password'}){
+        $turn->{username}   = $config->{'turn.turn_user'};
+        $turn->{credential} = $config->{'turn.turn_password'};
+      }
+      else{
+        $turn->{username}   = $room->{name};
+        $turn->{credential} = $room->{token};
+      }
+      push @{$resp->{peerConnectionConfig}->{iceServers}}, $turn;
+    }
+    return $self->render(
+      json => {
+        config => $resp
+      }
+    );
+  }
   # Return just room config
   elsif ($req->{action} eq 'get_room_conf'){
     return $self->render(