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
master
Daniel Berteaud 10 years ago
parent ab4126d8a9
commit 536143bdf0
  1. 25
      chrome-extension/background.js
  2. 14
      chrome-extension/content.js
  3. 19
      chrome-extension/manifest.json
  4. 3
      conf/vroom.conf.sample
  5. 4
      lib/Vroom/I18N/en.pm
  6. 7
      lib/Vroom/I18N/fr.pm
  7. 3
      public/css/vroom.css
  8. 24
      public/js/vroom.js
  9. 1
      public/vroom.pl
  10. 11
      templates/default/join.html.ep

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

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

@ -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://*/*"]
}]
}

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

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

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

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

@ -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(){
$.notify(locale.CANT_SHARE_SCREEN, 'error');
$('#shareScreenLabel').removeClass('active');
function cantShare(err){
$.notify(err, 'error');
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{

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

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

Loading…
Cancel
Save