jiti-meet/app.js

1413 lines
44 KiB
JavaScript
Raw Normal View History

2013-12-16 11:22:23 +00:00
/* jshint -W117 */
/* application specific logic */
var connection = null;
var authenticatedUser = false;
2013-12-16 11:22:23 +00:00
var focus = null;
2014-02-27 07:19:06 +00:00
var activecall = null;
var RTC = null;
2013-12-16 11:22:23 +00:00
var nickname = null;
var sharedKey = '';
2014-07-01 14:02:34 +00:00
var recordingToken ='';
2013-12-16 11:22:23 +00:00
var roomUrl = null;
2014-08-08 13:25:24 +00:00
var roomName = null;
var ssrc2jid = {};
var mediaStreams = [];
2014-06-05 11:09:31 +00:00
/**
* The stats collector that process stats data and triggers updates to app.js.
* @type {StatsCollector}
*/
var statsCollector = null;
/**
* The stats collector for the local stream.
* @type {LocalStatsCollector}
*/
var localStatsCollector = null;
/**
* Indicates whether ssrc is camera video or desktop stream.
* FIXME: remove those maps
*/
var ssrc2videoType = {};
var videoSrcToSsrc = {};
/**
* Currently focused video "src"(displayed in large video).
* @type {String}
*/
var focusedVideoSrc = null;
var mutedAudios = {};
var localVideoSrc = null;
var flipXLocalVideo = true;
var isFullScreen = false;
var toolbarTimeout = null;
var currentVideoWidth = null;
var currentVideoHeight = null;
/**
* Method used to calculate large video size.
2014-04-13 12:30:47 +00:00
* @type {function ()}
*/
var getVideoSize;
2014-03-28 09:37:14 +00:00
/**
* Method used to get large video position.
2014-04-13 12:30:47 +00:00
* @type {function ()}
2014-03-28 09:37:14 +00:00
*/
var getVideoPosition;
2013-12-16 11:22:23 +00:00
/* window.onbeforeunload = closePageWarning; */
var sessionTerminated = false;
2013-12-16 11:22:23 +00:00
function init() {
RTC = setupRTC();
if (RTC === null) {
2013-12-30 08:23:23 +00:00
window.location.href = 'webrtcrequired.html';
2013-12-16 11:22:23 +00:00
return;
} else if (RTC.browser !== 'chrome') {
2013-12-30 08:23:23 +00:00
window.location.href = 'chromeonly.html';
2013-12-16 11:22:23 +00:00
return;
}
2014-08-25 13:29:54 +00:00
obtainAudioAndVideoPermissions(function (stream) {
var audioStream = new webkitMediaStream(stream);
var videoStream = new webkitMediaStream(stream);
var videoTracks = stream.getVideoTracks();
var audioTracks = stream.getAudioTracks();
for (var i = 0; i < videoTracks.length; i++) {
audioStream.removeTrack(videoTracks[i]);
}
VideoLayout.changeLocalAudio(audioStream);
startLocalRtpStatsCollector(audioStream);
for (i = 0; i < audioTracks.length; i++) {
videoStream.removeTrack(audioTracks[i]);
}
VideoLayout.changeLocalVideo(videoStream, true);
maybeDoJoin();
});
var jid = document.getElementById('jid').value || config.hosts.anonymousdomain || config.hosts.domain || window.location.hostname;
connect(jid);
}
function connect(jid, password) {
var localAudio, localVideo;
if (connection && connection.jingle) {
localAudio = connection.jingle.localAudio;
localVideo = connection.jingle.localVideo;
}
2013-12-16 11:22:23 +00:00
connection = new Strophe.Connection(document.getElementById('boshURL').value || config.bosh || '/http-bind');
if (nickname) {
connection.emuc.addDisplayNameToPresence(nickname);
}
2013-12-30 08:23:23 +00:00
if (connection.disco) {
// for chrome, add multistream cap
}
2013-12-16 11:22:23 +00:00
connection.jingle.pc_constraints = RTC.pc_constraints;
if (config.useIPv6) {
// https://code.google.com/p/webrtc/issues/detail?id=2828
if (!connection.jingle.pc_constraints.optional) connection.jingle.pc_constraints.optional = [];
connection.jingle.pc_constraints.optional.push({googIPv6: true});
}
if (localAudio) connection.jingle.localAudio = localAudio;
if (localVideo) connection.jingle.localVideo = localVideo;
2013-12-16 11:22:23 +00:00
if(!password)
password = document.getElementById('password').value;
2013-12-16 11:22:23 +00:00
var anonymousConnectionFailed = false;
connection.connect(jid, password, function (status, msg) {
if (status === Strophe.Status.CONNECTED) {
2013-12-16 11:22:23 +00:00
console.log('connected');
if (config.useStunTurn) {
connection.jingle.getStunAndTurnCredentials();
}
2013-12-16 11:22:23 +00:00
document.getElementById('connect').disabled = true;
if(password)
authenticatedUser = true;
2014-08-25 13:29:54 +00:00
maybeDoJoin();
} else if (status === Strophe.Status.CONNFAIL) {
if(msg === 'x-strophe-bad-non-anon-jid') {
anonymousConnectionFailed = true;
}
console.log('status', status);
} else if (status === Strophe.Status.DISCONNECTED) {
if(anonymousConnectionFailed) {
// prompt user for username and password
$(document).trigger('passwordrequired.main');
}
} else if (status === Strophe.Status.AUTHFAIL) {
// wrong password or username, prompt user
$(document).trigger('passwordrequired.main');
2013-12-16 11:22:23 +00:00
} else {
console.log('status', status);
}
});
}
/**
2014-08-26 11:02:17 +00:00
* We ask for audio and video combined stream in order to get permissions and
* not to ask twice.
*/
2014-04-13 12:30:47 +00:00
function obtainAudioAndVideoPermissions(callback) {
// Get AV
getUserMediaWithConstraints(
['audio', 'video'],
2014-04-13 12:30:47 +00:00
function (avStream) {
2014-08-25 13:04:59 +00:00
callback(avStream);
},
2014-04-13 12:30:47 +00:00
function (error) {
console.error('failed to obtain audio/video stream - stop', error);
2014-08-25 14:02:18 +00:00
},
config.resolution || '360');
}
2014-08-25 13:29:54 +00:00
function maybeDoJoin() {
if (connection && connection.connected && Strophe.getResourceFromJid(connection.jid) // .connected is true while connecting?
&& (connection.jingle.localAudio || connection.jingle.localVideo)) {
doJoin();
}
}
2013-12-16 11:22:23 +00:00
function doJoin() {
var roomnode = null;
var path = window.location.pathname;
var roomjid;
// determinde the room node from the url
// TODO: just the roomnode or the whole bare jid?
if (config.getroomnode && typeof config.getroomnode === 'function') {
// custom function might be responsible for doing the pushstate
roomnode = config.getroomnode(path);
2013-12-16 11:22:23 +00:00
} else {
/* fall back to default strategy
* this is making assumptions about how the URL->room mapping happens.
* It currently assumes deployment at root, with a rewrite like the
* following one (for nginx):
location ~ ^/([a-zA-Z0-9]+)$ {
rewrite ^/(.*)$ / break;
}
*/
if (path.length > 1) {
roomnode = path.substr(1).toLowerCase();
} else {
var word = RoomNameGenerator.generateRoomWithoutSeparator(3);
roomnode = word.toLowerCase();
window.history.pushState('VideoChat',
'Room: ' + word, window.location.pathname + word);
}
2013-12-16 11:22:23 +00:00
}
2014-08-08 13:25:24 +00:00
roomName = roomnode + '@' + config.hosts.muc;
roomjid = roomName;
2013-12-16 11:22:23 +00:00
if (config.useNicks) {
var nick = window.prompt('Your nickname (optional)');
if (nick) {
roomjid += '/' + nick;
} else {
roomjid += '/' + Strophe.getNodeFromJid(connection.jid);
}
} else {
var tmpJid = Strophe.getNodeFromJid(connection.jid);
if(!authenticatedUser)
tmpJid = tmpJid.substr(0, 8);
roomjid += '/' + tmpJid;
2013-12-16 11:22:23 +00:00
}
connection.emuc.doJoin(roomjid);
}
function waitForRemoteVideo(selector, ssrc, stream) {
if (selector.removed || !selector.parent().is(":visible")) {
console.warn("Media removed before had started", selector);
return;
}
if (stream.id === 'mixedmslabel') return;
if (selector[0].currentTime > 0) {
RTC.attachMediaStream(selector, stream); // FIXME: why do i have to do this for FF?
// FIXME: add a class that will associate peer Jid, video.src, it's ssrc and video type
// in order to get rid of too many maps
if (ssrc && selector.attr('src')) {
videoSrcToSsrc[selector.attr('src')] = ssrc;
2013-12-16 11:22:23 +00:00
} else {
console.warn("No ssrc given for video", selector);
2013-12-16 11:22:23 +00:00
}
$(document).trigger('videoactive.jingle', [selector]);
} else {
setTimeout(function () {
waitForRemoteVideo(selector, ssrc, stream);
}, 250);
2013-12-16 11:22:23 +00:00
}
}
$(document).bind('remotestreamadded.jingle', function (event, data, sid) {
2013-12-16 11:22:23 +00:00
var sess = connection.jingle.sessions[sid];
var thessrc;
// look up an associated JID for a stream id
if (data.stream.id.indexOf('mixedmslabel') === -1) {
var ssrclines
= SDPUtil.find_lines(sess.peerconnection.remoteDescription.sdp, 'a=ssrc');
ssrclines = ssrclines.filter(function (line) {
return line.indexOf('mslabel:' + data.stream.label) !== -1;
2014-04-13 12:30:47 +00:00
});
if (ssrclines.length) {
thessrc = ssrclines[0].substring(7).split(' ')[0];
// ok to overwrite the one from focus? might save work in colibri.js
console.log('associated jid', ssrc2jid[thessrc], data.peerjid);
if (ssrc2jid[thessrc]) {
data.peerjid = ssrc2jid[thessrc];
}
}
}
mediaStreams.push(new MediaStream(data, sid, thessrc));
var container;
var remotes = document.getElementById('remoteVideos');
2014-01-24 10:24:18 +00:00
2013-12-30 08:23:23 +00:00
if (data.peerjid) {
VideoLayout.ensurePeerContainerExists(data.peerjid);
container = document.getElementById(
'participant_' + Strophe.getResourceFromJid(data.peerjid));
} else {
if (data.stream.id !== 'mixedmslabel') {
console.error( 'can not associate stream',
data.stream.id,
'with a participant');
// We don't want to add it here since it will cause troubles
return;
}
// FIXME: for the mixed ms we dont need a video -- currently
container = document.createElement('span');
container.id = 'mixedstream';
container.className = 'videocontainer';
remotes.appendChild(container);
Util.playSoundNotification('userJoined');
2013-12-30 08:23:23 +00:00
}
var isVideo = data.stream.getVideoTracks().length > 0;
if (container) {
VideoLayout.addRemoteStreamElement( container,
sid,
data.stream,
data.peerjid,
thessrc);
}
2014-01-24 10:24:18 +00:00
// an attempt to work around https://github.com/jitsi/jitmeet/issues/32
2014-04-13 12:30:47 +00:00
if (isVideo &&
data.peerjid && sess.peerjid === data.peerjid &&
data.stream.getVideoTracks().length === 0 &&
connection.jingle.localVideo.getVideoTracks().length > 0) {
//
window.setTimeout(function () {
sendKeyframe(sess.peerconnection);
}, 3000);
}
2013-12-16 11:22:23 +00:00
});
/**
* Returns the JID of the user to whom given <tt>videoSrc</tt> belongs.
* @param videoSrc the video "src" identifier.
* @returns {null | String} the JID of the user to whom given <tt>videoSrc</tt>
* belongs.
*/
function getJidFromVideoSrc(videoSrc)
{
if (videoSrc === localVideoSrc)
return connection.emuc.myroomjid;
var ssrc = videoSrcToSsrc[videoSrc];
if (!ssrc)
{
return null;
}
return ssrc2jid[ssrc];
}
// an attempt to work around https://github.com/jitsi/jitmeet/issues/32
function sendKeyframe(pc) {
console.log('sendkeyframe', pc.iceConnectionState);
if (pc.iceConnectionState !== 'connected') return; // safe...
pc.setRemoteDescription(
pc.remoteDescription,
function () {
pc.createAnswer(
function (modifiedAnswer) {
2014-04-13 12:30:47 +00:00
pc.setLocalDescription(
modifiedAnswer,
function () {
2014-04-13 12:30:47 +00:00
// noop
},
function (error) {
console.log('triggerKeyframe setLocalDescription failed', error);
}
);
},
function (error) {
console.log('triggerKeyframe createAnswer failed', error);
}
);
},
function (error) {
console.log('triggerKeyframe setRemoteDescription failed', error);
}
);
}
// Really mute video, i.e. dont even send black frames
2014-02-22 13:28:28 +00:00
function muteVideo(pc, unmute) {
// FIXME: this probably needs another of those lovely state safeguards...
// which checks for iceconn == connected and sigstate == stable
pc.setRemoteDescription(pc.remoteDescription,
function () {
pc.createAnswer(
function (answer) {
var sdp = new SDP(answer.sdp);
if (sdp.media.length > 1) {
if (unmute)
sdp.media[1] = sdp.media[1].replace('a=recvonly', 'a=sendrecv');
else
sdp.media[1] = sdp.media[1].replace('a=sendrecv', 'a=recvonly');
sdp.raw = sdp.session + sdp.media.join('');
answer.sdp = sdp.raw;
}
pc.setLocalDescription(answer,
function () {
console.log('mute SLD ok');
},
2014-04-13 12:30:47 +00:00
function (error) {
2014-02-22 13:28:28 +00:00
console.log('mute SLD error');
}
);
},
function (error) {
console.log(error);
}
);
},
function (error) {
console.log('muteVideo SRD error');
}
);
}
2014-06-05 11:09:31 +00:00
/**
* Callback for audio levels changed.
* @param jid JID of the user
* @param audioLevel the audio level value
2014-06-05 11:09:31 +00:00
*/
function audioLevelUpdated(jid, audioLevel)
2014-06-05 11:09:31 +00:00
{
var resourceJid;
if(jid === LocalStatsCollector.LOCAL_JID)
2014-06-05 11:09:31 +00:00
{
resourceJid = AudioLevels.LOCAL_LEVEL;
if(isAudioMuted())
return;
}
else
{
resourceJid = Strophe.getResourceFromJid(jid);
}
2014-06-05 11:09:31 +00:00
AudioLevels.updateAudioLevel(resourceJid, audioLevel);
}
2014-06-05 11:09:31 +00:00
/**
* Starts the {@link StatsCollector} if the feature is enabled in config.js.
*/
function startRtpStatsCollector()
{
stopRTPStatsCollector();
if (config.enableRtpStats)
2014-06-05 11:09:31 +00:00
{
statsCollector = new StatsCollector(
getConferenceHandler().peerconnection, 200, audioLevelUpdated);
2014-06-05 11:09:31 +00:00
statsCollector.start();
}
}
/**
* Stops the {@link StatsCollector}.
*/
function stopRTPStatsCollector()
{
if (statsCollector)
{
statsCollector.stop();
statsCollector = null;
}
}
/**
* Starts the {@link LocalStatsCollector} if the feature is enabled in config.js
* @param stream the stream that will be used for collecting statistics.
*/
function startLocalRtpStatsCollector(stream)
{
if(config.enableRtpStats)
{
localStatsCollector = new LocalStatsCollector(stream, 100, audioLevelUpdated);
localStatsCollector.start();
}
}
/**
* Stops the {@link LocalStatsCollector}.
*/
function stopLocalRtpStatsCollector()
{
if(localStatsCollector)
{
localStatsCollector.stop();
localStatsCollector = null;
}
}
2014-06-05 11:09:31 +00:00
2013-12-16 11:22:23 +00:00
$(document).bind('callincoming.jingle', function (event, sid) {
var sess = connection.jingle.sessions[sid];
2014-02-27 07:19:06 +00:00
// TODO: do we check activecall == null?
activecall = sess;
2014-06-05 11:09:31 +00:00
startRtpStatsCollector();
2014-05-08 09:26:15 +00:00
// Bind data channel listener in case we're a regular participant
if (config.openSctp)
{
bindDataChannelListener(sess.peerconnection);
}
2013-12-16 11:22:23 +00:00
// TODO: check affiliation and/or role
console.log('emuc data for', sess.peerjid, connection.emuc.members[sess.peerjid]);
sess.usedrip = true; // not-so-naive trickle ice
2013-12-16 11:22:23 +00:00
sess.sendAnswer();
sess.accept();
2014-02-27 07:19:06 +00:00
2013-12-16 11:22:23 +00:00
});
2014-06-05 11:09:31 +00:00
$(document).bind('conferenceCreated.jingle', function (event, focus)
{
startRtpStatsCollector();
});
$(document).bind('conferenceCreated.jingle', function (event, focus)
{
2014-05-08 09:26:15 +00:00
// Bind data channel listener in case we're the focus
if (config.openSctp)
{
bindDataChannelListener(focus.peerconnection);
}
2014-06-05 11:09:31 +00:00
});
$(document).bind('callterminated.jingle', function (event, sid, jid, reason) {
// Leave the room if my call has been remotely terminated.
if (connection.emuc.joined && focus == null && reason === 'kick') {
sessionTerminated = true;
connection.emuc.doLeave();
openMessageDialog( "Session Terminated",
"Ouch! You have been kicked out of the meet!");
}
2013-12-16 11:22:23 +00:00
});
$(document).bind('setLocalDescription.jingle', function (event, sid) {
// put our ssrcs into presence so other clients can identify our stream
var sess = connection.jingle.sessions[sid];
var newssrcs = {};
2014-02-26 13:43:55 +00:00
var directions = {};
var localSDP = new SDP(sess.peerconnection.localDescription.sdp);
localSDP.media.forEach(function (media) {
2014-05-08 09:26:15 +00:00
var type = SDPUtil.parse_mid(SDPUtil.find_line(media, 'a=mid:'));
2014-02-26 13:43:55 +00:00
if (SDPUtil.find_line(media, 'a=ssrc:')) {
// assumes a single local ssrc
2014-02-26 13:43:55 +00:00
var ssrc = SDPUtil.find_line(media, 'a=ssrc:').substring(7).split(' ')[0];
newssrcs[type] = ssrc;
2014-02-26 13:43:55 +00:00
directions[type] = (
2014-04-13 12:30:47 +00:00
SDPUtil.find_line(media, 'a=sendrecv') ||
SDPUtil.find_line(media, 'a=recvonly') ||
SDPUtil.find_line(media, 'a=sendonly') ||
SDPUtil.find_line(media, 'a=inactive') ||
2014-04-13 12:30:47 +00:00
'a=sendrecv').substr(2);
}
});
console.log('new ssrcs', newssrcs);
// Have to clear presence map to get rid of removed streams
connection.emuc.clearPresenceMedia();
2014-01-24 10:24:18 +00:00
var i = 0;
Object.keys(newssrcs).forEach(function (mtype) {
2014-01-24 10:24:18 +00:00
i++;
var type = mtype;
// Change video type to screen
2014-04-13 12:30:47 +00:00
if (mtype === 'video' && isUsingScreenStream) {
type = 'screen';
}
connection.emuc.addMediaToPresence(i, type, newssrcs[mtype], directions[mtype]);
});
if (i > 0) {
connection.emuc.sendPresence();
}
});
2013-12-16 11:22:23 +00:00
$(document).bind('joined.muc', function (event, jid, info) {
updateRoomUrl(window.location.href);
document.getElementById('localNick').appendChild(
document.createTextNode(Strophe.getResourceFromJid(jid) + ' (me)')
);
2013-12-16 11:22:23 +00:00
if (Object.keys(connection.emuc.members).length < 1) {
focus = new ColibriFocus(connection, config.hosts.bridge);
if (nickname !== null) {
focus.setEndpointDisplayName(connection.emuc.myroomjid,
nickname);
}
2014-08-08 13:25:24 +00:00
Toolbar.showSipCallButton(true);
Toolbar.showRecordingButton(false);
2013-12-16 11:22:23 +00:00
}
2014-08-08 13:25:24 +00:00
if (!focus)
{
Toolbar.showSipCallButton(false);
}
if (focus && config.etherpad_base) {
Etherpad.init();
}
VideoLayout.showFocusIndicator();
// Add myself to the contact list.
ContactList.addContact(jid);
2014-01-24 10:24:18 +00:00
// Once we've joined the muc show the toolbar
ToolbarToggler.showToolbar();
if (info.displayName)
$(document).trigger('displaynamechanged',
['localVideoContainer', info.displayName + ' (me)']);
2013-12-16 11:22:23 +00:00
});
$(document).bind('entered.muc', function (event, jid, info, pres) {
2013-12-16 11:22:23 +00:00
console.log('entered', jid, info);
2014-07-01 14:02:34 +00:00
console.log('is focus?' + focus ? 'true' : 'false');
// Add Peer's container
VideoLayout.ensurePeerContainerExists(jid);
2013-12-16 11:22:23 +00:00
if (focus !== null) {
// FIXME: this should prepare the video
if (focus.confid === null) {
console.log('make new conference with', jid);
focus.makeConference(Object.keys(connection.emuc.members));
Toolbar.showRecordingButton(true);
2013-12-16 11:22:23 +00:00
} else {
console.log('invite', jid, 'into conference');
focus.addNewParticipant(jid);
}
}
else if (sharedKey) {
Toolbar.updateLockButton();
}
2013-12-16 11:22:23 +00:00
});
$(document).bind('left.muc', function (event, jid) {
console.log('left.muc', jid);
// Need to call this with a slight delay, otherwise the element couldn't be
// found for some reason.
window.setTimeout(function () {
var container = document.getElementById(
'participant_' + Strophe.getResourceFromJid(jid));
if (container) {
// hide here, wait for video to close before removing
$(container).hide();
VideoLayout.resizeThumbnails();
}
}, 10);
// Unlock large video
if (focusedVideoSrc)
{
if (getJidFromVideoSrc(focusedVideoSrc) === jid)
{
console.info("Focused video owner has left the conference");
focusedVideoSrc = null;
}
}
2013-12-16 11:22:23 +00:00
connection.jingle.terminateByJid(jid);
if (focus == null
// I shouldn't be the one that left to enter here.
&& jid !== connection.emuc.myroomjid
&& connection.emuc.myroomjid === connection.emuc.list_members[0]
// If our session has been terminated for some reason
// (kicked, hangup), don't try to become the focus
&& !sessionTerminated) {
2014-02-10 22:25:57 +00:00
console.log('welcome to our new focus... myself');
focus = new ColibriFocus(connection, config.hosts.bridge);
if (nickname !== null) {
focus.setEndpointDisplayName(connection.emuc.myroomjid,
nickname);
}
2014-07-01 14:02:34 +00:00
2014-08-08 13:25:24 +00:00
Toolbar.showSipCallButton(true);
2014-02-10 22:25:57 +00:00
if (Object.keys(connection.emuc.members).length > 0) {
focus.makeConference(Object.keys(connection.emuc.members));
Toolbar.showRecordingButton(true);
2014-02-10 22:25:57 +00:00
}
$(document).trigger('focusechanged.muc', [focus]);
}
2014-02-10 22:25:57 +00:00
else if (focus && Object.keys(connection.emuc.members).length === 0) {
2013-12-16 11:22:23 +00:00
console.log('everyone left');
// FIXME: closing the connection is a hack to avoid some
2014-07-01 14:02:34 +00:00
// problems with reinit
disposeConference();
focus = new ColibriFocus(connection, config.hosts.bridge);
if (nickname !== null) {
focus.setEndpointDisplayName(connection.emuc.myroomjid,
nickname);
}
2014-08-08 13:25:24 +00:00
Toolbar.showSipCallButton(true);
Toolbar.showRecordingButton(false);
2013-12-16 11:22:23 +00:00
}
2014-01-24 10:24:18 +00:00
if (connection.emuc.getPrezi(jid)) {
$(document).trigger('presentationremoved.muc',
[jid, connection.emuc.getPrezi(jid)]);
2014-01-24 10:24:18 +00:00
}
2013-12-16 11:22:23 +00:00
});
$(document).bind('presence.muc', function (event, jid, info, pres) {
// Remove old ssrcs coming from the jid
2014-04-13 12:30:47 +00:00
Object.keys(ssrc2jid).forEach(function (ssrc) {
if (ssrc2jid[ssrc] == jid) {
delete ssrc2jid[ssrc];
}
if (ssrc2videoType[ssrc] == jid) {
2014-04-13 12:30:47 +00:00
delete ssrc2videoType[ssrc];
}
});
$(pres).find('>media[xmlns="http://estos.de/ns/mjs"]>source').each(function (idx, ssrc) {
//console.log(jid, 'assoc ssrc', ssrc.getAttribute('type'), ssrc.getAttribute('ssrc'));
var ssrcV = ssrc.getAttribute('ssrc');
ssrc2jid[ssrcV] = jid;
var type = ssrc.getAttribute('type');
ssrc2videoType[ssrcV] = type;
// might need to update the direction if participant just went from sendrecv to recvonly
if (type === 'video' || type === 'screen') {
var el = $('#participant_' + Strophe.getResourceFromJid(jid) + '>video');
2014-04-13 12:30:47 +00:00
switch (ssrc.getAttribute('direction')) {
case 'sendrecv':
el.show();
break;
case 'recvonly':
el.hide();
// FIXME: Check if we have to change large video
//VideoLayout.updateLargeVideo(el);
break;
}
}
});
if (info.displayName && info.displayName.length > 0)
$(document).trigger('displaynamechanged',
[jid, info.displayName]);
if (focus !== null && info.displayName !== null) {
focus.setEndpointDisplayName(jid, info.displayName);
}
});
$(document).bind('presence.status.muc', function (event, jid, info, pres) {
VideoLayout.setPresenceStatus(
'participant_' + Strophe.getResourceFromJid(jid), info.status);
});
$(document).bind('passwordrequired.muc', function (event, jid) {
console.log('on password required', jid);
$.prompt('<h2>Password required</h2>' +
2014-04-13 12:30:47 +00:00
'<input id="lockKey" type="text" placeholder="shared key" autofocus>', {
persistent: true,
buttons: { "Ok": true, "Cancel": false},
defaultButton: 1,
loaded: function (event) {
document.getElementById('lockKey').focus();
},
submit: function (e, v, m, f) {
if (v) {
var lockKey = document.getElementById('lockKey');
2014-04-13 12:30:47 +00:00
if (lockKey.value !== null) {
setSharedKey(lockKey.value);
connection.emuc.doJoin(jid, lockKey.value);
}
2014-04-13 12:30:47 +00:00
}
}
});
});
$(document).bind('passwordrequired.main', function (event) {
console.log('password is required');
$.prompt('<h2>Password required</h2>' +
'<input id="passwordrequired.username" type="text" placeholder="user@domain.net" autofocus>' +
'<input id="passwordrequired.password" type="password" placeholder="user password">', {
persistent: true,
buttons: { "Ok": true, "Cancel": false},
defaultButton: 1,
loaded: function (event) {
document.getElementById('passwordrequired.username').focus();
},
submit: function (e, v, m, f) {
if (v) {
var username = document.getElementById('passwordrequired.username');
var password = document.getElementById('passwordrequired.password');
if (username.value !== null && password.value != null) {
connect(username.value, password.value);
}
}
}
});
});
/**
* Checks if video identified by given src is desktop stream.
* @param videoSrc eg.
* blob:https%3A//pawel.jitsi.net/9a46e0bd-131e-4d18-9c14-a9264e8db395
* @returns {boolean}
*/
2014-04-13 12:30:47 +00:00
function isVideoSrcDesktop(videoSrc) {
// FIXME: fix this mapping mess...
// figure out if large video is desktop stream or just a camera
var isDesktop = false;
2014-04-13 12:30:47 +00:00
if (localVideoSrc === videoSrc) {
// local video
isDesktop = isUsingScreenStream;
} else {
// Do we have associations...
var videoSsrc = videoSrcToSsrc[videoSrc];
2014-04-13 12:30:47 +00:00
if (videoSsrc) {
var videoType = ssrc2videoType[videoSsrc];
2014-04-13 12:30:47 +00:00
if (videoType) {
// Finally there...
isDesktop = videoType === 'screen';
} else {
console.error("No video type for ssrc: " + videoSsrc);
}
} else {
console.error("No ssrc for src: " + videoSrc);
}
}
return isDesktop;
}
function getConferenceHandler() {
return focus ? focus : activecall;
}
2013-12-16 11:22:23 +00:00
function toggleVideo() {
if (!(connection && connection.jingle.localVideo))
return;
2014-03-13 13:01:54 +00:00
var sess = getConferenceHandler();
if (sess) {
2014-03-13 13:01:54 +00:00
sess.toggleVideoMute(
2014-04-13 12:30:47 +00:00
function (isMuted) {
if (isMuted) {
$('#video').removeClass("icon-camera");
$('#video').addClass("icon-camera icon-camera-disabled");
2014-03-13 13:01:54 +00:00
} else {
$('#video').removeClass("icon-camera icon-camera-disabled");
$('#video').addClass("icon-camera");
2014-03-13 13:01:54 +00:00
}
}
);
2014-02-27 07:19:06 +00:00
}
2014-04-13 12:30:47 +00:00
sess = focus || activecall;
if (!sess) {
return;
}
sess.pendingop = ismuted ? 'unmute' : 'mute';
// connection.emuc.addVideoInfoToPresence(!ismuted);
// connection.emuc.sendPresence();
sess.modifySources();
2013-12-16 11:22:23 +00:00
}
/**
* Mutes / unmutes audio for the local participant.
*/
2013-12-16 11:22:23 +00:00
function toggleAudio() {
if (!(connection && connection.jingle.localAudio)) {
preMuted = true;
// We still click the button.
buttonClick("#mute", "icon-microphone icon-mic-disabled");
return;
}
var localAudio = connection.jingle.localAudio;
for (var idx = 0; idx < localAudio.getAudioTracks().length; idx++) {
var audioEnabled = localAudio.getAudioTracks()[idx].enabled;
localAudio.getAudioTracks()[idx].enabled = !audioEnabled;
// isMuted is the opposite of audioEnabled
connection.emuc.addAudioInfoToPresence(audioEnabled);
connection.emuc.sendPresence();
2013-12-16 11:22:23 +00:00
}
buttonClick("#mute", "icon-microphone icon-mic-disabled");
2013-12-16 11:22:23 +00:00
}
/**
* Checks whether the audio is muted or not.
* @returns {boolean} true if audio is muted and false if not.
*/
function isAudioMuted()
{
var localAudio = connection.jingle.localAudio;
for (var idx = 0; idx < localAudio.getAudioTracks().length; idx++) {
if(localAudio.getAudioTracks()[idx].enabled === true)
return false;
}
return true;
}
2014-07-01 14:02:34 +00:00
// Starts or stops the recording for the conference.
function toggleRecording() {
if (focus === null || focus.confid === null) {
console.log('non-focus, or conference not yet organized: not enabling recording');
return;
}
if (!recordingToken)
{
$.prompt('<h2>Enter recording token</h2>' +
'<input id="recordingToken" type="text" placeholder="token" autofocus>',
{
persistent: false,
buttons: { "Save": true, "Cancel": false},
defaultButton: 1,
loaded: function (event) {
document.getElementById('recordingToken').focus();
},
submit: function (e, v, m, f) {
if (v) {
var token = document.getElementById('recordingToken');
if (token.value) {
setRecordingToken(Util.escapeHtml(token.value));
toggleRecording();
}
}
}
}
);
return;
}
var oldState = focus.recordingEnabled;
Toolbar.toggleRecordingButtonState();
2014-07-01 14:02:34 +00:00
focus.setRecording(!oldState,
recordingToken,
function (state) {
console.log("New recording state: ", state);
if (state == oldState) //failed to change, reset the token because it might have been wrong
{
Toolbar.toggleRecordingButtonState();
2014-07-01 14:02:34 +00:00
setRecordingToken(null);
}
}
);
}
/**
* Returns an array of the video horizontal and vertical indents,
* so that if fits its parent.
*
* @return an array with 2 elements, the horizontal indent and the vertical
* indent
*/
2014-04-13 12:30:47 +00:00
function getCameraVideoPosition(videoWidth,
videoHeight,
videoSpaceWidth,
videoSpaceHeight) {
// Parent height isn't completely calculated when we position the video in
// full screen mode and this is why we use the screen height in this case.
// Need to think it further at some point and implement it properly.
2014-04-13 12:30:47 +00:00
var isFullScreen = document.fullScreen ||
document.mozFullScreen ||
document.webkitIsFullScreen;
if (isFullScreen)
videoSpaceHeight = window.innerHeight;
2014-04-13 12:30:47 +00:00
var horizontalIndent = (videoSpaceWidth - videoWidth) / 2;
var verticalIndent = (videoSpaceHeight - videoHeight) / 2;
return [horizontalIndent, verticalIndent];
2014-03-28 09:37:14 +00:00
}
/**
* Returns an array of the video horizontal and vertical indents.
* Centers horizontally and top aligns vertically.
*
* @return an array with 2 elements, the horizontal indent and the vertical
* indent
*/
2014-04-13 12:30:47 +00:00
function getDesktopVideoPosition(videoWidth,
videoHeight,
videoSpaceWidth,
videoSpaceHeight) {
2014-03-28 09:37:14 +00:00
2014-04-13 12:30:47 +00:00
var horizontalIndent = (videoSpaceWidth - videoWidth) / 2;
2014-03-28 09:37:14 +00:00
var verticalIndent = 0;// Top aligned
return [horizontalIndent, verticalIndent];
}
2013-12-16 11:22:23 +00:00
/**
* Returns an array of the video dimensions, so that it covers the screen.
* It leaves no empty areas, but some parts of the video might not be visible.
*
* @return an array with 2 elements, the video width and the video height
*/
2014-03-28 09:37:14 +00:00
function getCameraVideoSize(videoWidth,
videoHeight,
videoSpaceWidth,
videoSpaceHeight) {
if (!videoWidth)
videoWidth = currentVideoWidth;
if (!videoHeight)
videoHeight = currentVideoHeight;
var aspectRatio = videoWidth / videoHeight;
var availableWidth = Math.max(videoWidth, videoSpaceWidth);
var availableHeight = Math.max(videoHeight, videoSpaceHeight);
if (availableWidth / aspectRatio < videoSpaceHeight) {
availableHeight = videoSpaceHeight;
2014-04-13 12:30:47 +00:00
availableWidth = availableHeight * aspectRatio;
2013-12-16 11:22:23 +00:00
}
2014-01-28 14:11:05 +00:00
2014-04-13 12:30:47 +00:00
if (availableHeight * aspectRatio < videoSpaceWidth) {
availableWidth = videoSpaceWidth;
availableHeight = availableWidth / aspectRatio;
2014-01-28 14:11:05 +00:00
}
return [availableWidth, availableHeight];
}
2013-12-16 11:22:23 +00:00
$(document).ready(function () {
2014-09-02 10:42:35 +00:00
document.title = brand.appName;
2014-08-21 16:42:54 +00:00
if(config.enableWelcomePage && window.location.pathname == "/" &&
(!window.localStorage.welcomePageDisabled || window.localStorage.welcomePageDisabled == "false"))
2014-08-21 16:42:54 +00:00
{
$("#videoconference_page").hide();
2014-09-02 10:42:35 +00:00
$("#domain_name").text(window.location.protocol + "//" + window.location.host + "/");
2014-08-26 10:54:43 +00:00
$("span[name='appName']").text(brand.appName);
function enter_room()
2014-08-21 16:42:54 +00:00
{
2014-08-26 10:54:43 +00:00
var val = $("#enter_room_field").val();
if(!val)
2014-08-27 08:43:43 +00:00
val = $("#enter_room_field").attr("room_name");
2014-08-21 16:42:54 +00:00
window.location.pathname = "/" + val;
}
$("#enter_room_button").click(function()
{
enter_room();
2014-08-21 16:42:54 +00:00
});
$("#enter_room_field").keydown(function (event) {
if (event.keyCode === 13) {
enter_room();
2014-08-21 16:42:54 +00:00
}
});
var updateTimeout;
var animateTimeout;
$("#reload_roomname").click(function () {
clearTimeout(updateTimeout);
clearTimeout(animateTimeout);
update_roomname();
});
2014-08-26 10:54:43 +00:00
function animate(word) {
var currentVal = $("#enter_room_field").attr("placeholder");
$("#enter_room_field").attr("placeholder", currentVal + word.substr(0, 1));
animateTimeout = setTimeout(function() {
2014-08-26 10:54:43 +00:00
animate(word.substring(1, word.length))
}, 70);
2014-08-26 10:54:43 +00:00
}
2014-08-26 10:54:43 +00:00
function update_roomname()
{
2014-08-27 08:43:43 +00:00
var word = RoomNameGenerator.generateRoomWithoutSeparator();
$("#enter_room_field").attr("room_name", word);
2014-08-26 10:54:43 +00:00
$("#enter_room_field").attr("placeholder", "");
2014-08-27 08:43:43 +00:00
animate(word);
updateTimeout = setTimeout(update_roomname, 10000);
2014-08-26 10:54:43 +00:00
}
update_roomname();
$("#disable_welcome").click(function () {
window.localStorage.welcomePageDisabled = $("#disable_welcome").is(":checked");
});
2014-08-21 16:42:54 +00:00
return;
}
$("#welcome_page").hide();
Chat.init();
2013-12-16 11:22:23 +00:00
2014-06-18 11:42:31 +00:00
$('body').popover({ selector: '[data-toggle=popover]',
trigger: 'click hover'});
2014-01-24 10:24:18 +00:00
// Set the defaults for prompt dialogs.
jQuery.prompt.setDefaults({persistent: false});
// Set default desktop sharing method
setDesktopSharing(config.desktopSharing);
// Initialize Chrome extension inline installs
2014-04-13 12:30:47 +00:00
if (config.chromeExtensionId) {
initInlineInstalls();
}
2014-03-28 09:37:14 +00:00
// By default we use camera
getVideoSize = getCameraVideoSize;
getVideoPosition = getCameraVideoPosition;
VideoLayout.resizeLargeVideoContainer();
2013-12-16 11:22:23 +00:00
$(window).resize(function () {
VideoLayout.resizeLargeVideoContainer();
VideoLayout.positionLarge();
2013-12-16 11:22:23 +00:00
});
// Listen for large video size updates
document.getElementById('largeVideo')
2014-04-13 12:30:47 +00:00
.addEventListener('loadedmetadata', function (e) {
currentVideoWidth = this.videoWidth;
currentVideoHeight = this.videoHeight;
VideoLayout.positionLarge(currentVideoWidth, currentVideoHeight);
});
2013-12-16 11:22:23 +00:00
if (!$('#settings').is(':visible')) {
console.log('init');
init();
} else {
loginInfo.onsubmit = function (e) {
if (e.preventDefault) e.preventDefault();
$('#settings').hide();
init();
};
}
});
$(window).bind('beforeunload', function () {
2013-12-16 11:22:23 +00:00
if (connection && connection.connected) {
// ensure signout
$.ajax({
type: 'POST',
url: config.bosh,
async: false,
cache: false,
contentType: 'application/xml',
data: "<body rid='" + (connection.rid || connection._proto.rid) + "' xmlns='http://jabber.org/protocol/httpbind' sid='" + (connection.sid || connection._proto.sid) + "' type='terminate'><presence xmlns='jabber:client' type='unavailable'/></body>",
success: function (data) {
console.log('signed out');
console.log(data);
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
console.log('signout error', textStatus + ' (' + errorThrown + ')');
}
});
}
disposeConference(true);
2013-12-16 11:22:23 +00:00
});
function disposeConference(onUnload) {
var handler = getConferenceHandler();
2014-04-13 12:30:47 +00:00
if (handler && handler.peerconnection) {
// FIXME: probably removing streams is not required and close() should be enough
2014-04-13 12:30:47 +00:00
if (connection.jingle.localAudio) {
handler.peerconnection.removeStream(connection.jingle.localAudio);
}
2014-04-13 12:30:47 +00:00
if (connection.jingle.localVideo) {
handler.peerconnection.removeStream(connection.jingle.localVideo);
}
handler.peerconnection.close();
}
stopRTPStatsCollector();
if(onUnload) {
stopLocalRtpStatsCollector();
}
focus = null;
activecall = null;
}
2014-04-13 12:30:47 +00:00
function dump(elem, filename) {
2013-12-22 18:46:01 +00:00
elem = elem.parentNode;
elem.download = filename || 'meetlog.json';
2013-12-22 18:39:41 +00:00
elem.href = 'data:application/json;charset=utf-8,\n';
var data = {};
if (connection.jingle) {
Object.keys(connection.jingle.sessions).forEach(function (sid) {
var session = connection.jingle.sessions[sid];
if (session.peerconnection && session.peerconnection.updateLog) {
// FIXME: should probably be a .dump call
data["jingle_" + session.sid] = {
updateLog: session.peerconnection.updateLog,
2014-02-05 20:34:59 +00:00
stats: session.peerconnection.stats,
2014-04-13 12:30:47 +00:00
url: window.location.href
};
2013-12-22 18:39:41 +00:00
}
});
}
metadata = {};
metadata.time = new Date();
metadata.url = window.location.href;
metadata.ua = navigator.userAgent;
if (connection.logger) {
metadata.xmpp = connection.logger.log;
}
data.metadata = metadata;
2013-12-22 18:39:41 +00:00
elem.href += encodeURIComponent(JSON.stringify(data, null, ' '));
return false;
}
/**
* Changes the style class of the element given by id.
*/
2013-12-16 11:22:23 +00:00
function buttonClick(id, classname) {
$(id).toggleClass(classname); // add the class to the clicked element
}
/**
* Shows a message to the user.
*
* @param titleString the title of the message
* @param messageString the text of the message
*/
function openMessageDialog(titleString, messageString) {
$.prompt(messageString,
{
title: titleString,
persistent: false
}
);
}
/**
* Locks / unlocks the room.
*/
2013-12-16 11:22:23 +00:00
function lockRoom(lock) {
if (lock)
connection.emuc.lockRoom(sharedKey);
else
connection.emuc.lockRoom('');
Toolbar.updateLockButton();
}
/**
* Sets the shared key.
*/
function setSharedKey(sKey) {
sharedKey = sKey;
}
2014-07-01 14:02:34 +00:00
function setRecordingToken(token) {
recordingToken = token;
}
/**
* Updates the room invite url.
*/
2013-12-16 11:22:23 +00:00
function updateRoomUrl(newRoomUrl) {
roomUrl = newRoomUrl;
// If the invite dialog has been already opened we update the information.
var inviteLink = document.getElementById('inviteLinkRef');
if (inviteLink) {
inviteLink.value = roomUrl;
inviteLink.select();
document.getElementById('jqi_state0_buttonInvite').disabled = false;
}
2013-12-16 11:22:23 +00:00
}
/**
* Warning to the user that the conference window is about to be closed.
*/
function closePageWarning() {
if (focus !== null)
return "You are the owner of this conference call and"
+ " you are about to end it.";
else
return "You are about to leave this conversation.";
}
/**
* Resizes and repositions videos in full screen mode.
*/
$(document).on('webkitfullscreenchange mozfullscreenchange fullscreenchange',
2014-04-13 12:30:47 +00:00
function () {
VideoLayout.resizeLargeVideoContainer();
VideoLayout.positionLarge();
2014-04-13 12:30:47 +00:00
isFullScreen = document.fullScreen ||
document.mozFullScreen ||
document.webkitIsFullScreen;
if (isFullScreen) {
setView("fullscreen");
}
else {
setView("default");
}
}
);
/**
* Sets the current view.
*/
function setView(viewName) {
// if (viewName == "fullscreen") {
// document.getElementById('videolayout_fullscreen').disabled = false;
// document.getElementById('videolayout_default').disabled = true;
// }
// else {
// document.getElementById('videolayout_default').disabled = false;
// document.getElementById('videolayout_fullscreen').disabled = true;
// }
2014-04-07 09:51:33 +00:00
}
function hangUp() {
if (connection && connection.connected) {
// ensure signout
$.ajax({
type: 'POST',
url: config.bosh,
async: false,
cache: false,
contentType: 'application/xml',
data: "<body rid='" + (connection.rid || connection._proto.rid) + "' xmlns='http://jabber.org/protocol/httpbind' sid='" + (connection.sid || connection._proto.sid) + "' type='terminate'><presence xmlns='jabber:client' type='unavailable'/></body>",
success: function (data) {
console.log('signed out');
console.log(data);
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
console.log('signout error', textStatus + ' (' + errorThrown + ')');
}
});
}
disposeConference(true);
}
2014-07-01 14:02:34 +00:00
$(document).bind('fatalError.jingle',
function (event, session, error)
{
sessionTerminated = true;
connection.emuc.doLeave();
openMessageDialog( "Sorry",
"Your browser version is too old. Please update and try again...");
}
);
2014-08-08 13:25:24 +00:00
function callSipButtonClicked()
{
$.prompt('<h2>Enter SIP number</h2>' +
2014-08-19 12:07:48 +00:00
'<input id="sipNumber" type="text" value="" autofocus>',
2014-08-08 13:25:24 +00:00
{
persistent: false,
buttons: { "Dial": true, "Cancel": false},
defaultButton: 2,
loaded: function (event)
{
document.getElementById('sipNumber').focus();
},
submit: function (e, v, m, f)
{
if (v)
{
var numberInput = document.getElementById('sipNumber');
2014-08-19 12:07:48 +00:00
if (numberInput.value && numberInput.value.length)
2014-08-08 13:25:24 +00:00
{
connection.rayo.dial(
numberInput.value, 'fromnumber', roomName);
}
}
}
}
);
}
function hangup() {
disposeConference();
sessionTerminated = true;
connection.emuc.doLeave();
var buttons = {};
if(config.enableWelcomePage)
{
setTimeout(function()
{
window.localStorage.welcomePageDisabled = false;
window.location.pathname = "/";
}, 10000);
}
$.prompt("Session Terminated",
{
title: "You hung up the call",
persistent: true,
buttons: {
"Join again": true
},
closeText: '',
submit: function(event, value, message, formVals)
{
window.location.reload();
return false;
}
}
);
}