From ee94eca73392be89f2d059670b7f1e6a73b1d035 Mon Sep 17 00:00:00 2001 From: hristoterezov Date: Tue, 13 Jan 2015 15:11:05 +0200 Subject: [PATCH] Creates desktop sharing module. --- app.js | 10 +- index.html | 15 +- libs/modules/RTC.bundle.js | 32 +- libs/modules/UI.bundle.js | 84 ++- libs/modules/desktopsharing.bundle.js | 630 ++++++++++++++++++ libs/modules/simulcast.bundle.js | 2 +- libs/strophe/strophe.jingle.session.js | 3 - modules/RTC/RTC.js | 33 +- modules/UI/UI.js | 52 +- modules/UI/toolbars/Toolbar.js | 4 +- modules/UI/toolbars/ToolbarToggler.js | 14 +- modules/UI/videolayout/VideoLayout.js | 14 +- .../desktopsharing/desktopsharing.js | 187 +++--- modules/simulcast/SimulcastSender.js | 2 +- service/RTC/StreamEventTypes.js | 2 + .../DesktopSharingEventTypes.js | 10 + 16 files changed, 906 insertions(+), 188 deletions(-) create mode 100644 libs/modules/desktopsharing.bundle.js rename desktopsharing.js => modules/desktopsharing/desktopsharing.js (69%) create mode 100644 service/desktopsharing/DesktopSharingEventTypes.js diff --git a/app.js b/app.js index 008f04ae2..93c88eb45 100644 --- a/app.js +++ b/app.js @@ -415,7 +415,7 @@ $(document).bind('setLocalDescription.jingle', function (event, sid) { if (newssrcs.length > 0) { for (var i = 1; i <= newssrcs.length; i ++) { // Change video type to screen - if (newssrcs[i-1].type === 'video' && isUsingScreenStream) { + if (newssrcs[i-1].type === 'video' && desktopsharing.isUsingScreenStream()) { newssrcs[i-1].type = 'screen'; } connection.emuc.addMediaToPresence(i, @@ -585,7 +585,7 @@ function isVideoSrcDesktop(jid) { if (connection.emuc.myroomjid && Strophe.getResourceFromJid(connection.emuc.myroomjid) === jid) { // local video - isDesktop = isUsingScreenStream; + isDesktop = desktopsharing.isUsingScreenStream(); } else { // Do we have associations... var videoSsrc = jid2Ssrc[jid]; @@ -709,11 +709,7 @@ $(document).ready(function () { Moderator.init(); // Set default desktop sharing method - setDesktopSharing(config.desktopSharing); - // Initialize Chrome extension inline installs - if (config.chromeExtensionId) { - initInlineInstalls(); - } + desktopsharing.init(); }); $(window).bind('beforeunload', function () { diff --git a/index.html b/index.html index 61e80eabd..a50ef1b2c 100644 --- a/index.html +++ b/index.html @@ -17,7 +17,7 @@ - + @@ -27,17 +27,18 @@ - + - + + - + - + - - + + diff --git a/libs/modules/RTC.bundle.js b/libs/modules/RTC.bundle.js index e33b3a027..cf4ab3e03 100644 --- a/libs/modules/RTC.bundle.js +++ b/libs/modules/RTC.bundle.js @@ -410,7 +410,7 @@ var RTC = { eventEmitter.removeListener(eventType, listener); }, - createLocalStream: function (stream, type) { + createLocalStream: function (stream, type, change) { var localStream = new LocalStream(stream, type, eventEmitter); //in firefox we have only one stream object @@ -425,8 +425,11 @@ var RTC = { { this.localVideo = localStream; } - eventEmitter.emit(StreamEventTypes.EVENT_TYPE_LOCAL_CREATED, - localStream); + var eventType = StreamEventTypes.EVENT_TYPE_LOCAL_CREATED; + if(change) + eventType = StreamEventTypes.EVENT_TYPE_LOCAL_CHANGED; + + eventEmitter.emit(eventType, localStream); return localStream; }, removeLocalStream: function (stream) { @@ -482,6 +485,10 @@ var RTC = { this.dispose(); }, start: function () { + desktopsharing.addListener( + function (stream, isUsingScreenStream, callback) { + RTC.changeLocalVideo(stream, isUsingScreenStream, callback); + }, DesktopSharingEventTypes.NEW_STREAM_CREATED); this.rtcUtils = new RTCUtils(this); this.rtcUtils.obtainAudioAndVideoPermissions(); }, @@ -512,9 +519,26 @@ var RTC = { this.localStreams = []; //in firefox we have only one stream object - if(this.localAudio.getOriginalStream() != new_stream) + if (this.localAudio.getOriginalStream() != new_stream) this.localStreams.push(this.localAudio); this.localStreams.push(this.localVideo); + }, + changeLocalVideo: function (stream, isUsingScreenStream, callback) { + var oldStream = this.localVideo.getOriginalStream(); + var type = (isUsingScreenStream? "desktop" : "video"); + RTC.localVideo = this.createLocalStream(stream, type, true); + // Stop the stream to trigger onended event for old stream + oldStream.stop(); + if (activecall) { + // FIXME: will block switchInProgress on true value in case of exception + activecall.switchStreams(stream, oldStream, callback); + } else { + // We are done immediately + console.error("No conference handler"); + UI.messageHandler.showError('Error', + 'Unable to switch video stream.'); + callback(); + } } }; diff --git a/libs/modules/UI.bundle.js b/libs/modules/UI.bundle.js index c9524654a..bc1439f85 100644 --- a/libs/modules/UI.bundle.js +++ b/libs/modules/UI.bundle.js @@ -45,26 +45,28 @@ function setupToolbars() { BottomToolbar.init(); } +function streamHandler(stream) { + switch (stream.type) + { + case "audio": + VideoLayout.changeLocalAudio(stream); + break; + case "video": + VideoLayout.changeLocalVideo(stream); + break; + case "stream": + VideoLayout.changeLocalStream(stream); + break; + case "desktop": + VideoLayout.changeLocalVideo(stream); + break; + } +} function registerListeners() { - RTC.addStreamListener(function (stream) { - switch (stream.type) - { - case "audio": - VideoLayout.changeLocalAudio(stream.getOriginalStream()); - break; - case "video": - VideoLayout.changeLocalVideo(stream.getOriginalStream(), true); - break; - case "stream": - VideoLayout.changeLocalStream(stream.getOriginalStream()); - break; - case "desktop": - VideoLayout.changeLocalVideo(stream, !isUsingScreenStream); - break; - } - }, StreamEventTypes.EVENT_TYPE_LOCAL_CREATED); + RTC.addStreamListener(streamHandler, StreamEventTypes.EVENT_TYPE_LOCAL_CREATED); + RTC.addStreamListener(streamHandler, StreamEventTypes.EVENT_TYPE_LOCAL_CHANGED); RTC.addStreamListener(function (stream) { VideoLayout.onRemoteStreamAdded(stream); }, StreamEventTypes.EVENT_TYPE_REMOTE_CREATED); @@ -97,6 +99,13 @@ function registerListeners() { AudioLevels.updateAudioLevel(resourceJid, audioLevel, UI.getLargeVideoState().userResourceJid); }); + desktopsharing.addListener(function () { + ToolbarToggler.showDesktopSharingButton(); + }, DesktopSharingEventTypes.INIT); + desktopsharing.addListener( + Toolbar.changeDesktopSharingButtonState, + DesktopSharingEventTypes.SWITCHING_DONE); + } @@ -446,10 +455,6 @@ UI.setRecordingButtonState = function (state) { Toolbar.setRecordingButtonState(state); }; -UI.changeDesktopSharingButtonState = function (isUsingScreenStream) { - Toolbar.changeDesktopSharingButtonState(isUsingScreenStream); -}; - UI.inputDisplayNameHandler = function (value) { VideoLayout.inputDisplayNameHandler(value); }; @@ -506,10 +511,6 @@ UI.showLocalAudioIndicator = function (mute) { VideoLayout.showLocalAudioIndicator(mute); }; -UI.changeLocalVideo = function (stream, flipx) { - VideoLayout.changeLocalVideo(stream, flipx); -}; - UI.generateRoomName = function() { var roomnode = null; var path = window.location.pathname; @@ -556,7 +557,6 @@ UI.dockToolbar = function (isDock) { return ToolbarToggler.dockToolbar(isDock); }; - function dump(elem, filename) { elem = elem.parentNode; elem.download = filename || 'meetlog.json'; @@ -2830,11 +2830,19 @@ var BottomToolbar = (function (my) { module.exports = BottomToolbar; },{"../side_pannels/SidePanelToggler":7}],16:[function(require,module,exports){ -/* global $, interfaceConfig, Moderator, showDesktopSharingButton */ +/* global $, interfaceConfig, Moderator, DesktopStreaming.showDesktopSharingButton */ var toolbarTimeoutObject, toolbarTimeout = interfaceConfig.INITIAL_TOOLBAR_TIMEOUT; +function showDesktopSharingButton() { + if (desktopsharing.isDesktopSharingEnabled()) { + $('#desktopsharing').css({display: "inline"}); + } else { + $('#desktopsharing').css({display: "none"}); + } +} + /** * Hides the toolbar. */ @@ -2929,7 +2937,9 @@ var ToolbarToggler = { toolbarTimeoutObject = setTimeout(hideToolbar, toolbarTimeout); } } - } + }, + + showDesktopSharingButton: showDesktopSharingButton }; @@ -2977,7 +2987,7 @@ var buttonHandlers = return Etherpad.toggleEtherpad(0); }, "toolbar_button_desktopsharing": function () { - return toggleScreenSharing(); + return desktopsharing.toggleScreenSharing(); }, "toolbar_button_fullScreen": function() { @@ -3199,7 +3209,7 @@ var Toolbar = (function (my) { inviteLink.select(); document.getElementById('jqi_state0_buttonInvite').disabled = false; } - } + }; /** * Disables and enables some of the buttons. @@ -4591,11 +4601,11 @@ var VideoLayout = (function (my) { }; my.changeLocalStream = function (stream) { - VideoLayout.changeLocalVideo(stream, true); + VideoLayout.changeLocalVideo(stream); }; my.changeLocalAudio = function(stream) { - RTC.attachMediaStream($('#localAudio'), stream); + RTC.attachMediaStream($('#localAudio'), stream.getOriginalStream()); document.getElementById('localAudio').autoplay = true; document.getElementById('localAudio').volume = 0; if (preMuted) { @@ -4604,9 +4614,13 @@ var VideoLayout = (function (my) { } }; - my.changeLocalVideo = function(stream, flipX) { + my.changeLocalVideo = function(stream) { + var flipX = true; + if(stream.type == "desktop") + flipX = false; var localVideo = document.createElement('video'); - localVideo.id = 'localVideo_' + RTC.getStreamID(stream); + localVideo.id = 'localVideo_' + + RTC.getStreamID(stream.getOriginalStream()); localVideo.autoplay = true; localVideo.volume = 0; // is it required if audio is separated ? localVideo.oncontextmenu = function () { return false; }; @@ -4654,7 +4668,7 @@ var VideoLayout = (function (my) { } ); // Add stream ended handler - stream.onended = function () { + stream.getOriginalStream().onended = function () { localVideoContainer.removeChild(localVideo); VideoLayout.updateRemovedVideo(RTC.getVideoSrc(localVideo)); }; diff --git a/libs/modules/desktopsharing.bundle.js b/libs/modules/desktopsharing.bundle.js new file mode 100644 index 000000000..3ce0d817c --- /dev/null +++ b/libs/modules/desktopsharing.bundle.js @@ -0,0 +1,630 @@ +!function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var f;"undefined"!=typeof window?f=window:"undefined"!=typeof global?f=global:"undefined"!=typeof self&&(f=self),f.desktopsharing=e()}}(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;onull. + * @type {null|boolean} + */ +var _desktopSharingEnabled = null; + +var EventEmitter = require("events"); + +var eventEmitter = new EventEmitter(); + +/** + * Method obtains desktop stream from WebRTC 'screen' source. + * Flag 'chrome://flags/#enable-usermedia-screen-capture' must be enabled. + */ +function obtainWebRTCScreen(streamCallback, failCallback) { + RTC.getUserMediaWithConstraints( + ['screen'], + streamCallback, + failCallback + ); +} + +/** + * Constructs inline install URL for Chrome desktop streaming extension. + * The 'chromeExtensionId' must be defined in config.js. + * @returns {string} + */ +function getWebStoreInstallUrl() +{ + return "https://chrome.google.com/webstore/detail/" + config.chromeExtensionId; +} + +/** + * Checks whether extension update is required. + * @param minVersion minimal required version + * @param extVersion current extension version + * @returns {boolean} + */ +function isUpdateRequired(minVersion, extVersion) +{ + try + { + var s1 = minVersion.split('.'); + var s2 = extVersion.split('.'); + + var len = Math.max(s1.length, s2.length); + for (var i = 0; i < len; i++) + { + var n1 = 0, + n2 = 0; + + if (i < s1.length) + n1 = parseInt(s1[i]); + if (i < s2.length) + n2 = parseInt(s2[i]); + + if (isNaN(n1) || isNaN(n2)) + { + return true; + } + else if (n1 !== n2) + { + return n1 > n2; + } + } + + // will happen if boths version has identical numbers in + // their components (even if one of them is longer, has more components) + return false; + } + catch (e) + { + console.error("Failed to parse extension version", e); + UI.messageHandler.showError('Error', + 'Error when trying to detect desktopsharing extension.'); + return true; + } +} + + +function checkExtInstalled(isInstalledCallback) { + if (!chrome.runtime) { + // No API, so no extension for sure + isInstalledCallback(false); + return; + } + chrome.runtime.sendMessage( + config.chromeExtensionId, + { getVersion: true }, + function (response) { + if (!response || !response.version) { + // Communication failure - assume that no endpoint exists + console.warn("Extension not installed?: " + chrome.runtime.lastError); + isInstalledCallback(false); + } else { + // Check installed extension version + var extVersion = response.version; + console.log('Extension version is: ' + extVersion); + var updateRequired = isUpdateRequired(config.minChromeExtVersion, extVersion); + if (updateRequired) { + alert( + 'Jitsi Desktop Streamer requires update. ' + + 'Changes will take effect after next Chrome restart.'); + } + isInstalledCallback(!updateRequired); + } + } + ); +} + +function doGetStreamFromExtension(streamCallback, failCallback) { + // Sends 'getStream' msg to the extension. Extension id must be defined in the config. + chrome.runtime.sendMessage( + config.chromeExtensionId, + { getStream: true, sources: config.desktopSharingSources }, + function (response) { + if (!response) { + failCallback(chrome.runtime.lastError); + return; + } + console.log("Response from extension: " + response); + if (response.streamId) { + RTC.getUserMediaWithConstraints( + ['desktop'], + function (stream) { + streamCallback(stream); + }, + failCallback, + null, null, null, + response.streamId); + } else { + failCallback("Extension failed to get the stream"); + } + } + ); +} +/** + * Asks Chrome extension to call chooseDesktopMedia and gets chrome 'desktop' stream for returned stream token. + */ +function obtainScreenFromExtension(streamCallback, failCallback) { + checkExtInstalled( + function (isInstalled) { + if (isInstalled) { + doGetStreamFromExtension(streamCallback, failCallback); + } else { + chrome.webstore.install( + getWebStoreInstallUrl(), + function (arg) { + console.log("Extension installed successfully", arg); + // We need to reload the page in order to get the access to chrome.runtime + window.location.reload(false); + }, + function (arg) { + console.log("Failed to install the extension", arg); + failCallback(arg); + UI.messageHandler.showError('Error', + 'Failed to install desktop sharing extension'); + } + ); + } + } + ); +} + +/** + * Call this method to toggle desktop sharing feature. + * @param method pass "ext" to use chrome extension for desktop capture(chrome extension required), + * pass "webrtc" to use WebRTC "screen" desktop source('chrome://flags/#enable-usermedia-screen-capture' + * must be enabled), pass any other string or nothing in order to disable this feature completely. + */ +function setDesktopSharing(method) { + // Check if we are running chrome + if (!navigator.webkitGetUserMedia) { + obtainDesktopStream = null; + console.info("Desktop sharing disabled"); + } else if (method == "ext") { + obtainDesktopStream = obtainScreenFromExtension; + console.info("Using Chrome extension for desktop sharing"); + } else if (method == "webrtc") { + obtainDesktopStream = obtainWebRTCScreen; + console.info("Using Chrome WebRTC for desktop sharing"); + } + + // Reset enabled cache + _desktopSharingEnabled = null; +} + +/** + * Initializes with extension id set in config.js to support inline installs. + * Host site must be selected as main website of published extension. + */ +function initInlineInstalls() +{ + $("link[rel=chrome-webstore-item]").attr("href", getWebStoreInstallUrl()); +} + +function getSwitchStreamFailed(error) { + console.error("Failed to obtain the stream to switch to", error); + switchInProgress = false; +} + +function streamSwitchDone() { + switchInProgress = false; + eventEmitter.emit( + DesktopSharingEventTypes.SWITCHING_DONE, + isUsingScreenStream); +} + +function newStreamCreated(stream) +{ + eventEmitter.emit(DesktopSharingEventTypes.NEW_STREAM_CREATED, + stream, isUsingScreenStream, streamSwitchDone); +} + + +module.exports = { + isUsingScreenStream: function () { + return isUsingScreenStream; + }, + + /** + * @returns {boolean} true if desktop sharing feature is available and enabled. + */ + isDesktopSharingEnabled: function () { + if (_desktopSharingEnabled === null) { + if (obtainDesktopStream === obtainScreenFromExtension) { + // Parse chrome version + var userAgent = navigator.userAgent.toLowerCase(); + // We can assume that user agent is chrome, because it's enforced when 'ext' streaming method is set + var ver = parseInt(userAgent.match(/chrome\/(\d+)\./)[1], 10); + console.log("Chrome version" + userAgent, ver); + _desktopSharingEnabled = ver >= 34; + } else { + _desktopSharingEnabled = obtainDesktopStream === obtainWebRTCScreen; + } + } + return _desktopSharingEnabled; + }, + + init: function () { + setDesktopSharing(config.desktopSharing); + + // Initialize Chrome extension inline installs + if (config.chromeExtensionId) { + initInlineInstalls(); + } + + eventEmitter.emit(DesktopSharingEventTypes.INIT); + }, + + addListener: function(listener, type) + { + eventEmitter.on(type, listener); + }, + + removeListener: function (listener,type) { + eventEmitter.removeListener(type, listener); + }, + + /* + * Toggles screen sharing. + */ + toggleScreenSharing: function () { + if (switchInProgress || !obtainDesktopStream) { + console.warn("Switch in progress or no method defined"); + return; + } + switchInProgress = true; + + if (!isUsingScreenStream) + { + // Switch to desktop stream + obtainDesktopStream( + function (stream) { + // We now use screen stream + isUsingScreenStream = true; + // Hook 'ended' event to restore camera when screen stream stops + stream.addEventListener('ended', + function (e) { + if (!switchInProgress && isUsingScreenStream) { + toggleScreenSharing(); + } + } + ); + newStreamCreated(stream); + }, + getSwitchStreamFailed); + } else { + // Disable screen stream + RTC.getUserMediaWithConstraints( + ['video'], + function (stream) { + // We are now using camera stream + isUsingScreenStream = false; + newStreamCreated(stream); + }, + getSwitchStreamFailed, config.resolution || '360' + ); + } + } +}; + + +},{"events":2}],2:[function(require,module,exports){ +// Copyright Joyent, Inc. and other Node contributors. +// +// Permission is hereby granted, free of charge, to any person obtaining a +// copy of this software and associated documentation files (the +// "Software"), to deal in the Software without restriction, including +// without limitation the rights to use, copy, modify, merge, publish, +// distribute, sublicense, and/or sell copies of the Software, and to permit +// persons to whom the Software is furnished to do so, subject to the +// following conditions: +// +// The above copyright notice and this permission notice shall be included +// in all copies or substantial portions of the Software. +// +// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS +// OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF +// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN +// NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, +// DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR +// OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE +// USE OR OTHER DEALINGS IN THE SOFTWARE. + +function EventEmitter() { + this._events = this._events || {}; + this._maxListeners = this._maxListeners || undefined; +} +module.exports = EventEmitter; + +// Backwards-compat with node 0.10.x +EventEmitter.EventEmitter = EventEmitter; + +EventEmitter.prototype._events = undefined; +EventEmitter.prototype._maxListeners = undefined; + +// By default EventEmitters will print a warning if more than 10 listeners are +// added to it. This is a useful default which helps finding memory leaks. +EventEmitter.defaultMaxListeners = 10; + +// Obviously not all Emitters should be limited to 10. This function allows +// that to be increased. Set to zero for unlimited. +EventEmitter.prototype.setMaxListeners = function(n) { + if (!isNumber(n) || n < 0 || isNaN(n)) + throw TypeError('n must be a positive number'); + this._maxListeners = n; + return this; +}; + +EventEmitter.prototype.emit = function(type) { + var er, handler, len, args, i, listeners; + + if (!this._events) + this._events = {}; + + // If there is no 'error' event listener then throw. + if (type === 'error') { + if (!this._events.error || + (isObject(this._events.error) && !this._events.error.length)) { + er = arguments[1]; + if (er instanceof Error) { + throw er; // Unhandled 'error' event + } else { + throw TypeError('Uncaught, unspecified "error" event.'); + } + return false; + } + } + + handler = this._events[type]; + + if (isUndefined(handler)) + return false; + + if (isFunction(handler)) { + switch (arguments.length) { + // fast cases + case 1: + handler.call(this); + break; + case 2: + handler.call(this, arguments[1]); + break; + case 3: + handler.call(this, arguments[1], arguments[2]); + break; + // slower + default: + len = arguments.length; + args = new Array(len - 1); + for (i = 1; i < len; i++) + args[i - 1] = arguments[i]; + handler.apply(this, args); + } + } else if (isObject(handler)) { + len = arguments.length; + args = new Array(len - 1); + for (i = 1; i < len; i++) + args[i - 1] = arguments[i]; + + listeners = handler.slice(); + len = listeners.length; + for (i = 0; i < len; i++) + listeners[i].apply(this, args); + } + + return true; +}; + +EventEmitter.prototype.addListener = function(type, listener) { + var m; + + if (!isFunction(listener)) + throw TypeError('listener must be a function'); + + if (!this._events) + this._events = {}; + + // To avoid recursion in the case that type === "newListener"! Before + // adding it to the listeners, first emit "newListener". + if (this._events.newListener) + this.emit('newListener', type, + isFunction(listener.listener) ? + listener.listener : listener); + + if (!this._events[type]) + // Optimize the case of one listener. Don't need the extra array object. + this._events[type] = listener; + else if (isObject(this._events[type])) + // If we've already got an array, just append. + this._events[type].push(listener); + else + // Adding the second element, need to change to array. + this._events[type] = [this._events[type], listener]; + + // Check for listener leak + if (isObject(this._events[type]) && !this._events[type].warned) { + var m; + if (!isUndefined(this._maxListeners)) { + m = this._maxListeners; + } else { + m = EventEmitter.defaultMaxListeners; + } + + if (m && m > 0 && this._events[type].length > m) { + this._events[type].warned = true; + console.error('(node) warning: possible EventEmitter memory ' + + 'leak detected. %d listeners added. ' + + 'Use emitter.setMaxListeners() to increase limit.', + this._events[type].length); + if (typeof console.trace === 'function') { + // not supported in IE 10 + console.trace(); + } + } + } + + return this; +}; + +EventEmitter.prototype.on = EventEmitter.prototype.addListener; + +EventEmitter.prototype.once = function(type, listener) { + if (!isFunction(listener)) + throw TypeError('listener must be a function'); + + var fired = false; + + function g() { + this.removeListener(type, g); + + if (!fired) { + fired = true; + listener.apply(this, arguments); + } + } + + g.listener = listener; + this.on(type, g); + + return this; +}; + +// emits a 'removeListener' event iff the listener was removed +EventEmitter.prototype.removeListener = function(type, listener) { + var list, position, length, i; + + if (!isFunction(listener)) + throw TypeError('listener must be a function'); + + if (!this._events || !this._events[type]) + return this; + + list = this._events[type]; + length = list.length; + position = -1; + + if (list === listener || + (isFunction(list.listener) && list.listener === listener)) { + delete this._events[type]; + if (this._events.removeListener) + this.emit('removeListener', type, listener); + + } else if (isObject(list)) { + for (i = length; i-- > 0;) { + if (list[i] === listener || + (list[i].listener && list[i].listener === listener)) { + position = i; + break; + } + } + + if (position < 0) + return this; + + if (list.length === 1) { + list.length = 0; + delete this._events[type]; + } else { + list.splice(position, 1); + } + + if (this._events.removeListener) + this.emit('removeListener', type, listener); + } + + return this; +}; + +EventEmitter.prototype.removeAllListeners = function(type) { + var key, listeners; + + if (!this._events) + return this; + + // not listening for removeListener, no need to emit + if (!this._events.removeListener) { + if (arguments.length === 0) + this._events = {}; + else if (this._events[type]) + delete this._events[type]; + return this; + } + + // emit removeListener for all listeners on all events + if (arguments.length === 0) { + for (key in this._events) { + if (key === 'removeListener') continue; + this.removeAllListeners(key); + } + this.removeAllListeners('removeListener'); + this._events = {}; + return this; + } + + listeners = this._events[type]; + + if (isFunction(listeners)) { + this.removeListener(type, listeners); + } else { + // LIFO order + while (listeners.length) + this.removeListener(type, listeners[listeners.length - 1]); + } + delete this._events[type]; + + return this; +}; + +EventEmitter.prototype.listeners = function(type) { + var ret; + if (!this._events || !this._events[type]) + ret = []; + else if (isFunction(this._events[type])) + ret = [this._events[type]]; + else + ret = this._events[type].slice(); + return ret; +}; + +EventEmitter.listenerCount = function(emitter, type) { + var ret; + if (!emitter._events || !emitter._events[type]) + ret = 0; + else if (isFunction(emitter._events[type])) + ret = 1; + else + ret = emitter._events[type].length; + return ret; +}; + +function isFunction(arg) { + return typeof arg === 'function'; +} + +function isNumber(arg) { + return typeof arg === 'number'; +} + +function isObject(arg) { + return typeof arg === 'object' && arg !== null; +} + +function isUndefined(arg) { + return arg === void 0; +} + +},{}]},{},[1])(1) +}); \ No newline at end of file diff --git a/libs/modules/simulcast.bundle.js b/libs/modules/simulcast.bundle.js index c6aeb7851..9ebc5e548 100644 --- a/libs/modules/simulcast.bundle.js +++ b/libs/modules/simulcast.bundle.js @@ -384,7 +384,7 @@ NativeSimulcastSender.prototype._localVideoSourceCache = ''; NativeSimulcastSender.prototype.reset = function () { this._localExplosionMap = {}; - this._isUsingScreenStream = isUsingScreenStream; + this._isUsingScreenStream = desktopsharing.isUsingScreenStream(); }; NativeSimulcastSender.prototype._cacheLocalVideoSources = function (lines) { diff --git a/libs/strophe/strophe.jingle.session.js b/libs/strophe/strophe.jingle.session.js index 140b406fe..2517520e6 100644 --- a/libs/strophe/strophe.jingle.session.js +++ b/libs/strophe/strophe.jingle.session.js @@ -920,9 +920,6 @@ JingleSession.prototype.switchStreams = function (new_stream, oldStream, success var self = this; - // Stop the stream to trigger onended event for old stream - oldStream.stop(); - // Remember SDP to figure out added/removed SSRCs var oldSdp = null; if(self.peerconnection) { diff --git a/modules/RTC/RTC.js b/modules/RTC/RTC.js index 02d3f55ef..c65ef0b69 100644 --- a/modules/RTC/RTC.js +++ b/modules/RTC/RTC.js @@ -24,7 +24,7 @@ var RTC = { eventEmitter.removeListener(eventType, listener); }, - createLocalStream: function (stream, type) { + createLocalStream: function (stream, type, change) { var localStream = new LocalStream(stream, type, eventEmitter); //in firefox we have only one stream object @@ -39,8 +39,11 @@ var RTC = { { this.localVideo = localStream; } - eventEmitter.emit(StreamEventTypes.EVENT_TYPE_LOCAL_CREATED, - localStream); + var eventType = StreamEventTypes.EVENT_TYPE_LOCAL_CREATED; + if(change) + eventType = StreamEventTypes.EVENT_TYPE_LOCAL_CHANGED; + + eventEmitter.emit(eventType, localStream); return localStream; }, removeLocalStream: function (stream) { @@ -96,6 +99,11 @@ var RTC = { this.dispose(); }, start: function () { + var self = this; + desktopsharing.addListener( + function (stream, isUsingScreenStream, callback) { + self.changeLocalVideo(stream, isUsingScreenStream, callback); + }, DesktopSharingEventTypes.NEW_STREAM_CREATED); this.rtcUtils = new RTCUtils(this); this.rtcUtils.obtainAudioAndVideoPermissions(); }, @@ -126,9 +134,26 @@ var RTC = { this.localStreams = []; //in firefox we have only one stream object - if(this.localAudio.getOriginalStream() != new_stream) + if (this.localAudio.getOriginalStream() != new_stream) this.localStreams.push(this.localAudio); this.localStreams.push(this.localVideo); + }, + changeLocalVideo: function (stream, isUsingScreenStream, callback) { + var oldStream = this.localVideo.getOriginalStream(); + var type = (isUsingScreenStream? "desktop" : "video"); + RTC.localVideo = this.createLocalStream(stream, type, true); + // Stop the stream to trigger onended event for old stream + oldStream.stop(); + if (activecall) { + // FIXME: will block switchInProgress on true value in case of exception + activecall.switchStreams(stream, oldStream, callback); + } else { + // We are done immediately + console.error("No conference handler"); + UI.messageHandler.showError('Error', + 'Unable to switch video stream.'); + callback(); + } } }; diff --git a/modules/UI/UI.js b/modules/UI/UI.js index cc71af1be..5ef0deb48 100644 --- a/modules/UI/UI.js +++ b/modules/UI/UI.js @@ -44,26 +44,28 @@ function setupToolbars() { BottomToolbar.init(); } +function streamHandler(stream) { + switch (stream.type) + { + case "audio": + VideoLayout.changeLocalAudio(stream); + break; + case "video": + VideoLayout.changeLocalVideo(stream); + break; + case "stream": + VideoLayout.changeLocalStream(stream); + break; + case "desktop": + VideoLayout.changeLocalVideo(stream); + break; + } +} function registerListeners() { - RTC.addStreamListener(function (stream) { - switch (stream.type) - { - case "audio": - VideoLayout.changeLocalAudio(stream.getOriginalStream()); - break; - case "video": - VideoLayout.changeLocalVideo(stream.getOriginalStream(), true); - break; - case "stream": - VideoLayout.changeLocalStream(stream.getOriginalStream()); - break; - case "desktop": - VideoLayout.changeLocalVideo(stream, !isUsingScreenStream); - break; - } - }, StreamEventTypes.EVENT_TYPE_LOCAL_CREATED); + RTC.addStreamListener(streamHandler, StreamEventTypes.EVENT_TYPE_LOCAL_CREATED); + RTC.addStreamListener(streamHandler, StreamEventTypes.EVENT_TYPE_LOCAL_CHANGED); RTC.addStreamListener(function (stream) { VideoLayout.onRemoteStreamAdded(stream); }, StreamEventTypes.EVENT_TYPE_REMOTE_CREATED); @@ -96,6 +98,13 @@ function registerListeners() { AudioLevels.updateAudioLevel(resourceJid, audioLevel, UI.getLargeVideoState().userResourceJid); }); + desktopsharing.addListener(function () { + ToolbarToggler.showDesktopSharingButton(); + }, DesktopSharingEventTypes.INIT); + desktopsharing.addListener( + Toolbar.changeDesktopSharingButtonState, + DesktopSharingEventTypes.SWITCHING_DONE); + } @@ -445,10 +454,6 @@ UI.setRecordingButtonState = function (state) { Toolbar.setRecordingButtonState(state); }; -UI.changeDesktopSharingButtonState = function (isUsingScreenStream) { - Toolbar.changeDesktopSharingButtonState(isUsingScreenStream); -}; - UI.inputDisplayNameHandler = function (value) { VideoLayout.inputDisplayNameHandler(value); }; @@ -505,10 +510,6 @@ UI.showLocalAudioIndicator = function (mute) { VideoLayout.showLocalAudioIndicator(mute); }; -UI.changeLocalVideo = function (stream, flipx) { - VideoLayout.changeLocalVideo(stream, flipx); -}; - UI.generateRoomName = function() { var roomnode = null; var path = window.location.pathname; @@ -555,7 +556,6 @@ UI.dockToolbar = function (isDock) { return ToolbarToggler.dockToolbar(isDock); }; - function dump(elem, filename) { elem = elem.parentNode; elem.download = filename || 'meetlog.json'; diff --git a/modules/UI/toolbars/Toolbar.js b/modules/UI/toolbars/Toolbar.js index a6f99ada1..87597ed1b 100644 --- a/modules/UI/toolbars/Toolbar.js +++ b/modules/UI/toolbars/Toolbar.js @@ -40,7 +40,7 @@ var buttonHandlers = return Etherpad.toggleEtherpad(0); }, "toolbar_button_desktopsharing": function () { - return toggleScreenSharing(); + return desktopsharing.toggleScreenSharing(); }, "toolbar_button_fullScreen": function() { @@ -262,7 +262,7 @@ var Toolbar = (function (my) { inviteLink.select(); document.getElementById('jqi_state0_buttonInvite').disabled = false; } - } + }; /** * Disables and enables some of the buttons. diff --git a/modules/UI/toolbars/ToolbarToggler.js b/modules/UI/toolbars/ToolbarToggler.js index 5865bb44f..6a5655702 100644 --- a/modules/UI/toolbars/ToolbarToggler.js +++ b/modules/UI/toolbars/ToolbarToggler.js @@ -1,8 +1,16 @@ -/* global $, interfaceConfig, Moderator, showDesktopSharingButton */ +/* global $, interfaceConfig, Moderator, DesktopStreaming.showDesktopSharingButton */ var toolbarTimeoutObject, toolbarTimeout = interfaceConfig.INITIAL_TOOLBAR_TIMEOUT; +function showDesktopSharingButton() { + if (desktopsharing.isDesktopSharingEnabled()) { + $('#desktopsharing').css({display: "inline"}); + } else { + $('#desktopsharing').css({display: "none"}); + } +} + /** * Hides the toolbar. */ @@ -97,7 +105,9 @@ var ToolbarToggler = { toolbarTimeoutObject = setTimeout(hideToolbar, toolbarTimeout); } } - } + }, + + showDesktopSharingButton: showDesktopSharingButton }; diff --git a/modules/UI/videolayout/VideoLayout.js b/modules/UI/videolayout/VideoLayout.js index fbeecb933..6061055a6 100644 --- a/modules/UI/videolayout/VideoLayout.js +++ b/modules/UI/videolayout/VideoLayout.js @@ -414,11 +414,11 @@ var VideoLayout = (function (my) { }; my.changeLocalStream = function (stream) { - VideoLayout.changeLocalVideo(stream, true); + VideoLayout.changeLocalVideo(stream); }; my.changeLocalAudio = function(stream) { - RTC.attachMediaStream($('#localAudio'), stream); + RTC.attachMediaStream($('#localAudio'), stream.getOriginalStream()); document.getElementById('localAudio').autoplay = true; document.getElementById('localAudio').volume = 0; if (preMuted) { @@ -427,9 +427,13 @@ var VideoLayout = (function (my) { } }; - my.changeLocalVideo = function(stream, flipX) { + my.changeLocalVideo = function(stream) { + var flipX = true; + if(stream.type == "desktop") + flipX = false; var localVideo = document.createElement('video'); - localVideo.id = 'localVideo_' + RTC.getStreamID(stream); + localVideo.id = 'localVideo_' + + RTC.getStreamID(stream.getOriginalStream()); localVideo.autoplay = true; localVideo.volume = 0; // is it required if audio is separated ? localVideo.oncontextmenu = function () { return false; }; @@ -477,7 +481,7 @@ var VideoLayout = (function (my) { } ); // Add stream ended handler - stream.onended = function () { + stream.getOriginalStream().onended = function () { localVideoContainer.removeChild(localVideo); VideoLayout.updateRemovedVideo(RTC.getVideoSrc(localVideo)); }; diff --git a/desktopsharing.js b/modules/desktopsharing/desktopsharing.js similarity index 69% rename from desktopsharing.js rename to modules/desktopsharing/desktopsharing.js index 804c060f8..ebc943ae8 100644 --- a/desktopsharing.js +++ b/modules/desktopsharing/desktopsharing.js @@ -23,6 +23,10 @@ var obtainDesktopStream = null; */ var _desktopSharingEnabled = null; +var EventEmitter = require("events"); + +var eventEmitter = new EventEmitter(); + /** * Method obtains desktop stream from WebRTC 'screen' source. * Flag 'chrome://flags/#enable-usermedia-screen-capture' must be enabled. @@ -177,33 +181,6 @@ function obtainScreenFromExtension(streamCallback, failCallback) { ); } -/** - * @returns {boolean} true if desktop sharing feature is available and enabled. - */ -function isDesktopSharingEnabled() { - if (_desktopSharingEnabled === null) { - if (obtainDesktopStream === obtainScreenFromExtension) { - // Parse chrome version - var userAgent = navigator.userAgent.toLowerCase(); - // We can assume that user agent is chrome, because it's enforced when 'ext' streaming method is set - var ver = parseInt(userAgent.match(/chrome\/(\d+)\./)[1], 10); - console.log("Chrome version" + userAgent, ver); - _desktopSharingEnabled = ver >= 34; - } else { - _desktopSharingEnabled = obtainDesktopStream === obtainWebRTCScreen; - } - } - return _desktopSharingEnabled; -} - -function showDesktopSharingButton() { - if (isDesktopSharingEnabled()) { - $('#desktopsharing').css({display: "inline"}); - } else { - $('#desktopsharing').css({display: "none"}); - } -} - /** * Call this method to toggle desktop sharing feature. * @param method pass "ext" to use chrome extension for desktop capture(chrome extension required), @@ -225,8 +202,6 @@ function setDesktopSharing(method) { // Reset enabled cache _desktopSharingEnabled = null; - - showDesktopSharingButton(); } /** @@ -244,73 +219,103 @@ function getSwitchStreamFailed(error) { } function streamSwitchDone() { - //window.setTimeout( - // function () { switchInProgress = false; - UI.changeDesktopSharingButtonState(isUsingScreenStream); - // }, 100 - //); + eventEmitter.emit( + DesktopSharingEventTypes.SWITCHING_DONE, + isUsingScreenStream); } -function newStreamCreated(stream) { - - var oldStream = RTC.localVideo.getOriginalStream(); - - RTC.localVideo.stream = stream; - - UI.changeLocalVideo(stream, !isUsingScreenStream); - - if (activecall) { - // FIXME: will block switchInProgress on true value in case of exception - activecall.switchStreams(stream, oldStream, streamSwitchDone); - } else { - // We are done immediately - console.error("No conference handler"); - UI.messageHandler.showError('Error', - 'Unable to switch video stream.'); - streamSwitchDone(); - } +function newStreamCreated(stream) +{ + eventEmitter.emit(DesktopSharingEventTypes.NEW_STREAM_CREATED, + stream, isUsingScreenStream, streamSwitchDone); } -/* - * Toggles screen sharing. - */ -function toggleScreenSharing() { - if (switchInProgress || !obtainDesktopStream) { - console.warn("Switch in progress or no method defined"); - return; - } - switchInProgress = true; - if (!isUsingScreenStream) +module.exports = { + isUsingScreenStream: function () { + return isUsingScreenStream; + }, + + /** + * @returns {boolean} true if desktop sharing feature is available and enabled. + */ + isDesktopSharingEnabled: function () { + if (_desktopSharingEnabled === null) { + if (obtainDesktopStream === obtainScreenFromExtension) { + // Parse chrome version + var userAgent = navigator.userAgent.toLowerCase(); + // We can assume that user agent is chrome, because it's enforced when 'ext' streaming method is set + var ver = parseInt(userAgent.match(/chrome\/(\d+)\./)[1], 10); + console.log("Chrome version" + userAgent, ver); + _desktopSharingEnabled = ver >= 34; + } else { + _desktopSharingEnabled = obtainDesktopStream === obtainWebRTCScreen; + } + } + return _desktopSharingEnabled; + }, + + init: function () { + setDesktopSharing(config.desktopSharing); + + // Initialize Chrome extension inline installs + if (config.chromeExtensionId) { + initInlineInstalls(); + } + + eventEmitter.emit(DesktopSharingEventTypes.INIT); + }, + + addListener: function(listener, type) { - // Switch to desktop stream - obtainDesktopStream( - function (stream) { - // We now use screen stream - isUsingScreenStream = true; - // Hook 'ended' event to restore camera when screen stream stops - stream.addEventListener('ended', - function (e) { - if (!switchInProgress && isUsingScreenStream) { - toggleScreenSharing(); - } - } - ); - newStreamCreated(stream); - }, - getSwitchStreamFailed); - } else { - // Disable screen stream - RTC.getUserMediaWithConstraints( - ['video'], - function (stream) { - // We are now using camera stream - isUsingScreenStream = false; - newStreamCreated(stream); - }, - getSwitchStreamFailed, config.resolution || '360' - ); - } -} + eventEmitter.on(type, listener); + }, + + removeListener: function (listener,type) { + eventEmitter.removeListener(type, listener); + }, + + /* + * Toggles screen sharing. + */ + toggleScreenSharing: function () { + if (switchInProgress || !obtainDesktopStream) { + console.warn("Switch in progress or no method defined"); + return; + } + switchInProgress = true; + + if (!isUsingScreenStream) + { + // Switch to desktop stream + obtainDesktopStream( + function (stream) { + // We now use screen stream + isUsingScreenStream = true; + // Hook 'ended' event to restore camera when screen stream stops + stream.addEventListener('ended', + function (e) { + if (!switchInProgress && isUsingScreenStream) { + toggleScreenSharing(); + } + } + ); + newStreamCreated(stream); + }, + getSwitchStreamFailed); + } else { + // Disable screen stream + RTC.getUserMediaWithConstraints( + ['video'], + function (stream) { + // We are now using camera stream + isUsingScreenStream = false; + newStreamCreated(stream); + }, + getSwitchStreamFailed, config.resolution || '360' + ); + } + } +}; diff --git a/modules/simulcast/SimulcastSender.js b/modules/simulcast/SimulcastSender.js index 432db64d3..6bef36dd5 100644 --- a/modules/simulcast/SimulcastSender.js +++ b/modules/simulcast/SimulcastSender.js @@ -47,7 +47,7 @@ NativeSimulcastSender.prototype._localVideoSourceCache = ''; NativeSimulcastSender.prototype.reset = function () { this._localExplosionMap = {}; - this._isUsingScreenStream = isUsingScreenStream; + this._isUsingScreenStream = desktopsharing.isUsingScreenStream(); }; NativeSimulcastSender.prototype._cacheLocalVideoSources = function (lines) { diff --git a/service/RTC/StreamEventTypes.js b/service/RTC/StreamEventTypes.js index bdd64e36c..ff92f02c2 100644 --- a/service/RTC/StreamEventTypes.js +++ b/service/RTC/StreamEventTypes.js @@ -1,6 +1,8 @@ var StreamEventTypes = { EVENT_TYPE_LOCAL_CREATED: "stream.local_created", + EVENT_TYPE_LOCAL_CHANGED: "stream.local_changed", + EVENT_TYPE_LOCAL_ENDED: "stream.local_ended", EVENT_TYPE_REMOTE_CREATED: "stream.remote_created", diff --git a/service/desktopsharing/DesktopSharingEventTypes.js b/service/desktopsharing/DesktopSharingEventTypes.js new file mode 100644 index 000000000..cba200c34 --- /dev/null +++ b/service/desktopsharing/DesktopSharingEventTypes.js @@ -0,0 +1,10 @@ +var DesktopSharingEventTypes = { + INIT: "ds.init", + + SWITCHING_DONE: "ds.switching_done", + + NEW_STREAM_CREATED: "ds.new_stream_created" +}; + +//These lines should be uncommented when require works in app.js +//module.exports = NEW_STREAM_CREATED; \ No newline at end of file