Notify others if we don't have a webcam

In which case, add a grey glyphicon in the preview
Also disable suspend buttons

public/css/vroom.css

@@ -67,6 +67,18 @@
   font-size: 2em;
   content: "\e124";
 }
+.noWebcam{
+  position: absolute;
+  top: 10%;
+  left: 50%;
+  margin-left: -25px;
+}
+.noWebcam:before{
+  font-family: 'Glyphicons Halflings';
+  color: grey;
+  font-size: 4em;
+  content: "\e008";
+}
 .displayName {
   text-align: center;
   font-weight: bold;

public/js/vroom.js

@@ -311,7 +311,8 @@ function initVroom(room) {
       videoPaused: false,
       displayName: '',
       color: chooseColor(),
-      role: 'participant'
+      role: 'participant',
+      hasVideo: true
     }
   };
   var roomInfo;
@@ -582,6 +583,7 @@ function initVroom(room) {
         color: color,
         micMuted: false,
         videoPaused: false,
+        hasVideo: true,
         dc: peer.getDataChannel('vroom'),
         obj: peer
       };
@@ -595,6 +597,8 @@ 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});
         // We don't have chat history yet ? Lets ask to this new peer
         if(!peers.local.hasHistory && chatIndex == 0){
           peer.sendDirectly('vroom', 'getHistory', '');
@@ -893,6 +897,15 @@ function initVroom(room) {
     }
   });
 
+  // This peer indicates he has no webcam
+  webrtc.on('media_info', function(data){
+    if (!data.payload.video){
+      $('#overlay_' + data.id).append('<div id="noWebcam_' + data.id + '" class="noWebcam"></div>');
+      $('#actionPause_' + data.id).addClass('disabled');
+      peers[data.id].hasVideo = false;
+    }
+  });
+
   // An owner has just promoted a participant of the room to the owner role
   webrtc.on('owner_promoted', function(data){
     if (peers[data.id].role != 'owner' || data.roomType == 'screen'){
@@ -1478,6 +1491,12 @@ function initVroom(room) {
     }
   });
 
+  // Disable suspend webcam button if no webcam
+  if (!videoConstraints){
+    $('#suspendCamButton').attr('disabled', true);
+    $('#suspendCamLabel').addClass('disabled');
+  }
+
   // Suspend the webcam
   $('#suspendCamButton').change(function() {
     var action = ($(this).is(':checked')) ? 'pause':'resume';
@@ -1512,7 +1531,7 @@ function initVroom(room) {
   // Suspend all the peers
   $('#suspendEveryoneButton').click(function(){
     $.each(peers, function(id){
-      if (id != 'local'){
+      if (id != 'local' && peers[id].hasVideo){
         pausePeer(id, 'pause');
       }
     });
@@ -1520,7 +1539,7 @@ function initVroom(room) {
   // Resum all the peers
   $('#resumeEveryoneButton').click(function(){
     $.each(peers, function(id){
-      if (id != 'local'){
+      if (id != 'local' && peers[id].hasVideo){
         pausePeer(id, 'resume');
       }
     });

templates/default/join.html.ep

@@ -754,6 +754,15 @@
       var roomName = '<%= $room %>';
       $( document ).ready(function() {
         setTimeout(function(){
+          <% if ($video eq 'false'){ %>
+          videoConstraints = false;
+          <% } else{ %>
+          videoConstraints = {
+            mandatory: {
+              maxFrameRate: 15,
+            }
+          };
+          <% } %>
           webrtc = new SimpleWebRTC({
                    url: "<%= $config->{signalingServer} %>",
                    peerConnectionConfig: {
@@ -774,15 +783,7 @@
                      threshold: -20
                    },
                    media: {
-                     <% if ($video eq 'false'){ %>
-                     video: false,
-                     <% } else{ %>
-                     video: {
-                       mandatory: {
-                         maxFrameRate: 15,
-                       }
-                     },
-                     <% } %>
+                     video: videoConstraints,
                      audio: true
                    }
                  });