Update screen sharing

Since Chrome 34, a new API for screen sharing is available (the previous one using the flag will probably be deprecated soon)
This commit adds:
- Source of a simple Chrome extension to use this new API (which is a perfect copy of the sample extension given by &yet here: https://github.com/HenrikJoreteg/getScreenMedia
- Adapt help page
- New modal dialog to prompt user to install the extension from Google Web Store
- Better error messages if you can't share your screen

Should fix #7

chrome-extension/background.js

@@ -0,0 +1,25 @@
+/* background page, responsible for actually choosing media */
+chrome.runtime.onConnect.addListener(function (channel) {
+    channel.onMessage.addListener(function (message) {
+        switch(message.type) {
+        case 'getScreen':
+            var pending = chrome.desktopCapture.chooseDesktopMedia(message.options || ['screen', 'window'], 
+                                                                   channel.sender.tab, function (streamid) {
+                // communicate this string to the app so it can call getUserMedia with it
+                message.type = 'gotScreen';
+                message.sourceId = streamid;
+                channel.postMessage(message);
+            });
+            // let the app know that it can cancel the timeout
+            message.type = 'getScreenPending';
+            message.request = pending;
+            channel.postMessage(message);
+            break;
+        case 'cancelGetScreen':
+            chrome.desktopCapture.cancelChooseDesktopMedia(message.request);
+            message.type = 'canceledGetScreen';
+            channel.postMessage(message);
+            break;
+        }
+    });
+});

chrome-extension/content.js

@@ -0,0 +1,14 @@
+/* the chrome content script which can listen to the page dom events */
+var channel = chrome.runtime.connect();
+channel.onMessage.addListener(function (message) {
+    console.log('channel message', message);
+    window.postMessage(message, '*');
+});
+
+window.addEventListener('message', function (event) {
+    if (event.source != window)
+        return;
+    if (!event.data && (event.data.type == 'getScreen' || event.data.type == 'cancelGetScreen'))
+        return;
+    channel.postMessage(event.data);
+});

chrome-extension/manifest.json

@@ -0,0 +1,19 @@
+{
+  "name": "Screen sharing for VROOM",
+  "description": "Allow screen sharing in the VROOM WebRTC visio conference app",
+  "version": "0.0.1",
+  "manifest_version": 2,
+  "minimum_chrome_version": "34",
+  "icons": {
+  },
+  "permissions": [
+    "desktopCapture"
+  ],
+  "background": {
+    "scripts": ["background.js"]
+  },
+  "content_scripts": [ {
+    "js": [ "content.js" ],
+    "matches": ["https://*/*"]
+  }]
+}

conf/vroom.conf.sample

@@ -24,6 +24,9 @@ secret => 'ChangeMe!',
 inactivityTimeout => 3600,
 logLevel => 'info',
 
+# ID of the Chrome extension for screen sharing
+chromeExtensionId => 'ecicdpoejfllflombfanbhfpgcimjddn',
+
 # Various
 sendmail => '/sbin/sendmail'
 };

lib/Vroom/I18N/en.pm

@@ -49,6 +49,9 @@ our %Lexicon = (
   "CAM_RESUMED"                          => "Your webcam is on again",
   "SHARE_YOUR_SCREEN"                    => "Share your screen with the other members of this room",
   "CANT_SHARE_SCREEN"                    => "Sorry, your configuration does not allow screen sharing",
+  "SCREEN_SHARING_ONLY_FOR_CHROME"       => "Sorry, but you can't share your screen. Only Google Chrome supports this feature for now",
+  "SCREEN_SHARING_CANCELLED"             => "Screen sharing has been cancelled",
+  "VROOM_CHROME_EXTENSION"               => "To enable screen sharing, you need to install an extension. Click on the following link and refresh this page",
   "EVERYONE_CAN_SEE_YOUR_SCREEN"         => "All other participants can see your screen now",
   "SCREEN_UNSHARED"                      => "You do no longer share your screen",
   "ERROR_MAIL_INVALID"                   => "Please enter a valid email address",
@@ -79,6 +82,7 @@ our %Lexicon = (
   "SCREEN_SHARING"                       => "Screen Sharing",
   "HELP_SCREEN_SHARING"                  => "VROOM lets you share your screen with the other members of the room. For now " .
                                             "this feature is only available in Google Chrome, and you need to change the following setting " .
+                                            "(since version 34, this setting isn't needed anymore)" .
                                             "<ul>" .
                                             "  <li>Type chrome://flags in the address bar" .
                                             "  <li>Look for the option \"Enable screen sharing in getUserMedia()\" and click on " .

lib/Vroom/I18N/fr.pm

@@ -54,6 +54,10 @@ our %Lexicon = (
     "CAM_RESUMED"                               => "Votre webcam est à nouveau active",
     "SHARE_YOUR_SCREEN"                         => "Partagez votre écran avec les autres membres du salon",
     "CANT_SHARE_SCREEN"                         => "Désolé, mais votre configuration ne vous permet pas de partager votre écran",
+    "SCREEN_SHARING_ONLY_FOR_CHROME"            => "Désolé, mais vous ne pouvez pas partager votre écran. Seul le navigateur Google Chrome " .
+                                                   "supporte cette fonction pour l'instant",
+    "SCREEN_SHARING_CANCELLED"                  => "Le partage d'écran a été annulé",
+    "VROOM_CHROME_EXTENSION"                    => "Pour activer le partage d'écran, vous devez installer une extension, cliquez sur le lien ci-dessous, puis raffraîchissez cette page",
     "EVERYONE_CAN_SEE_YOUR_SCREEN"              => "Tous les autres participants peuvent voir votre écran",
     "SCREEN_UNSHARED"                           => "Vous ne partagez plus votre écran",
     "ERROR_MAIL_INVALID"                        => "Veuillez saisir une adresse email valide",
@@ -85,7 +89,8 @@ our %Lexicon = (
     "SREEN_SHARING"                             => "Partage d'écran",
     "HELP_SCREEN_SHARING"                       => "VROOM vous permet de partager votre écran avec tous les autres participants d'une conférence. " .
                                                    "Pour l'instant, le partage d'écran ne fonctionne qu'avec le navigateur Google Chrome, " .
-                                                   "et nécessite d'effectuer le réglage suivant:" . 
+                                                   "et nécessite d'effectuer le réglage suivant (à partir de la version 34, ce réglage n'est " .
+                                                   "plus nécessaire)" . 
                                                    "<ul>" . 
                                                    "  <li>Tapez chrome://flags/ dans la barre d'adresse</li>" .
                                                    "  <li>Recherchez \"Activer la fonctionnalité de capture d'écran dans getUserMedia()\" et cliquez sur " .

public/css/vroom.css

@@ -101,6 +101,9 @@
 #chatMenu {
   margin-bottom: 15px;
 }
+#chromeExtMessage {
+  text-align: center;
+}
 @media screen and (max-width: 480px) {
   body {
     font-size: 0.8em;

public/js/vroom.js

@@ -15,6 +15,8 @@ var locale = {
   ERROR_MAIL_INVALID: '',
   ERROR_OCCURED: '',
   CANT_SHARE_SCREEN: '',
+  SCREEN_SHARING_ONLY_FOR_CHROME: '',
+  SCREEN_SHARING_CANCELLED: '',
   EVERYONE_CAN_SEE_YOUR_SCREEN: '',
   SCREEN_UNSHARED: '',
   MIC_MUTED: '',
@@ -63,7 +65,7 @@ function initVroom(room) {
     dataType: 'json',    
   });
 
-  // Screen sharing is onl suported on chrome > 26
+  // Screen sharing is only suported on chrome > 26
   if ( !$.browser.webkit || $.browser.versionNumber < 26 ) {
     $("#shareScreenLabel").addClass('disabled');
   }
@@ -445,15 +447,27 @@ function initVroom(room) {
   // ScreenSharing
   $('#shareScreenButton').change(function() {
     var action = ($(this).is(":checked")) ? 'share':'unshare';
-    function cantShare(){
+    function cantShare(err){
-      $.notify(locale.CANT_SHARE_SCREEN, 'error');
+      $.notify(err, 'error');
-      $('#shareScreenLabel').removeClass('active');
       return;
     }
     if (!peers.local.screenShared && action === 'share'){
       webrtc.shareScreen(function(err){
         if(err){
-          cantShare();
+          if (err.name == 'EXTENSION_UNAVAILABLE'){
+            var ver = 34;
+            if ($.browser.linux) ver = 35;
+            if ($.browser.webkit && $.browser.versionNumber >= ver)
+              $('#chromeExtMessage').modal('show');
+            else
+              cantShare(locale.SCREEN_SHARING_ONLY_FOR_CHROME);
+          }
+          else if (err.name == 'PERMISSION_DENIED' || err.name == 'PermissionDeniedError'){
+            cantShare(locale.SCREEN_SHARING_CANCELLED);
+          }
+          else
+            cantShare(locale.CANT_SHARE_SCREEN + ' ' + err.name);
+          $('#shareScreenLabel').removeClass('active');
           return;
         }
         else{

public/vroom.pl

@@ -67,6 +67,7 @@ our $config = plugin Config => {
     template            => 'default',
     inactivityTimeout   => 3600,
     logLevel            => 'info',
+    chromeExtensionId   => 'ecicdpoejfllflombfanbhfpgcimjddn',
     sendmail            => '/sbin/sendmail'
   }
 };

templates/default/join.html.ep

@@ -70,6 +70,17 @@
         </div>
       </div>
     </nav>
+    <div class="modal fade" role="dialog" id="chromeExtMessage" aria-labelledby="chromeExtMessage" aria-hidden="true">
+      <div class="modal-dialog modal-sm">
+        <div class="modal-content well">
+          <p><%=l 'VROOM_CHROME_EXTENSION' %></p>
+          <a href="https://chrome.google.com/webstore/detail/<%= $config->{chromeExtensionId} %>" target="_blank">
+            <span class="glyphicon glyphicon-download-alt">
+            </span>
+          </a>
+        </div>
+      </div>
+    </div>
     <div class="frame">
       <div id="chatMenu" class="nav-collapse collapse">
         <div id="chatHistory" class="form-control">