/* jshint -W117 */ /* application specific logic */ var connection = null; var authenticatedUser = false; var focus = null; var activecall = null; var RTC = null; var nickname = null; var sharedKey = ''; var recordingToken =''; var roomUrl = null; var roomName = null; var ssrc2jid = {}; var mediaStreams = []; var bridgeIsDown = false; /** * 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 currentVideoWidth = null; var currentVideoHeight = null; /** * Method used to calculate large video size. * @type {function ()} */ var getVideoSize; /** * Method used to get large video position. * @type {function ()} */ var getVideoPosition; /* window.onbeforeunload = closePageWarning; */ var sessionTerminated = false; function init() { Toolbar.setupButtonsFromConfig(); RTC = setupRTC(); if (RTC === null) { window.location.href = 'webrtcrequired.html'; return; } else if (RTC.browser !== 'chrome') { window.location.href = 'chromeonly.html'; return; } obtainAudioAndVideoPermissions(function (stream) { var audioStream = new webkitMediaStream(); var videoStream = new webkitMediaStream(); var audioTracks = stream.getAudioTracks(); var videoTracks = stream.getVideoTracks(); for (var i = 0; i < audioTracks.length; i++) { audioStream.addTrack(audioTracks[i]); } VideoLayout.changeLocalAudio(audioStream); startLocalRtpStatsCollector(audioStream); for (i = 0; i < videoTracks.length; i++) { videoStream.addTrack(videoTracks[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; } connection = new Strophe.Connection(document.getElementById('boshURL').value || config.bosh || '/http-bind'); if (nickname) { connection.emuc.addDisplayNameToPresence(nickname); } if (connection.disco) { // for chrome, add multistream cap } 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; if(!password) password = document.getElementById('password').value; var anonymousConnectionFailed = false; connection.connect(jid, password, function (status, msg) { console.log('Strophe status changed to', Strophe.getStatusString(status)); if (status === Strophe.Status.CONNECTED) { if (config.useStunTurn) { connection.jingle.getStunAndTurnCredentials(); } document.getElementById('connect').disabled = true; if(password) authenticatedUser = true; maybeDoJoin(); } else if (status === Strophe.Status.CONNFAIL) { if(msg === 'x-strophe-bad-non-anon-jid') { anonymousConnectionFailed = true; } } 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'); } }); } /** * We ask for audio and video combined stream in order to get permissions and * not to ask twice. */ function obtainAudioAndVideoPermissions(callback) { // Get AV getUserMediaWithConstraints( ['audio', 'video'], function (avStream) { callback(avStream); trackUsage('localMedia', { audio: avStream.getAudioTracks().length, video: avStream.getVideoTracks().length }); }, function (error) { console.error('failed to obtain audio/video stream - stop', error); trackUsage('localMediaError', { media: error.media || 'video', name : error.name }); messageHandler.showError("Error", "Failed to obtain permissions to use the local microphone" + "and/or camera."); }, config.resolution || '360'); } function maybeDoJoin() { if (connection && connection.connected && Strophe.getResourceFromJid(connection.jid) // .connected is true while connecting? && (connection.jingle.localAudio || connection.jingle.localVideo)) { doJoin(); } } 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); } 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(); roomnode = word.toLowerCase(); window.history.pushState('VideoChat', 'Room: ' + word, window.location.pathname + word); } } roomName = roomnode + '@' + config.hosts.muc; roomjid = roomName; 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; } 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) { var videoStream = simulcast.getReceivingVideoStream(stream); RTC.attachMediaStream(selector, videoStream); // 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; } else { console.warn("No ssrc given for video", selector); messageHandler.showError('Warning', 'No ssrc was given for the video.'); } $(document).trigger('videoactive.jingle', [selector]); } else { setTimeout(function () { waitForRemoteVideo(selector, ssrc, stream); }, 250); } } $(document).bind('remotestreamadded.jingle', function (event, data, sid) { waitForPresence(data, sid); }); function waitForPresence(data, sid) { var sess = connection.jingle.sessions[sid]; var thessrc; // look up an associated JID for a stream id if (data.stream.id.indexOf('mixedmslabel') === -1) { // look only at a=ssrc: and _not_ at a=ssrc-group: lines var ssrclines = SDPUtil.find_lines(sess.peerconnection.remoteDescription.sdp, 'a=ssrc:'); ssrclines = ssrclines.filter(function (line) { // NOTE(gp) previously we filtered on the mslabel, but that property // is not always present. // return line.indexOf('mslabel:' + data.stream.label) !== -1; return line.indexOf('msid:' + data.stream.id) !== -1; }); if (ssrclines.length) { thessrc = ssrclines[0].substring(7).split(' ')[0]; // We signal our streams (through Jingle to the focus) before we set // our presence (through which peers associate remote streams to // jids). So, it might arrive that a remote stream is added but // ssrc2jid is not yet updated and thus data.peerjid cannot be // successfully set. Here we wait for up to a second for the // presence to arrive. if (!ssrc2jid[thessrc]) { // TODO(gp) limit wait duration to 1 sec. setTimeout(function(d, s) { return function() { waitForPresence(d, s); } }(data, sid), 250); return; } // 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]; } } } // NOTE(gp) now that we have simulcast, a media stream can have more than 1 // ssrc. We should probably take that into account in our MediaStream // wrapper. mediaStreams.push(new MediaStream(data, sid, thessrc)); var container; var remotes = document.getElementById('remoteVideos'); 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'); messageHandler.showError('Oops', 'We could not associate the current stream 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'); } var isVideo = data.stream.getVideoTracks().length > 0; if (container) { VideoLayout.addRemoteStreamElement( container, sid, data.stream, data.peerjid, thessrc); } // an attempt to work around https://github.com/jitsi/jitmeet/issues/32 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); } } /** * Returns the JID of the user to whom given videoSrc belongs. * @param videoSrc the video "src" identifier. * @returns {null | String} the JID of the user to whom given videoSrc * 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) { pc.setLocalDescription( modifiedAnswer, function () { // noop }, function (error) { console.log('triggerKeyframe setLocalDescription failed', error); messageHandler.showError(); } ); }, function (error) { console.log('triggerKeyframe createAnswer failed', error); messageHandler.showError(); } ); }, function (error) { console.log('triggerKeyframe setRemoteDescription failed', error); messageHandler.showError(); } ); } // Really mute video, i.e. dont even send black frames 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'); }, function (error) { console.log('mute SLD error'); messageHandler.showError('Error', 'Oops! Something went wrong and we failed to ' + 'mute! (SLD Failure)'); } ); }, function (error) { console.log(error); messageHandler.showError(); } ); }, function (error) { console.log('muteVideo SRD error'); messageHandler.showError('Error', 'Oops! Something went wrong and we failed to stop video!' + '(SRD Failure)'); } ); } /** * Callback for audio levels changed. * @param jid JID of the user * @param audioLevel the audio level value */ function audioLevelUpdated(jid, audioLevel) { var resourceJid; if(jid === LocalStatsCollector.LOCAL_JID) { resourceJid = AudioLevels.LOCAL_LEVEL; if(isAudioMuted()) { audioLevel = 0; } } else { resourceJid = Strophe.getResourceFromJid(jid); } AudioLevels.updateAudioLevel(resourceJid, audioLevel); } /** * Starts the {@link StatsCollector} if the feature is enabled in config.js. */ function startRtpStatsCollector() { stopRTPStatsCollector(); if (config.enableRtpStats) { statsCollector = new StatsCollector( getConferenceHandler().peerconnection, 200, audioLevelUpdated); 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; } } $(document).bind('callincoming.jingle', function (event, sid) { var sess = connection.jingle.sessions[sid]; // TODO: do we check activecall == null? activecall = sess; startRtpStatsCollector(); // Bind data channel listener in case we're a regular participant if (config.openSctp) { bindDataChannelListener(sess.peerconnection); } // 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 sess.sendAnswer(); sess.accept(); }); $(document).bind('conferenceCreated.jingle', function (event, focus) { startRtpStatsCollector(); }); $(document).bind('conferenceCreated.jingle', function (event, focus) { // Bind data channel listener in case we're the focus if (config.openSctp) { bindDataChannelListener(focus.peerconnection); } }); $(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(); messageHandler.openMessageDialog("Session Terminated", "Ouch! You have been kicked out of the meet!"); } }); $(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 = []; var media = simulcast.parseMedia(sess.peerconnection.localDescription); media.forEach(function (media) { // TODO(gp) maybe exclude FID streams? Object.keys(media.sources).forEach(function(ssrc) { newssrcs.push({ 'ssrc': ssrc, 'type': media.type, 'direction': media.direction }); }); }); console.log('new ssrcs', newssrcs); // Have to clear presence map to get rid of removed streams connection.emuc.clearPresenceMedia(); if (newssrcs.length > 0) { for (var i = 1; i <= newssrcs.length; i ++) { // Change video type to screen if (newssrcs[i-1].type === 'video' && isUsingScreenStream) { newssrcs[i-1].type = 'screen'; } connection.emuc.addMediaToPresence(i, newssrcs[i-1].type, newssrcs[i-1].ssrc, newssrcs[i-1].direction); } connection.emuc.sendPresence(); } }); $(document).bind('iceconnectionstatechange.jingle', function (event, sid, session) { switch (session.peerconnection.iceConnectionState) { case 'checking': session.timeChecking = (new Date()).getTime(); session.firstconnect = true; break; case 'completed': // on caller side case 'connected': if (session.firstconnect) { session.firstconnect = false; var metadata = {}; metadata.setupTime = (new Date()).getTime() - session.timeChecking; session.peerconnection.getStats(function (res) { res.result().forEach(function (report) { if (report.type == 'googCandidatePair' && report.stat('googActiveConnection') == 'true') { metadata.localCandidateType = report.stat('googLocalCandidateType'); metadata.remoteCandidateType = report.stat('googRemoteCandidateType'); // log pair as well so we can get nice pie charts metadata.candidatePair = report.stat('googLocalCandidateType') + ';' + report.stat('googRemoteCandidateType'); if (report.stat('googRemoteAddress').indexOf('[') === 0) { metadata.ipv6 = true; } } }); trackUsage('iceConnected', metadata); }); } break; } }); $(document).bind('joined.muc', function (event, jid, info) { updateRoomUrl(window.location.href); document.getElementById('localNick').appendChild( document.createTextNode(Strophe.getResourceFromJid(jid) + ' (me)') ); if (Object.keys(connection.emuc.members).length < 1) { focus = new ColibriFocus(connection, config.hosts.bridge); if (nickname !== null) { focus.setEndpointDisplayName(connection.emuc.myroomjid, nickname); } Toolbar.showSipCallButton(true); Toolbar.showRecordingButton(false); } if (!focus) { Toolbar.showSipCallButton(false); } if (focus && config.etherpad_base) { Etherpad.init(); } VideoLayout.showFocusIndicator(); // Add myself to the contact list. ContactList.addContact(jid); // Once we've joined the muc show the toolbar ToolbarToggler.showToolbar(); if (info.displayName) $(document).trigger('displaynamechanged', ['localVideoContainer', info.displayName + ' (me)']); }); $(document).bind('entered.muc', function (event, jid, info, pres) { console.log('entered', jid, info); console.log('is focus? ' + (focus ? 'true' : 'false')); // Add Peer's container VideoLayout.ensurePeerContainerExists(jid); 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), function(error) { connection.emuc.addBridgeIsDownToPresence(); connection.emuc.sendPresence(); } ); Toolbar.showRecordingButton(true); } else { console.log('invite', jid, 'into conference'); focus.addNewParticipant(jid); } } else if (sharedKey) { Toolbar.updateLockButton(); } }); $(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; } } 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) { console.log('welcome to our new focus... myself'); focus = new ColibriFocus(connection, config.hosts.bridge); if (nickname !== null) { focus.setEndpointDisplayName(connection.emuc.myroomjid, nickname); } Toolbar.showSipCallButton(true); if (Object.keys(connection.emuc.members).length > 0) { focus.makeConference(Object.keys(connection.emuc.members)); Toolbar.showRecordingButton(true); } $(document).trigger('focusechanged.muc', [focus]); } else if (focus && Object.keys(connection.emuc.members).length === 0) { console.log('everyone left'); // FIXME: closing the connection is a hack to avoid some // problems with reinit disposeConference(); focus = new ColibriFocus(connection, config.hosts.bridge); if (nickname !== null) { focus.setEndpointDisplayName(connection.emuc.myroomjid, nickname); } Toolbar.showSipCallButton(true); Toolbar.showRecordingButton(false); } if (connection.emuc.getPrezi(jid)) { $(document).trigger('presentationremoved.muc', [jid, connection.emuc.getPrezi(jid)]); } }); $(document).bind('presence.muc', function (event, jid, info, pres) { // Remove old ssrcs coming from the jid Object.keys(ssrc2jid).forEach(function (ssrc) { if (ssrc2jid[ssrc] == jid) { delete ssrc2jid[ssrc]; } if (ssrc2videoType[ssrc] == jid) { 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'); 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); } //check if the video bridge is available if($(pres).find(">bridgeIsDown").length > 0 && !bridgeIsDown) { bridgeIsDown = true; messageHandler.showError("Error", "Jitsi Videobridge is currently unavailable. Please try again later!"); } }); $(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); messageHandler.openTwoButtonDialog(null, '