From 4058c399fb0f1b993d0a60bfd49af693802d4481 Mon Sep 17 00:00:00 2001 From: Joachim Bauch Date: Fri, 20 Jan 2017 12:27:13 +0100 Subject: [PATCH 01/14] Implement first draft of screensharing support. Signed-off-by: Joachim Bauch --- js/app.js | 43 ++++++++++++++++++++++++++++++++++++++ js/simplewebrtc.js | 18 ++++++++++++++++ js/webrtc.js | 28 +++++++++++++++++++++++++ templates/index-public.php | 3 +++ templates/index.php | 3 +++ 5 files changed, 95 insertions(+) diff --git a/js/app.js b/js/app.js index 9a5d5efe4..b832cf650 100644 --- a/js/app.js +++ b/js/app.js @@ -210,6 +210,49 @@ } }); + var screensharingStopped = function() { + console.log("Screensharing now stopped"); + }; + + OCA.SpreedMe.webrtc.on('localScreenStopped', function() { + screensharingStopped(); + }); + + $('#toogleScreensharing').click(function() { + var webrtc = OCA.SpreedMe.webrtc; + if (!webrtc.capabilities.supportScreenSharing) { + console.log("Screensharing is not supported"); + return; + } + + if (webrtc.getLocalScreen()) { + webrtc.stopScreenShare(); + screensharingStopped(); + } else { + webrtc.shareScreen(function(err) { + if (err) { + switch (err.name) { + case "HTTPS_REQUIRED": + console.log("Need HTTPS for screensharing."); + break; + case "PERMISSION_DENIED": + case "CEF_GETSCREENMEDIA_CANCELED": // Experimental, may go away in the future. + console.log("User cancelled screensharing request."); + break; + case "EXTENSION_UNAVAILABLE": + console.log("Need to install extension to make screensharing work."); + break; + default: + console.log("Could not start screensharing", err.name, err); + break; + } + } else { + console.log("Screensharing now started"); + } + }); + } + }); + $("#guestName").on('click', function() { $('#guestName').addClass('hidden'); $("#guestNameInput").removeClass('hidden'); diff --git a/js/simplewebrtc.js b/js/simplewebrtc.js index 690d9c72e..36d4cd2e4 100644 --- a/js/simplewebrtc.js +++ b/js/simplewebrtc.js @@ -17739,6 +17739,9 @@ mLine.iceTransport.addRemoteCandidate({}); } }); + } else if (message.type === 'unshareScreen') { + this.parent.emit('unshareScreen', {id: message.from}); + this.end(); } }; @@ -18317,7 +18320,11 @@ if (this.getLocalScreen()) { this.webrtc.stopScreenShare(); } + // Notify peers were sending to. this.webrtc.peers.forEach(function (peer) { + if (peer.type === 'screen' && peer.sharemyscreen) { + peer.send('unshareScreen'); + } if (peer.broadcaster) { peer.end(); } @@ -18478,6 +18485,17 @@ } }); + this.on('unshareScreen', function(message) { + // End peers we were receiving the screensharing stream from. + var peers = self.getPeers(message.from, 'screen'); + peers.forEach(function(peer) { + if (!peer.sharemyscreen) { + peer.end(); + } + }); + }); + + // log events in debug mode if (this.config.debug) { this.on('*', function (event, val1, val2) { diff --git a/js/webrtc.js b/js/webrtc.js index 52f78dad0..5f4c63044 100644 --- a/js/webrtc.js +++ b/js/webrtc.js @@ -350,6 +350,11 @@ var spreedMappingTable = []; OCA.SpreedMe.webrtc.on('videoAdded', function(video, peer) { console.log('video added', peer); + if (peer.type === 'screen') { + OCA.SpreedMe.webrtc.emit('localScreenAdded', video); + return; + } + var remotes = document.getElementById('videos'); if (remotes) { // Indicator for username @@ -468,6 +473,14 @@ var spreedMappingTable = []; // a peer was removed OCA.SpreedMe.webrtc.on('videoRemoved', function(video, peer) { + if (video.dataset.screensharing) { + // SimpleWebRTC notifies about stopped screensharing through + // the generic "videoRemoved" API, but the stream must be + // handled differently. + OCA.SpreedMe.webrtc.emit('localScreenRemoved', video); + return; + } + // a removed peer can't speak anymore ;) OCA.SpreedMe.speakers.remove(peer, true); @@ -492,6 +505,21 @@ var spreedMappingTable = []; OCA.SpreedMe.webrtc.sendDirectlyToAll('videoOff'); }); + // Local screen added. + OCA.SpreedMe.webrtc.on('localScreenAdded', function (video) { + video.onclick = function () { + video.style.width = video.videoWidth + 'px'; + video.style.height = video.videoHeight + 'px'; + }; + video.dataset.screensharing = true; + document.getElementById('localScreenContainer').appendChild(video); + }); + // Local screen removed. + OCA.SpreedMe.webrtc.on('localScreenRemoved', function (video) { + document.getElementById('localScreenContainer').removeChild(video); + OCA.SpreedMe.webrtc.emit('localScreenStopped'); + }); + // Peer changed nick OCA.SpreedMe.webrtc.on('nick', function(data) { var el = document.getElementById('container_' + OCA.SpreedMe.webrtc.getDomId({ diff --git a/templates/index-public.php b/templates/index-public.php index 04503b66f..32de70184 100644 --- a/templates/index-public.php +++ b/templates/index-public.php @@ -62,10 +62,13 @@ script( + +
+
diff --git a/templates/index.php b/templates/index.php index 7f363a3b8..f481dc08b 100644 --- a/templates/index.php +++ b/templates/index.php @@ -48,10 +48,13 @@ script( +
+
+
From b774419cdcf8a5f080e94c1b3ad3518e231791f9 Mon Sep 17 00:00:00 2001 From: Joachim Bauch Date: Mon, 23 Jan 2017 10:26:09 +0100 Subject: [PATCH 02/14] Add marker class for the screensharing extension to detect the NC app. Signed-off-by: Joachim Bauch --- templates/index-public.php | 2 +- templates/index.php | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/templates/index-public.php b/templates/index-public.php index 32de70184..4dbe2143a 100644 --- a/templates/index-public.php +++ b/templates/index-public.php @@ -24,7 +24,7 @@ script( ); ?> -
+
diff --git a/templates/index.php b/templates/index.php index f481dc08b..80922ab9a 100644 --- a/templates/index.php +++ b/templates/index.php @@ -24,7 +24,7 @@ script( ); ?> -
+
From cb41ca3b4e652fc48a0cf6e0286130ac5541dab4 Mon Sep 17 00:00:00 2001 From: Joachim Bauch Date: Fri, 27 Jan 2017 15:58:45 +0100 Subject: [PATCH 03/14] Call to Firefox addon when starting screensharing. Firefox needs the domain to be whitelisted, so this is done by the addon. Signed-off-by: Joachim Bauch --- js/simplewebrtc.js | 63 ++++++++++++++++++++++++++++++---------------- 1 file changed, 41 insertions(+), 22 deletions(-) diff --git a/js/simplewebrtc.js b/js/simplewebrtc.js index 36d4cd2e4..4389df655 100644 --- a/js/simplewebrtc.js +++ b/js/simplewebrtc.js @@ -3971,28 +3971,20 @@ var ffver = parseInt(window.navigator.userAgent.match(/Firefox\/(.*)/)[1], 10); if (ffver >= 33) { constraints = (hasConstraints && constraints) || { - video: { - mozMediaSource: 'window', - mediaSource: 'window' - } - }; - getUserMedia(constraints, function (err, stream) { - callback(err, stream); - // workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=1045810 - if (!err) { - var lastTime = stream.currentTime; - var polly = window.setInterval(function () { - if (!stream) window.clearInterval(polly); - if (stream.currentTime == lastTime) { - window.clearInterval(polly); - if (stream.onended) { - stream.onended(); - } - } - lastTime = stream.currentTime; - }, 500); + video: { + mozMediaSource: 'window', + mediaSource: 'window' } - }); + }; + // Notify extension to add domain to whitelist and defer actual + // getUserMedia call until extension finished adding the domain. + var pending = window.setTimeout(function () { + error = new Error('NavigatorUserMediaError'); + error.name = 'EXTENSION_UNAVAILABLE'; + return callback(error); + }, 1000); + cache[pending] = [callback, constraints]; + window.postMessage({ type: 'webrtcStartScreensharing', id: pending }, '*'); } else { error = new Error('NavigatorUserMediaError'); error.name = 'EXTENSION_UNAVAILABLE'; // does not make much sense but... @@ -4001,7 +3993,7 @@ }; typeof window !== 'undefined' && window.addEventListener('message', function (event) { - if (event.origin != window.location.origin) { + if (event.origin != window.location.origin && !event.isTrusted) { return; } if (event.data.type == 'gotScreen' && cache[event.data.id]) { @@ -4032,6 +4024,33 @@ } } else if (event.data.type == 'getScreenPending') { window.clearTimeout(event.data.id); + } else if (event.data.type == 'webrtcScreensharingWhitelisted' && cache[event.data.id]) { + var data = cache[event.data.id]; + window.clearTimeout(event.data.id); + var constraints = data[1]; + var callback = data[0]; + delete cache[event.data.id]; + + getUserMedia(constraints, function (err, stream) { + // Notify extension to remove domain from whitelist. + window.postMessage({ type: 'webrtcStopScreensharing' }, '*'); + callback(err, stream); + if (err) { + return; + } + // workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=1045810 + var lastTime = stream.currentTime; + var polly = window.setInterval(function () { + if (!stream) window.clearInterval(polly); + if (stream.currentTime == lastTime) { + window.clearInterval(polly); + if (stream.onended) { + stream.onended(); + } + } + lastTime = stream.currentTime; + }, 500); + }); } }); From 2525921204566a3df41342770f14c48a38d05260 Mon Sep 17 00:00:00 2001 From: Joachim Bauch Date: Fri, 27 Jan 2017 16:20:32 +0100 Subject: [PATCH 04/14] Show notifications to the user in case of an error. Signed-off-by: Joachim Bauch --- js/app.js | 44 ++++++++++++++++++++++++-------------------- 1 file changed, 24 insertions(+), 20 deletions(-) diff --git a/js/app.js b/js/app.js index b832cf650..3196e8d77 100644 --- a/js/app.js +++ b/js/app.js @@ -211,7 +211,7 @@ }); var screensharingStopped = function() { - console.log("Screensharing now stopped"); + // No need to notify the user. }; OCA.SpreedMe.webrtc.on('localScreenStopped', function() { @@ -221,7 +221,7 @@ $('#toogleScreensharing').click(function() { var webrtc = OCA.SpreedMe.webrtc; if (!webrtc.capabilities.supportScreenSharing) { - console.log("Screensharing is not supported"); + OC.Notification.showTemporary(t('spreed', 'Screensharing is not supported by your browser.')); return; } @@ -230,24 +230,28 @@ screensharingStopped(); } else { webrtc.shareScreen(function(err) { - if (err) { - switch (err.name) { - case "HTTPS_REQUIRED": - console.log("Need HTTPS for screensharing."); - break; - case "PERMISSION_DENIED": - case "CEF_GETSCREENMEDIA_CANCELED": // Experimental, may go away in the future. - console.log("User cancelled screensharing request."); - break; - case "EXTENSION_UNAVAILABLE": - console.log("Need to install extension to make screensharing work."); - break; - default: - console.log("Could not start screensharing", err.name, err); - break; - } - } else { - console.log("Screensharing now started"); + if (!err) { + OC.Notification.showTemporary(t('spreed', 'Screensharing is about to start…')); + return; + } + + switch (err.name) { + case "HTTPS_REQUIRED": + OC.Notification.showTemporary(t('spreed', 'Screensharing requires the page to be loaded through HTTPS.')); + break; + case "PERMISSION_DENIED": + case "NotAllowedError": + case "CEF_GETSCREENMEDIA_CANCELED": // Experimental, may go away in the future. + OC.Notification.showTemporary(t('spreed', 'The screensharing request has been cancelled.')); + break; + case "EXTENSION_UNAVAILABLE": + // TODO(fancycode): Show popup with links to Chrome/Firefox extensions. + OC.Notification.showTemporary(t('spreed', 'An extension is required to start screensharing.')); + break; + default: + OC.Notification.showTemporary(t('spreed', 'An error occurred while starting screensharing.')); + console.log("Could not start screensharing", err); + break; } }); } From ff8e9445cef64fd735a39999aa2728b21327f860 Mon Sep 17 00:00:00 2001 From: Joachim Bauch Date: Mon, 30 Jan 2017 09:53:05 +0100 Subject: [PATCH 05/14] Keep log about stopped screensharing. Signed-off-by: Joachim Bauch --- js/app.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/app.js b/js/app.js index 3196e8d77..3aa54a76b 100644 --- a/js/app.js +++ b/js/app.js @@ -211,7 +211,7 @@ }); var screensharingStopped = function() { - // No need to notify the user. + console.log("Screensharing now stopped"); }; OCA.SpreedMe.webrtc.on('localScreenStopped', function() { From 19c90aebfe999533b963261d7fda3a572d82dd55 Mon Sep 17 00:00:00 2001 From: Ivan Sein Date: Thu, 16 Feb 2017 13:24:22 +0100 Subject: [PATCH 06/14] Move fullscreen button to the top-right corner. Signed-off-by: Ivan Sein --- css/style.css | 11 +++++++++++ templates/index-public.php | 3 ++- templates/index.php | 3 ++- 3 files changed, 15 insertions(+), 2 deletions(-) diff --git a/css/style.css b/css/style.css index 838ca7a4a..91486a5e8 100644 --- a/css/style.css +++ b/css/style.css @@ -323,6 +323,17 @@ video { padding: 12px 35%; } +#video-fullscreen { + position: absolute; + right: 0px; + z-index: 90; +} + +#video-fullscreen.public { + top: 45px; +} + +#video-fullscreen, .nameIndicator button { background-color: transparent; border: none; diff --git a/templates/index-public.php b/templates/index-public.php index 4dbe2143a..abb450d34 100644 --- a/templates/index-public.php +++ b/templates/index-public.php @@ -49,6 +49,8 @@ script(
+ +
@@ -61,7 +63,6 @@ script(
-
diff --git a/templates/index.php b/templates/index.php index 80922ab9a..2f8a259e9 100644 --- a/templates/index.php +++ b/templates/index.php @@ -35,6 +35,8 @@ script(
+ +
@@ -47,7 +49,6 @@ script(
-
From 735a2d3cbc5f13541e7263f110e576dab26a124e Mon Sep 17 00:00:00 2001 From: Ivan Sein Date: Thu, 16 Feb 2017 15:24:18 +0100 Subject: [PATCH 07/14] Add proper icons to screensharing toggle button. Signed-off-by: Ivan Sein --- css/style.css | 4 +++- js/app.js | 6 ++++++ templates/index-public.php | 2 +- templates/index.php | 2 +- 4 files changed, 11 insertions(+), 3 deletions(-) diff --git a/css/style.css b/css/style.css index 91486a5e8..bef33943d 100644 --- a/css/style.css +++ b/css/style.css @@ -341,8 +341,10 @@ video { height: 44px; background-size: 25px; } + .nameIndicator button.audio-disabled, -.nameIndicator button.video-disabled { +.nameIndicator button.video-disabled, +.nameIndicator button.screensharing-disabled { opacity: .7; } diff --git a/js/app.js b/js/app.js index 3aa54a76b..9ca204c5b 100644 --- a/js/app.js +++ b/js/app.js @@ -212,6 +212,9 @@ var screensharingStopped = function() { console.log("Screensharing now stopped"); + $('#toogleScreensharing').data('title', 'Enable screensharing') + .addClass('screensharing-disabled icon-screen-off-white') + .removeClass('icon-screen-white'); }; OCA.SpreedMe.webrtc.on('localScreenStopped', function() { @@ -232,6 +235,9 @@ webrtc.shareScreen(function(err) { if (!err) { OC.Notification.showTemporary(t('spreed', 'Screensharing is about to start…')); + $('#toogleScreensharing').data('title', 'Stop screensharing') + .removeClass('screensharing-disabled icon-screen-off-white') + .addClass('icon-screen-white'); return; } diff --git a/templates/index-public.php b/templates/index-public.php index abb450d34..1b559a6bf 100644 --- a/templates/index-public.php +++ b/templates/index-public.php @@ -63,7 +63,7 @@ script(
- +
diff --git a/templates/index.php b/templates/index.php index 2f8a259e9..2ae2c69b0 100644 --- a/templates/index.php +++ b/templates/index.php @@ -49,7 +49,7 @@ script(
- +
From 9812e03752cde93b7419b6f3258a6c69913ab21f Mon Sep 17 00:00:00 2001 From: Ivan Sein Date: Wed, 22 Feb 2017 12:03:59 +0100 Subject: [PATCH 08/14] Fix typo. Signed-off-by: Ivan Sein --- js/app.js | 6 +++--- templates/index-public.php | 2 +- templates/index.php | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/js/app.js b/js/app.js index 9ca204c5b..761c0a4f4 100644 --- a/js/app.js +++ b/js/app.js @@ -212,7 +212,7 @@ var screensharingStopped = function() { console.log("Screensharing now stopped"); - $('#toogleScreensharing').data('title', 'Enable screensharing') + $('#toggleScreensharing').data('title', 'Enable screensharing') .addClass('screensharing-disabled icon-screen-off-white') .removeClass('icon-screen-white'); }; @@ -221,7 +221,7 @@ screensharingStopped(); }); - $('#toogleScreensharing').click(function() { + $('#toggleScreensharing').click(function() { var webrtc = OCA.SpreedMe.webrtc; if (!webrtc.capabilities.supportScreenSharing) { OC.Notification.showTemporary(t('spreed', 'Screensharing is not supported by your browser.')); @@ -235,7 +235,7 @@ webrtc.shareScreen(function(err) { if (!err) { OC.Notification.showTemporary(t('spreed', 'Screensharing is about to start…')); - $('#toogleScreensharing').data('title', 'Stop screensharing') + $('#toggleScreensharing').data('title', 'Stop screensharing') .removeClass('screensharing-disabled icon-screen-off-white') .addClass('icon-screen-white'); return; diff --git a/templates/index-public.php b/templates/index-public.php index 1b559a6bf..9994b7609 100644 --- a/templates/index-public.php +++ b/templates/index-public.php @@ -63,7 +63,7 @@ script(
- +
diff --git a/templates/index.php b/templates/index.php index 2ae2c69b0..bd3fba421 100644 --- a/templates/index.php +++ b/templates/index.php @@ -49,7 +49,7 @@ script(
- +
From 31202e4474e1e0e0885cd59bf25f511a874bf2bb Mon Sep 17 00:00:00 2001 From: Ivan Sein Date: Wed, 22 Feb 2017 12:08:23 +0100 Subject: [PATCH 09/14] Show full-screen and screensharing buttons only during calls. Signed-off-by: Ivan Sein --- css/style.css | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/css/style.css b/css/style.css index bef33943d..cb16794f9 100644 --- a/css/style.css +++ b/css/style.css @@ -248,6 +248,14 @@ video { display: block !important; } +.participants-1 #video-fullscreen { + display: none; +} + +.participants-1 #toggleScreensharing { + display: none; +} + /* big speaker video */ .participants-1 .videoContainer, .participants-2 .videoContainer, From cb930c8d3f99de608984c34d23bf88613d7fcfa9 Mon Sep 17 00:00:00 2001 From: Ivan Sein Date: Fri, 24 Feb 2017 18:55:05 +0100 Subject: [PATCH 10/14] Change video layouts when screensharing. Signed-off-by: Ivan Sein --- css/style.css | 19 +++++++++++++++++++ js/webrtc.js | 26 +++++++++++++++++++++++++- templates/index-public.php | 3 +-- templates/index.php | 3 +-- 4 files changed, 46 insertions(+), 5 deletions(-) diff --git a/css/style.css b/css/style.css index cb16794f9..13151ce38 100644 --- a/css/style.css +++ b/css/style.css @@ -139,6 +139,9 @@ background-position-y: 8px !important; } +/** + * Video styles + */ #videos { position: absolute; @@ -309,6 +312,22 @@ video { background-color: #000; } +#app-content.screensharing { + background-color: #ddd; +} + +#app-content.screensharing .videoContainer video { + max-height: 200px; + background-color: transparent; + box-shadow: 0 0 0 0; +} + +#app-content.screensharing #localScreenContainer { + max-height: calc(100% - 200px); + overflow: scroll; + background-color: transparent; +} + .nameIndicator { position: absolute; bottom: 0; diff --git a/js/webrtc.js b/js/webrtc.js index 5f4c63044..2babf46ce 100644 --- a/js/webrtc.js +++ b/js/webrtc.js @@ -35,7 +35,7 @@ var spreedMappingTable = []; var appContentElement = $('#app-content'), participantsClass = 'participants-' + currentUsersNo; - if (!appContentElement.hasClass(participantsClass)) { + if (!appContentElement.hasClass(participantsClass) && !appContentElement.hasClass('screensharing')) { appContentElement.attr('class', '').addClass(participantsClass); } @@ -128,6 +128,7 @@ var spreedMappingTable = []; var spreedListofSpeakers = {}; var latestSpeakerId = null; + var screenSharingActive = false; OCA.SpreedMe.speakers = { showStatus: function() { var data = []; @@ -153,6 +154,10 @@ var spreedMappingTable = []; return '#container_' + sanitizedId + '_type_incoming'; }, switchVideoToId: function(id) { + if (screenSharingActive) { + return; + } + var newContainer = $(OCA.SpreedMe.speakers.getContainerId(id)); if(newContainer.find('video').length === 0) { console.warn('promote: no video found for ID', id); @@ -177,6 +182,14 @@ var spreedMappingTable = []; latestSpeakerId = id; }, + unpromoteLatestSpeaker: function() { + if (latestSpeakerId) { + var oldContainer = $(OCA.SpreedMe.speakers.getContainerId(latestSpeakerId)); + oldContainer.removeClass('promoted'); + latestSpeakerId = null; + $('.videoContainer-dummy').remove(); + } + }, updateVideoContainerDummy: function(id) { var newContainer = $(OCA.SpreedMe.speakers.getContainerId(id)); @@ -511,6 +524,12 @@ var spreedMappingTable = []; video.style.width = video.videoWidth + 'px'; video.style.height = video.videoHeight + 'px'; }; + + OCA.SpreedMe.speakers.unpromoteLatestSpeaker(); + + screenSharingActive = true; + $('#app-content').attr('class', '').addClass('screensharing'); + video.dataset.screensharing = true; document.getElementById('localScreenContainer').appendChild(video); }); @@ -518,6 +537,11 @@ var spreedMappingTable = []; OCA.SpreedMe.webrtc.on('localScreenRemoved', function (video) { document.getElementById('localScreenContainer').removeChild(video); OCA.SpreedMe.webrtc.emit('localScreenStopped'); + + if (!document.getElementById('localScreenContainer').hasChildNodes()) { + screenSharingActive = false; + $('#app-content').removeClass('screensharing'); + } }); // Peer changed nick diff --git a/templates/index-public.php b/templates/index-public.php index 9994b7609..c323b06c7 100644 --- a/templates/index-public.php +++ b/templates/index-public.php @@ -68,8 +68,7 @@ script( -
-
+
diff --git a/templates/index.php b/templates/index.php index bd3fba421..a3a10e891 100644 --- a/templates/index.php +++ b/templates/index.php @@ -54,8 +54,7 @@ script(
-
-
+
From ad27ee16af2cca14dd0ed1e32c6372815e874066 Mon Sep 17 00:00:00 2001 From: Ivan Sein Date: Wed, 1 Mar 2017 16:04:06 +0100 Subject: [PATCH 11/14] Send shared screen to new call participants. Signed-off-by: Ivan Sein --- js/webrtc.js | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/js/webrtc.js b/js/webrtc.js index 2babf46ce..98fe68934 100644 --- a/js/webrtc.js +++ b/js/webrtc.js @@ -39,6 +39,30 @@ var spreedMappingTable = []; appContentElement.attr('class', '').addClass(participantsClass); } + //Send shared screen to new participants + var webrtc = OCA.SpreedMe.webrtc; + if (webrtc.getLocalScreen()) { + var newUsers = currentUsersInRoom.diff(previousUsersInRoom); + var currentUser = webrtc.connection.getSessionid(); + newUsers.forEach(function(user) { + if (user !== currentUser) { + var peer = webrtc.webrtc.createPeer({ + id: user, + type: 'screen', + sharemyscreen: true, + enableDataChannels: false, + receiveMedia: { + offerToReceiveAudio: 0, + offerToReceiveVideo: 0 + }, + broadcaster: currentUser, + }); + webrtc.emit('createdPeer', peer); + peer.start(); + } + }); + } + var disconnectedUsers = previousUsersInRoom.diff(currentUsersInRoom); disconnectedUsers.forEach(function(user) { console.log('XXX Remove peer', user); From 4039951a6db843a916cb9753c85164a57a136773 Mon Sep 17 00:00:00 2001 From: Ivan Sein Date: Sat, 4 Mar 2017 11:24:42 +0100 Subject: [PATCH 12/14] Add tooltips to call buttons. Signed-off-by: Ivan Sein --- css/style.css | 2 +- js/app.js | 21 +++++++++++++++------ templates/index-public.php | 8 ++++---- templates/index.php | 8 ++++---- 4 files changed, 24 insertions(+), 15 deletions(-) diff --git a/css/style.css b/css/style.css index 13151ce38..0b1c56aee 100644 --- a/css/style.css +++ b/css/style.css @@ -338,7 +338,7 @@ video { text-align: center; font-size: 20px; white-space: nowrap; - overflow: hidden; + overflow: visible; text-overflow: ellipsis; } .videoView .nameIndicator { diff --git a/js/app.js b/js/app.js index 761c0a4f4..87eaab8ab 100644 --- a/js/app.js +++ b/js/app.js @@ -155,6 +155,11 @@ }); }); + // Initialize button tooltips + $('[data-toggle="tooltip"]').tooltip({trigger: 'hover'}).click(function() { + $(this).tooltip('hide'); + }); + $('#hideVideo').click(function() { if(!OCA.SpreedMe.app.videoWasEnabledAtLeastOnce) { // don't allow clicking the video toggle @@ -173,6 +178,7 @@ localStorage.setItem("videoDisabled", true); } }); + $('#mute').click(function() { if (OCA.SpreedMe.webrtc.webrtc.isAudioEnabled()) { OCA.SpreedMe.app.disableAudio(); @@ -197,6 +203,7 @@ } else if (fullscreenElem.msRequestFullscreen) { fullscreenElem.msRequestFullscreen(); } + $(this).attr('data-original-title', 'Exit fullscreen'); } else { if (document.exitFullscreen) { document.exitFullscreen(); @@ -207,12 +214,13 @@ } else if (document.msExitFullscreen) { document.msExitFullscreen(); } + $(this).attr('data-original-title', 'Fullscreen'); } }); var screensharingStopped = function() { console.log("Screensharing now stopped"); - $('#toggleScreensharing').data('title', 'Enable screensharing') + $('#toggleScreensharing').attr('data-original-title', 'Enable screensharing') .addClass('screensharing-disabled icon-screen-off-white') .removeClass('icon-screen-white'); }; @@ -235,7 +243,7 @@ webrtc.shareScreen(function(err) { if (!err) { OC.Notification.showTemporary(t('spreed', 'Screensharing is about to start…')); - $('#toggleScreensharing').data('title', 'Stop screensharing') + $('#toggleScreensharing').attr('data-original-title', 'Stop screensharing') .removeClass('screensharing-disabled icon-screen-off-white') .addClass('icon-screen-white'); return; @@ -470,7 +478,7 @@ }, enableAudio: function() { OCA.SpreedMe.webrtc.unmute(); - $('#mute').data('title', 'Mute audio') + $('#mute').attr('data-original-title', 'Mute audio') .removeClass('audio-disabled icon-audio-off-white') .addClass('icon-audio-white'); @@ -478,7 +486,7 @@ }, disableAudio: function() { OCA.SpreedMe.webrtc.mute(); - $('#mute').data('title', 'Enable audio') + $('#mute').attr('data-original-title', 'Enable audio') .addClass('audio-disabled icon-audio-off-white') .removeClass('icon-audio-white'); @@ -490,9 +498,10 @@ var localVideo = $hideVideoButton.closest('.videoView').find('#localVideo'); OCA.SpreedMe.webrtc.resumeVideo(); - $hideVideoButton.data('title', 'Disable video') + $hideVideoButton.attr('data-original-title', 'Disable video') .removeClass('video-disabled icon-video-off-white') .addClass('icon-video-white'); + avatarContainer.hide(); localVideo.show(); @@ -503,7 +512,7 @@ var avatarContainer = $hideVideoButton.closest('.videoView').find('.avatar-container'); var localVideo = $hideVideoButton.closest('.videoView').find('#localVideo'); - $hideVideoButton.data('title', 'Enable video') + $hideVideoButton.attr('data-original-title', 'Enable video') .addClass('video-disabled icon-video-off-white') .removeClass('icon-video-white'); diff --git a/templates/index-public.php b/templates/index-public.php index c323b06c7..5abc23564 100644 --- a/templates/index-public.php +++ b/templates/index-public.php @@ -49,7 +49,7 @@ script(
- +
@@ -61,9 +61,9 @@ script(
- - - + + +
diff --git a/templates/index.php b/templates/index.php index a3a10e891..72e06c17a 100644 --- a/templates/index.php +++ b/templates/index.php @@ -35,7 +35,7 @@ script(
- +
@@ -47,9 +47,9 @@ script(
- - - + + +
From 639f1ed46fe4c0264784baa372b4690602ee263b Mon Sep 17 00:00:00 2001 From: Jan-Christoph Borchardt Date: Fri, 10 Mar 2017 23:49:21 +0100 Subject: [PATCH 13/14] make empty background on bottom of screensharing black too Signed-off-by: Jan-Christoph Borchardt --- css/style.css | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/css/style.css b/css/style.css index 0b1c56aee..4b6bcc5d4 100644 --- a/css/style.css +++ b/css/style.css @@ -308,18 +308,15 @@ video { #app-content.participants-7, #app-content.participants-8, #app-content.participants-9, -#app-content.participants-10 { - background-color: #000; -} - +#app-content.participants-10, #app-content.screensharing { - background-color: #ddd; + background-color: #000; } #app-content.screensharing .videoContainer video { max-height: 200px; background-color: transparent; - box-shadow: 0 0 0 0; + box-shadow: 0; } #app-content.screensharing #localScreenContainer { From ae9d60dbc1abbec75db3b4f024360adae4abcc20 Mon Sep 17 00:00:00 2001 From: Ivan Sein Date: Tue, 14 Mar 2017 19:49:57 +0100 Subject: [PATCH 14/14] Fix position and resize screensharing videos. Signed-off-by: Ivan Sein --- css/style.css | 2 +- js/webrtc.js | 18 ++++++++++++++---- 2 files changed, 15 insertions(+), 5 deletions(-) diff --git a/css/style.css b/css/style.css index 4b6bcc5d4..670801e0e 100644 --- a/css/style.css +++ b/css/style.css @@ -320,7 +320,7 @@ video { } #app-content.screensharing #localScreenContainer { - max-height: calc(100% - 200px); + height: calc(100% - 200px); overflow: scroll; background-color: transparent; } diff --git a/js/webrtc.js b/js/webrtc.js index 98fe68934..6f4a6b156 100644 --- a/js/webrtc.js +++ b/js/webrtc.js @@ -153,6 +153,16 @@ var spreedMappingTable = []; var spreedListofSpeakers = {}; var latestSpeakerId = null; var screenSharingActive = false; + + window.addEventListener('resize', function() { + if (screenSharingActive) { + $('#localScreenContainer').children('video').each(function() { + $(this).width('100%'); + $(this).height($('#localScreenContainer').height()); + }); + } + }); + OCA.SpreedMe.speakers = { showStatus: function() { var data = []; @@ -544,10 +554,10 @@ var spreedMappingTable = []; // Local screen added. OCA.SpreedMe.webrtc.on('localScreenAdded', function (video) { - video.onclick = function () { - video.style.width = video.videoWidth + 'px'; - video.style.height = video.videoHeight + 'px'; - }; + var initialHeight = $('#app-content').height() - 200; + + video.style.width = '100%'; + video.style.height = initialHeight + 'px'; OCA.SpreedMe.speakers.unpromoteLatestSpeaker();