mirror of https://github.com/dani/vroom.git
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
This commit is contained in:
parent
ab4126d8a9
commit
536143bdf0
|
@ -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,
|
inactivityTimeout => 3600,
|
||||||
logLevel => 'info',
|
logLevel => 'info',
|
||||||
|
|
||||||
|
# ID of the Chrome extension for screen sharing
|
||||||
|
chromeExtensionId => 'ecicdpoejfllflombfanbhfpgcimjddn',
|
||||||
|
|
||||||
# Various
|
# Various
|
||||||
sendmail => '/sbin/sendmail'
|
sendmail => '/sbin/sendmail'
|
||||||
};
|
};
|
||||||
|
|
|
@ -49,6 +49,9 @@ our %Lexicon = (
|
||||||
"CAM_RESUMED" => "Your webcam is on again",
|
"CAM_RESUMED" => "Your webcam is on again",
|
||||||
"SHARE_YOUR_SCREEN" => "Share your screen with the other members of this room",
|
"SHARE_YOUR_SCREEN" => "Share your screen with the other members of this room",
|
||||||
"CANT_SHARE_SCREEN" => "Sorry, your configuration does not allow screen sharing",
|
"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",
|
"EVERYONE_CAN_SEE_YOUR_SCREEN" => "All other participants can see your screen now",
|
||||||
"SCREEN_UNSHARED" => "You do no longer share your screen",
|
"SCREEN_UNSHARED" => "You do no longer share your screen",
|
||||||
"ERROR_MAIL_INVALID" => "Please enter a valid email address",
|
"ERROR_MAIL_INVALID" => "Please enter a valid email address",
|
||||||
|
@ -79,6 +82,7 @@ our %Lexicon = (
|
||||||
"SCREEN_SHARING" => "Screen Sharing",
|
"SCREEN_SHARING" => "Screen Sharing",
|
||||||
"HELP_SCREEN_SHARING" => "VROOM lets you share your screen with the other members of the room. For now " .
|
"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 " .
|
"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>" .
|
"<ul>" .
|
||||||
" <li>Type chrome://flags in the address bar" .
|
" <li>Type chrome://flags in the address bar" .
|
||||||
" <li>Look for the option \"Enable screen sharing in getUserMedia()\" and click on " .
|
" <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",
|
"CAM_RESUMED" => "Votre webcam est à nouveau active",
|
||||||
"SHARE_YOUR_SCREEN" => "Partagez votre écran avec les autres membres du salon",
|
"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",
|
"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",
|
"EVERYONE_CAN_SEE_YOUR_SCREEN" => "Tous les autres participants peuvent voir votre écran",
|
||||||
"SCREEN_UNSHARED" => "Vous ne partagez plus votre écran",
|
"SCREEN_UNSHARED" => "Vous ne partagez plus votre écran",
|
||||||
"ERROR_MAIL_INVALID" => "Veuillez saisir une adresse email valide",
|
"ERROR_MAIL_INVALID" => "Veuillez saisir une adresse email valide",
|
||||||
|
@ -85,7 +89,8 @@ our %Lexicon = (
|
||||||
"SREEN_SHARING" => "Partage d'écran",
|
"SREEN_SHARING" => "Partage d'écran",
|
||||||
"HELP_SCREEN_SHARING" => "VROOM vous permet de partager votre écran avec tous les autres participants d'une conférence. " .
|
"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, " .
|
"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>" .
|
"<ul>" .
|
||||||
" <li>Tapez chrome://flags/ dans la barre d'adresse</li>" .
|
" <li>Tapez chrome://flags/ dans la barre d'adresse</li>" .
|
||||||
" <li>Recherchez \"Activer la fonctionnalité de capture d'écran dans getUserMedia()\" et cliquez sur " .
|
" <li>Recherchez \"Activer la fonctionnalité de capture d'écran dans getUserMedia()\" et cliquez sur " .
|
||||||
|
|
|
@ -101,6 +101,9 @@
|
||||||
#chatMenu {
|
#chatMenu {
|
||||||
margin-bottom: 15px;
|
margin-bottom: 15px;
|
||||||
}
|
}
|
||||||
|
#chromeExtMessage {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
@media screen and (max-width: 480px) {
|
@media screen and (max-width: 480px) {
|
||||||
body {
|
body {
|
||||||
font-size: 0.8em;
|
font-size: 0.8em;
|
||||||
|
|
|
@ -15,6 +15,8 @@ var locale = {
|
||||||
ERROR_MAIL_INVALID: '',
|
ERROR_MAIL_INVALID: '',
|
||||||
ERROR_OCCURED: '',
|
ERROR_OCCURED: '',
|
||||||
CANT_SHARE_SCREEN: '',
|
CANT_SHARE_SCREEN: '',
|
||||||
|
SCREEN_SHARING_ONLY_FOR_CHROME: '',
|
||||||
|
SCREEN_SHARING_CANCELLED: '',
|
||||||
EVERYONE_CAN_SEE_YOUR_SCREEN: '',
|
EVERYONE_CAN_SEE_YOUR_SCREEN: '',
|
||||||
SCREEN_UNSHARED: '',
|
SCREEN_UNSHARED: '',
|
||||||
MIC_MUTED: '',
|
MIC_MUTED: '',
|
||||||
|
@ -63,7 +65,7 @@ function initVroom(room) {
|
||||||
dataType: 'json',
|
dataType: 'json',
|
||||||
});
|
});
|
||||||
|
|
||||||
// Screen sharing is onl suported on chrome > 26
|
// Screen sharing is only suported on chrome > 26
|
||||||
if ( !$.browser.webkit || $.browser.versionNumber < 26 ) {
|
if ( !$.browser.webkit || $.browser.versionNumber < 26 ) {
|
||||||
$("#shareScreenLabel").addClass('disabled');
|
$("#shareScreenLabel").addClass('disabled');
|
||||||
}
|
}
|
||||||
|
@ -445,15 +447,27 @@ function initVroom(room) {
|
||||||
// ScreenSharing
|
// ScreenSharing
|
||||||
$('#shareScreenButton').change(function() {
|
$('#shareScreenButton').change(function() {
|
||||||
var action = ($(this).is(":checked")) ? 'share':'unshare';
|
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;
|
return;
|
||||||
}
|
}
|
||||||
if (!peers.local.screenShared && action === 'share'){
|
if (!peers.local.screenShared && action === 'share'){
|
||||||
webrtc.shareScreen(function(err){
|
webrtc.shareScreen(function(err){
|
||||||
if(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;
|
return;
|
||||||
}
|
}
|
||||||
else{
|
else{
|
||||||
|
|
|
@ -67,6 +67,7 @@ our $config = plugin Config => {
|
||||||
template => 'default',
|
template => 'default',
|
||||||
inactivityTimeout => 3600,
|
inactivityTimeout => 3600,
|
||||||
logLevel => 'info',
|
logLevel => 'info',
|
||||||
|
chromeExtensionId => 'ecicdpoejfllflombfanbhfpgcimjddn',
|
||||||
sendmail => '/sbin/sendmail'
|
sendmail => '/sbin/sendmail'
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
|
@ -70,6 +70,17 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</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 class="frame">
|
||||||
<div id="chatMenu" class="nav-collapse collapse">
|
<div id="chatMenu" class="nav-collapse collapse">
|
||||||
<div id="chatHistory" class="form-control">
|
<div id="chatHistory" class="form-control">
|
||||||
|
|
Loading…
Reference in New Issue