haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Implements desktop sharing.

This commit is contained in:
hristoterezov 2015-12-29 16:30:50 -06:00
parent 6e007a03af
commit 3ec04d5a95
11 changed files with 1235 additions and 1524 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.jshintignore
View File

@ -7,3 +7,5 @@ lib-jitsi-meet.js
modules/xmpp/strophe.emuc.js
modules/UI/prezi/Prezi.js
modules/RTC/adapter.screenshare.js
modules/statistics/*
modules/UI/videolayout/*

92
app.js
View File

@ -23,9 +23,24 @@ import AuthHandler from './modules/AuthHandler';
import createRoomLocker from './modules/RoomLocker';
const DesktopSharingEventTypes =
require("./service/desktopsharing/DesktopSharingEventTypes");
const ConnectionEvents = JitsiMeetJS.events.connection;
const ConnectionErrors = JitsiMeetJS.errors.connection;
const ConferenceEvents = JitsiMeetJS.events.conference;
const ConferenceErrors = JitsiMeetJS.errors.conference;
const TrackEvents = JitsiMeetJS.events.track;
const TrackErrors = JitsiMeetJS.errors.track;
let localVideo, localAudio;
const Commands = {
CONNECTION_QUALITY: "connectionQuality",
EMAIL: "email"
EMAIL: "email",
VIDEO_TYPE: "videoType"
};
function buildRoomName () {
@ -104,18 +119,25 @@ const APP = {
}
};
const ConnectionEvents = JitsiMeetJS.events.connection;
const ConnectionErrors = JitsiMeetJS.errors.connection;
const ConferenceEvents = JitsiMeetJS.events.conference;
const ConferenceErrors = JitsiMeetJS.errors.conference;
function initConference(localTracks, connection) {
let room = connection.initJitsiConference(APP.conference.roomName, {
openSctp: config.openSctp,
disableAudioLevels: config.disableAudioLevels
});
const addTrack = (track) => {
room.addTrack(track);
if(track.getType() === "audio")
return;
room.removeCommand(Commands.VIDEO_TYPE);
room.sendCommand(Commands.VIDEO_TYPE, {
value: track.videoType,
attributes: {
xmlns: 'http://jitsi.org/jitmeet/video'
}
});
};
APP.conference.localId = room.myUserId();
Object.defineProperty(APP.conference, "membersCount", {
get: function () {
@ -129,6 +151,40 @@ function initConference(localTracks, connection) {
APP.conference.listMembersIds = function () {
return room.getParticipants().map(p => p.getId());
};
/**
* Creates video track (desktop or camera).
* @param type "camera" or "video"
* @param endedHandler onended function
* @returns Promise
*/
APP.conference.createVideoTrack = (type, endedHandler) => {
return JitsiMeetJS.createLocalTracks({
devices: [type], resolution: config.resolution
}).then((tracks) => {
tracks[0].on(TrackEvents.TRACK_STOPPED, endedHandler);
return tracks;
});
};
APP.conference.changeLocalVideo = (track, callback) => {
const localCallback = (newTrack) => {
if (newTrack.isLocal() && newTrack === localVideo) {
if(localVideo.isMuted() &&
localVideo.videoType !== track.videoType) {
localVideo.mute();
}
callback();
room.off(ConferenceEvents.TRACK_ADDED, localCallback);
}
};
room.on(ConferenceEvents.TRACK_ADDED, localCallback);
localVideo.stop();
localVideo = track;
addTrack(track);
APP.UI.addLocalStream(track);
};
function getDisplayName(id) {
if (APP.conference.isLocalId(id)) {
@ -144,7 +200,13 @@ function initConference(localTracks, connection) {
// add local streams when joined to the conference
room.on(ConferenceEvents.CONFERENCE_JOINED, function () {
localTracks.forEach(function (track) {
room.addTrack(track);
if(track.getType() === "audio") {
localAudio = track;
}
else if (track.getType() === "video") {
localVideo = track;
}
addTrack(track);
APP.UI.addLocalStream(track);
});
@ -293,6 +355,10 @@ function initConference(localTracks, connection) {
}
);
room.addCommandListener(Commands.VIDEO_TYPE, (data, from) => {
APP.UI.onPeerVideoTypeChanged(from, data.value);
});
// share email with other users
function sendEmail(email) {
@ -520,7 +586,7 @@ function init() {
JitsiMeetJS.setLogLevel(JitsiMeetJS.logLevels.TRACE);
JitsiMeetJS.init().then(function () {
JitsiMeetJS.init(config).then(function () {
return Promise.all([createLocalTracks(), connect()]);
}).then(function ([tracks, connection]) {
console.log('initialized with %s local tracks', tracks.length);
@ -533,7 +599,13 @@ function init() {
APP.settings.setLanguage(language);
});
APP.desktopsharing.init();
APP.desktopsharing.addListener(
DesktopSharingEventTypes.NEW_STREAM_CREATED,
(stream, callback) => {
APP.conference.changeLocalVideo(stream,
callback);
});
APP.desktopsharing.init(JitsiMeetJS.isDesktopSharingEnabled());
APP.statistics.start();
APP.connectionquality.init();
APP.keyboardshortcut.init();

2055
lib-jitsi-meet.js → libs/lib-jitsi-meet.js
View File

File diff suppressed because it is too large Load Diff

11
modules/UI/UI.js
View File

@ -386,13 +386,14 @@ UI.removeUser = function (id, displayName) {
VideoLayout.removeParticipantContainer(id);
};
function onMucPresenceStatus(jid, info) {
VideoLayout.setPresenceStatus(Strophe.getResourceFromJid(jid), info.status);
}
//FIXME: NOT USED. Should start using the lib
// function onMucPresenceStatus(jid, info) {
// VideoLayout.setPresenceStatus(Strophe.getResourceFromJid(jid), info.status);
// }
function onPeerVideoTypeChanged(resourceJid, newVideoType) {
UI.onPeerVideoTypeChanged = (resourceJid, newVideoType) => {
VideoLayout.onVideoTypeChanged(resourceJid, newVideoType);
}
};
UI.updateLocalRole = function (isModerator) {
VideoLayout.showModeratorIndicator();

2
modules/UI/videolayout/LargeVideo.js
View File

@ -549,7 +549,7 @@ var LargeVideo = {
if (!videoType)
videoType = currentSmallVideo.getVideoType();
var isDesktop = videoType === 'screen';
var isDesktop = videoType === 'desktop';
// Change the way we'll be measuring and positioning large video
getVideoSize = isDesktop ? getDesktopVideoSize : getCameraVideoSize;

6
modules/UI/videolayout/LocalVideo.js
View File

@ -159,7 +159,7 @@ LocalVideo.prototype.changeVideo = function (stream) {
localVideoContainerSelector.off('click');
localVideoContainerSelector.on('click', localVideoClick);
this.flipX = stream.videoType != "screen";
this.flipX = stream.videoType != "desktop";
let localVideo = document.createElement('video');
localVideo.id = 'localVideo_' + stream.getId();
if (!RTCBrowserType.isIExplorer()) {
@ -191,14 +191,14 @@ LocalVideo.prototype.changeVideo = function (stream) {
return;
// Add stream ended handler
APP.RTC.addMediaStreamInactiveHandler(
/**APP.RTC.addMediaStreamInactiveHandler(
stream.getOriginalStream(), function () {
// We have to re-select after attach when Temasys plugin is used,
// because <video> element is replaced with <object>
localVideo = $('#' + localVideo.id)[0];
localVideoContainer.removeChild(localVideo);
self.VideoLayout.updateRemovedVideo(self.id);
});
});*/
};
LocalVideo.prototype.joined = function (id) {

3
modules/UI/videolayout/RemoteVideo.js
View File

@ -195,7 +195,8 @@ RemoteVideo.prototype.waitForPlayback = function (sel, stream) {
var onPlayingHandler = function () {
// FIXME: why do i have to do this for FF?
if (RTCBrowserType.isFirefox()) {
APP.RTC.attachMediaStream(sel, webRtcStream);
//FIXME: weshould use the lib here
//APP.RTC.attachMediaStream(sel, webRtcStream);
}
if (RTCBrowserType.isTemasysPluginUsed()) {
sel = self.selectVideoElement();

7
modules/UI/videolayout/SmallVideo.js
View File

@ -58,7 +58,7 @@ SmallVideo.prototype.setDeviceAvailabilityIcons = function (devices) {
/**
* Sets the type of the video displayed by this instance.
* @param videoType 'camera' or 'screen'
* @param videoType 'camera' or 'desktop'
*/
SmallVideo.prototype.setVideoType = function (videoType) {
this.videoType = videoType;
@ -345,11 +345,6 @@ SmallVideo.prototype.selectVideoElement = function () {
}
};
SmallVideo.prototype.getSrc = function () {
var videoElement = this.selectVideoElement().get(0);
return APP.RTC.getVideoSrc(videoElement);
};
SmallVideo.prototype.focus = function(isFocused) {
if(!isFocused) {
this.container.classList.remove("videoContainerFocused");

407
modules/desktopsharing/ScreenObtainer.js
View File

@ -1,407 +0,0 @@
/* global config, APP, chrome, $, alert */
/* jshint -W003 */
var RTCBrowserType = require("../RTC/RTCBrowserType");
var AdapterJS = require("../RTC/adapter.screenshare");
var DesktopSharingEventTypes
= require("../../service/desktopsharing/DesktopSharingEventTypes");
/**
* Indicates whether the Chrome desktop sharing extension is installed.
* @type {boolean}
*/
var chromeExtInstalled = false;
/**
* Indicates whether an update of the Chrome desktop sharing extension is
* required.
* @type {boolean}
*/
var chromeExtUpdateRequired = false;
/**
* Whether the jidesha extension for firefox is installed for the domain on
* which we are running. Null designates an unknown value.
* @type {null}
*/
var firefoxExtInstalled = null;
/**
* If set to true, detection of an installed firefox extension will be started
* again the next time obtainScreenOnFirefox is called (e.g. next time the
* user tries to enable screen sharing).
*/
var reDetectFirefoxExtension = false;
/**
* Handles obtaining a stream from a screen capture on different browsers.
*/
function ScreenObtainer(){
}
/**
* The EventEmitter to use to emit events.
* @type {null}
*/
ScreenObtainer.prototype.eventEmitter = null;
/**
* Initializes the function used to obtain a screen capture (this.obtainStream).
*
* If the browser is Chrome, it uses the value of
* 'config.desktopSharingChromeMethod' (or 'config.desktopSharing') to * decide
* whether to use the a Chrome extension (if the value is 'ext'), use the
* "screen" media source (if the value is 'webrtc'), or disable screen capture
* (if the value is other).
* Note that for the "screen" media source to work the
* 'chrome://flags/#enable-usermedia-screen-capture' flag must be set.
*/
ScreenObtainer.prototype.init = function(eventEmitter) {
this.eventEmitter = eventEmitter;
var obtainDesktopStream = null;
if (RTCBrowserType.isFirefox())
initFirefoxExtensionDetection();
// TODO remove this, config.desktopSharing is deprecated.
var chromeMethod =
(config.desktopSharingChromeMethod || config.desktopSharing);
if (RTCBrowserType.isTemasysPluginUsed()) {
if (!AdapterJS.WebRTCPlugin.plugin.HasScreensharingFeature) {
console.info("Screensharing not supported by this plugin version");
} else if (!AdapterJS.WebRTCPlugin.plugin.isScreensharingAvailable) {
console.info(
"Screensharing not available with Temasys plugin on this site");
} else {
obtainDesktopStream = obtainWebRTCScreen;
console.info("Using Temasys plugin for desktop sharing");
}
} else if (RTCBrowserType.isChrome()) {
if (chromeMethod == "ext") {
if (RTCBrowserType.getChromeVersion() >= 34) {
obtainDesktopStream = obtainScreenFromExtension;
console.info("Using Chrome extension for desktop sharing");
initChromeExtension();
} else {
console.info("Chrome extension not supported until ver 34");
}
} else if (chromeMethod == "webrtc") {
obtainDesktopStream = obtainWebRTCScreen;
console.info("Using Chrome WebRTC for desktop sharing");
}
} else if (RTCBrowserType.isFirefox()) {
if (config.desktopSharingFirefoxDisabled) {
obtainDesktopStream = null;
} else if (window.location.protocol === "http:"){
console.log("Screen sharing is not supported over HTTP. Use of " +
"HTTPS is required.");
obtainDesktopStream = null;
} else {
obtainDesktopStream = this.obtainScreenOnFirefox;
}
}
if (!obtainDesktopStream) {
console.info("Desktop sharing disabled");
}
ScreenObtainer.prototype.obtainStream = obtainDesktopStream;
};
ScreenObtainer.prototype.obtainStream = null;
/**
* Checks whether obtaining a screen capture is supported in the current
* environment.
* @returns {boolean}
*/
ScreenObtainer.prototype.isSupported = function() {
return !!this.obtainStream;
};
/**
* Obtains a desktop stream using getUserMedia.
* For this to work on Chrome, the
* 'chrome://flags/#enable-usermedia-screen-capture' flag must be enabled.
*
* On firefox, the document's domain must be white-listed in the
* 'media.getusermedia.screensharing.allowed_domains' preference in
* 'about:config'.
*/
function obtainWebRTCScreen(streamCallback, failCallback) {
APP.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()
{
//TODO remove chromeExtensionId (deprecated)
return "https://chrome.google.com/webstore/detail/" +
(config.desktopSharingChromeExtId || config.chromeExtensionId);
}
/**
* Checks whether an update of the Chrome extension 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 both versions have 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);
APP.UI.messageHandler.showError("dialog.error",
"dialog.detectext");
return true;
}
}
function checkChromeExtInstalled(callback) {
if (!chrome || !chrome.runtime) {
// No API, so no extension for sure
callback(false, false);
return;
}
chrome.runtime.sendMessage(
//TODO: remove chromeExtensionId (deprecated)
(config.desktopSharingChromeExtId || 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);
callback(false, false);
return;
}
// Check installed extension version
var extVersion = response.version;
console.log('Extension version is: ' + extVersion);
//TODO: remove minChromeExtVersion (deprecated)
var updateRequired
= isUpdateRequired(
(config.desktopSharingChromeMinExtVersion ||
config.minChromeExtVersion),
extVersion);
callback(!updateRequired, updateRequired);
}
);
}
function doGetStreamFromExtension(streamCallback, failCallback) {
// Sends 'getStream' msg to the extension.
// Extension id must be defined in the config.
chrome.runtime.sendMessage(
//TODO: remove chromeExtensionId (deprecated)
(config.desktopSharingChromeExtId || config.chromeExtensionId),
{
getStream: true,
//TODO: remove desktopSharingSources (deprecated).
sources: (config.desktopSharingChromeSources ||
config.desktopSharingSources)
},
function (response) {
if (!response) {
failCallback(chrome.runtime.lastError);
return;
}
console.log("Response from extension: " + response);
if (response.streamId) {
APP.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) {
if (chromeExtInstalled) {
doGetStreamFromExtension(streamCallback, failCallback);
} else {
if (chromeExtUpdateRequired) {
alert(
'Jitsi Desktop Streamer requires update. ' +
'Changes will take effect after next Chrome restart.');
}
chrome.webstore.install(
getWebStoreInstallUrl(),
function (arg) {
console.log("Extension installed successfully", arg);
chromeExtInstalled = true;
// We need to give a moment for the endpoint to become available
window.setTimeout(function () {
doGetStreamFromExtension(streamCallback, failCallback);
}, 500);
},
function (arg) {
console.log("Failed to install the extension", arg);
failCallback(arg);
APP.UI.messageHandler.showError("dialog.error",
"dialog.failtoinstall");
}
);
}
}
/**
* Initializes <link rel=chrome-webstore-item /> 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 initChromeExtension() {
// Initialize Chrome extension inline installs
initInlineInstalls();
// Check if extension is installed
checkChromeExtInstalled(function (installed, updateRequired) {
chromeExtInstalled = installed;
chromeExtUpdateRequired = updateRequired;
console.info(
"Chrome extension installed: " + chromeExtInstalled +
" updateRequired: " + chromeExtUpdateRequired);
});
}
/**
* Obtains a screen capture stream on Firefox.
* @param callback
* @param errorCallback
*/
ScreenObtainer.prototype.obtainScreenOnFirefox =
function (callback, errorCallback) {
var self = this;
var extensionRequired = false;
if (config.desktopSharingFirefoxMaxVersionExtRequired === -1 ||
(config.desktopSharingFirefoxMaxVersionExtRequired >= 0 &&
RTCBrowserType.getFirefoxVersion() <=
config.desktopSharingFirefoxMaxVersionExtRequired)) {
extensionRequired = true;
console.log("Jidesha extension required on firefox version " +
RTCBrowserType.getFirefoxVersion());
}
if (!extensionRequired || firefoxExtInstalled === true) {
obtainWebRTCScreen(callback, errorCallback);
return;
}
if (reDetectFirefoxExtension) {
reDetectFirefoxExtension = false;
initFirefoxExtensionDetection();
}
// Give it some (more) time to initialize, and assume lack of extension if
// it hasn't.
if (firefoxExtInstalled === null) {
window.setTimeout(
function() {
if (firefoxExtInstalled === null)
firefoxExtInstalled = false;
self.obtainScreenOnFirefox(callback, errorCallback);
},
300
);
console.log("Waiting for detection of jidesha on firefox to finish.");
return;
}
// We need an extension and it isn't installed.
// Make sure we check for the extension when the user clicks again.
firefoxExtInstalled = null;
reDetectFirefoxExtension = true;
// Prompt the user to install the extension
this.eventEmitter.emit(DesktopSharingEventTypes.FIREFOX_EXTENSION_NEEDED,
config.desktopSharingFirefoxExtensionURL);
// Make sure desktopsharing knows that we failed, so that it doesn't get
// stuck in 'switching' mode.
errorCallback('Firefox extension required.');
};
/**
* Starts the detection of an installed jidesha extension for firefox.
*/
function initFirefoxExtensionDetection() {
if (config.desktopSharingFirefoxDisabled) {
return;
}
if (firefoxExtInstalled === false || firefoxExtInstalled === true)
return;
if (!config.desktopSharingFirefoxExtId) {
firefoxExtInstalled = false;
return;
}
var img = document.createElement('img');
img.onload = function(){
console.log("Detected firefox screen sharing extension.");
firefoxExtInstalled = true;
};
img.onerror = function(){
console.log("Detected lack of firefox screen sharing extension.");
firefoxExtInstalled = false;
};
// The jidesha extension exposes an empty image file under the url:
// "chrome://EXT_ID/content/DOMAIN.png"
// Where EXT_ID is the ID of the extension with "@" replaced by ".", and
// DOMAIN is a domain whitelisted by the extension.
var src = "chrome://" +
(config.desktopSharingFirefoxExtId.replace('@', '.')) +
"/content/" + document.location.hostname + ".png";
img.setAttribute('src', src);
}
module.exports = ScreenObtainer;

74
modules/desktopsharing/desktopsharing.js
View File

@ -2,9 +2,6 @@
var EventEmitter = require("events");
var DesktopSharingEventTypes
= require("../../service/desktopsharing/DesktopSharingEventTypes");
var RTCBrowserType = require("../RTC/RTCBrowserType");
var RTCEvents = require("../../service/RTC/RTCEvents");
var ScreenObtainer = require("./ScreenObtainer");
/**
* Indicates that desktop stream is currently in use (for toggle purpose).
@ -20,9 +17,9 @@ var isUsingScreenStream = false;
var switchInProgress = false;
/**
* Used to obtain the screen sharing stream from the browser.
* true if desktop sharing is enabled and false otherwise.
*/
var screenObtainer = new ScreenObtainer();
var isEnabled = false;
var eventEmitter = new EventEmitter();
@ -33,9 +30,9 @@ function streamSwitchDone() {
isUsingScreenStream);
}
function newStreamCreated(stream) {
function newStreamCreated(track) {
eventEmitter.emit(DesktopSharingEventTypes.NEW_STREAM_CREATED,
stream, isUsingScreenStream, streamSwitchDone);
track, streamSwitchDone);
}
function getVideoStreamFailed(error) {
@ -50,37 +47,31 @@ function getDesktopStreamFailed(error) {
switchInProgress = false;
}
function onEndedHandler(stream) {
function onEndedHandler() {
if (!switchInProgress && isUsingScreenStream) {
APP.desktopsharing.toggleScreenSharing();
}
APP.RTC.removeMediaStreamInactiveHandler(stream, onEndedHandler);
}
module.exports = {
isUsingScreenStream: function () {
return isUsingScreenStream;
},
/**
* Initializes the desktop sharing module.
* @param {boolean} <tt>true</tt> if desktop sharing feature is available
* and enabled.
*/
init: function (enabled) {
isEnabled = enabled;
},
/**
* @returns {boolean} <tt>true</tt> if desktop sharing feature is available
* and enabled.
*/
isDesktopSharingEnabled: function () {
return screenObtainer.isSupported();
return isEnabled;
},
init: function () {
// Called when RTC finishes initialization
return;
APP.RTC.addListener(RTCEvents.RTC_READY,
function() {
screenObtainer.init(eventEmitter);
eventEmitter.emit(DesktopSharingEventTypes.INIT);
});
},
addListener: function (type, listener) {
eventEmitter.on(type, listener);
},
@ -96,38 +87,26 @@ module.exports = {
if (switchInProgress) {
console.warn("Switch in progress.");
return;
} else if (!screenObtainer.isSupported()) {
} else if (!this.isDesktopSharingEnabled()) {
console.warn("Cannot toggle screen sharing: not supported.");
return;
}
switchInProgress = true;
let type, handler;
if (!isUsingScreenStream) {
// Switch to desktop stream
screenObtainer.obtainStream(
function (stream) {
// We now use screen stream
isUsingScreenStream = true;
// Hook 'ended' event to restore camera
// when screen stream stops
APP.RTC.addMediaStreamInactiveHandler(
stream, onEndedHandler);
newStreamCreated(stream);
},
getDesktopStreamFailed);
handler = onEndedHandler;
type = "desktop";
} else {
// Disable screen stream
APP.RTC.getUserMediaWithConstraints(
['video'],
function (stream) {
// We are now using camera stream
isUsingScreenStream = false;
newStreamCreated(stream);
},
getVideoStreamFailed,
config.resolution || '360'
);
handler = () => {};
type = "video";
}
APP.conference.createVideoTrack(type, handler).then(
(tracks) => {
// We now use screen stream
isUsingScreenStream = type === "desktop";
newStreamCreated(tracks[0]);
}).catch(getDesktopStreamFailed);
},
/*
* Exports the event emitter to allow use by ScreenObtainer. Not for outside
@ -135,4 +114,3 @@ module.exports = {
*/
eventEmitter: eventEmitter
};