diff --git a/public/css/vroom.css b/public/css/vroom.css index 3b949d9..1df6339 100644 --- a/public/css/vroom.css +++ b/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; diff --git a/public/js/vroom.js b/public/js/vroom.js index 23c8cbd..1d279f1 100644 --- a/public/js/vroom.js +++ b/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('
'); + $('#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'); } }); diff --git a/templates/default/join.html.ep b/templates/default/join.html.ep index 2ae9134..ec99dbf 100644 --- a/templates/default/join.html.ep +++ b/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 } });