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,
|
||||
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…
Reference in New Issue