Source: jsxc.lib.webrtc.js

  1. /* global MediaStreamTrack, File */
  2. /* jshint -W020 */
  4. /**
  5.  * WebRTC namespace for jsxc.
  6.  *
  7.  * @namespace jsxc.webrtc
  8.  */
  9. jsxc.webrtc = {
  10.    /** strophe connection */
  11.    conn: null,
  13.    /** local video stream */
  14.    localStream: null,
  16.    /** remote video stream */
  17.    remoteStream: null,
  19.    /** jid of the last caller */
  20.    last_caller: null,
  22.    /** should we auto accept incoming calls? */
  23.    AUTO_ACCEPT: false,
  25.    /** required disco features for video call */
  26.    reqVideoFeatures: ['urn:xmpp:jingle:apps:rtp:video', 'urn:xmpp:jingle:apps:rtp:audio', 'urn:xmpp:jingle:transports:ice-udp:1', 'urn:xmpp:jingle:apps:dtls:0'],
  28.    /** required disco features for file transfer */
  29.    reqFileFeatures: ['urn:xmpp:jingle:1', 'urn:xmpp:jingle:apps:file-transfer:3'],
  31.    /** bare jid to current jid mapping */
  32.    chatJids: {},
  34.    CONST: {
  35.       NS: {
  36.          EXTDISCO: 'urn:xmpp:extdisco:2'
  37.       }
  38.    },
  40.    /**
  41.     * Initialize webrtc plugin.
  42.     *
  43.     * @private
  44.     * @memberOf jsxc.webrtc
  45.     */
  46.    init: function() {
  47.       var self = jsxc.webrtc;
  49.       // shortcut
  50.       self.conn = jsxc.xmpp.conn;
  52.       if (!self.conn.jingle) {
  53.          jsxc.error('No jingle plugin found!');
  54.          return;
  55.       }
  57.       var manager = self.conn.jingle.manager;
  59.       $(document).on('message.jsxc', self.onMessage);
  60.       $(document).on('presence.jsxc', self.onPresence);
  62.       $(document).on('mediafailure.jingle', self.onMediaFailure);
  64.       manager.on('incoming', $.proxy(self.onIncoming, self));
  66.       // @REVIEW those events could be session based
  67.       manager.on('terminated', $.proxy(self.onTerminated, self));
  68.       manager.on('ringing', $.proxy(self.onCallRinging, self));
  70.       manager.on('receivedFile', $.proxy(self.onReceivedFile, self));
  71.       manager.on('sentFile', function(sess, metadata) {
  72.          jsxc.debug('sent ' + metadata.hash);
  73.       });
  75.       // @REVIEW those events could be session based
  76.       manager.on('peerStreamAdded', $.proxy(self.onRemoteStreamAdded, self));
  77.       manager.on('peerStreamRemoved', $.proxy(self.onRemoteStreamRemoved, self));
  79.       manager.on('log:*', function(level, msg) {
  80.          jsxc.debug('[JINGLE][' + level + ']', msg);
  81.       });
  83.       if (self.conn.caps) {
  84.          $(document).on('caps.strophe', self.onCaps);
  85.       }
  87.       self.setupIceServers();
  88.    },
  90.    onConnected: function() {
  91.       //Request new credentials after login
  92.       jsxc.storage.removeUserItem('iceValidity');
  93.    },
  95.    onDisconnected: function() {
  96.       var self = jsxc.webrtc;
  98.       $(document).off('message.jsxc', self.onMessage);
  99.       $(document).off('presence.jsxc', self.onPresence);
  101.       $(document).off('mediafailure.jingle', self.onMediaFailure);
  103.       $(document).off('caps.strophe', self.onCaps);
  104.    },
  106.    setupIceServers: function() {
  107.       var self = jsxc.webrtc;
  108.       var ttl = (jsxc.storage.getUserItem('iceValidity') || 0) - (new Date()).getTime();
  110.       // validity from jsxc < 2.1.0 is invalid
  111.       if (jsxc.storage.getUserItem('iceConfig')) {
  112.          jsxc.storage.removeUserItem('iceConfig');
  113.          ttl = -1;
  114.       }
  116.       var url = jsxc.options.get('RTCPeerConfig').url || jsxc.options.turnCredentialsPath;
  117.       var peerConfig = jsxc.options.get('RTCPeerConfig');
  118.       var domain = self.conn.domain;
  120.       if (ttl > 0) {
  121.          // credentials valid
  123.          self.conn.jingle.setICEServers(peerConfig.iceServers);
  125.          window.setTimeout(jsxc.webrtc.setupIceServers, ttl + 500);
  126.       } else if (jsxc.xmpp.conn.caps.hasFeatureByJid(domain, self.CONST.NS.EXTDISCO)) {
  127.          self.getIceServersByExternalDisco();
  128.       } else if (typeof url === 'string' && url.length > 0) {
  129.          self.getIceServersByUrl(url);
  130.       } else {
  131.          self.conn.jingle.setICEServers(peerConfig.iceServers);
  132.       }
  133.    },
  135.    getIceServersByExternalDisco: function() {
  136.       var iq = $iq({
  137.          type: 'get',
  138.          to: jsxc.xmpp.conn.domain
  139.       }).c('services', {
  140.          xmlns: 'urn:xmpp:extdisco:1'
  141.       });
  143.       jsxc.xmpp.conn.sendIQ(iq, parseExtDiscoResponse, function(err) {
  144.          console.warn('getting turn credentials failed', err);
  145.       });
  147.       function parseExtDiscoResponse(res) {
  148.          jsxc.debug('ice servers receiving by xmpp extdisco');
  150.          var iceServers = [];
  151.          var minTtl = 86400;
  153.          $(res).find('>services>service').each(function(idx, el) {
  154.             el = $(el);
  155.             var serverItem = {};
  157.             switch (el.attr('type')) {
  158.                case 'stun':
  159.                case 'stuns':
  160.                   serverItem.urls = el.attr('type') + ':' + el.attr('host');
  162.                   if (el.attr('port')) {
  163.                      serverItem.urls += ':' + el.attr('port');
  164.                   }
  166.                   break;
  167.                case 'turn':
  168.                case 'turns':
  169.                   if (el.attr('username')) {
  170.                      serverItem.username = el.attr('username');
  171.                   }
  173.                   serverItem.urls = el.attr('type') + ':' + el.attr('host');
  175.                   if (el.attr('port') && el.attr('port') !== '3478') {
  176.                      serverItem.urls += ':' + el.attr('port');
  177.                   }
  179.                   if (el.attr('transport') && el.attr('transport') !== 'udp') {
  180.                      serverItem.urls += '?transport=' + el.attr('transport');
  181.                   }
  183.                   if (el.attr('password')) {
  184.                      serverItem.credential = el.attr('password');
  185.                   }
  187.                   if (el.attr('ttl') && el.attr('ttl') < minTtl) {
  188.                      minTtl = el.attr('ttl');
  189.                   }
  190.                   break;
  191.             }
  193.             if (serverItem.urls) {
  194.                iceServers.push(serverItem);
  195.             }
  196.          });
  198.          if (iceServers.length > 0) {
  199.             jsxc.webrtc.setIceServers(iceServers, minTtl);
  200.          } else {
  201.             jsxc.warn('Found no valid ICE server configuration');
  202.          }
  203.       }
  204.    },
  206.    getIceServersByUrl: function(url) {
  207.       var self = jsxc.webrtc;
  209.       $.ajax(url, {
  210.          async: true,
  211.          xhrFields: {
  212.             withCredentials: jsxc.options.get('RTCPeerConfig').withCredentials
  213.          },
  214.          success: function(data) {
  215.             var ttl = data.ttl || 3600;
  216.             var iceServers = data.iceServers;
  218.             if (!iceServers && data.url) {
  219.                // parse deprecated (v2.1.0) syntax
  220.                jsxc.warn('Received RTCPeer configuration is deprecated. Use now RTCPeerConfig.url.');
  222.                iceServers = [{
  223.                   urls: data.url
  224.                }];
  226.                if (data.username) {
  227.                   iceServers[0].username = data.username;
  228.                }
  230.                if (data.credential) {
  231.                   iceServers[0].credential = data.credential;
  232.                }
  233.             }
  235.             if (iceServers && iceServers.length > 0) {
  236.                // url as parameter is deprecated
  237.                var url = iceServers[0].url && iceServers[0].url.length > 0;
  238.                var urls = iceServers[0].urls && iceServers[0].urls.length > 0;
  240.                if (urls || url) {
  241.                   self.setIceServers(iceServers, ttl);
  242.                } else {
  243.                   jsxc.warn('No valid url found in first ice object.');
  244.                }
  245.             }
  246.          },
  247.          dataType: 'json'
  248.       });
  249.    },
  251.    setIceServers: function(iceServers, ttl) {
  252.       jsxc.debug('set ice servers');
  254.       var peerConfig = jsxc.options.get('RTCPeerConfig');
  255.       peerConfig.iceServers = iceServers;
  256.       jsxc.options.set('RTCPeerConfig', peerConfig);
  258.       jsxc.webrtc.conn.jingle.setICEServers(iceServers);
  260.       jsxc.storage.setUserItem('iceValidity', (new Date()).getTime() + 1000 * ttl);
  262.       window.setTimeout(jsxc.webrtc.setupIceServers, ttl + 500);
  263.    },
  265.    /**
  266.     * Return list of capable resources.
  267.     *
  268.     * @memberOf jsxc.webrtc
  269.     * @param jid
  270.     * @param {(string|string[])} features list of required features
  271.     * @returns {Array}
  272.     */
  273.    getCapableRes: function(jid, features) {
  274.       var self = jsxc.webrtc;
  275.       var bid = jsxc.jidToBid(jid);
  276.       var res = Object.keys(jsxc.storage.getUserItem('res', bid) || {}) || [];
  278.       if (!features) {
  279.          return res;
  280.       } else if (typeof features === 'string') {
  281.          features = [features];
  282.       }
  284.       var available = [];
  285.       $.each(res, function(i, r) {
  286.          if (self.conn.caps.hasFeatureByJid(bid + '/' + r, features)) {
  287.             available.push(r);
  288.          }
  289.       });
  291.       return available;
  292.    },
  294.    /**
  295.     * Add "video" button to window menu.
  296.     *
  297.     * @private
  298.     * @memberOf jsxc.webrtc
  299.     * @param event
  300.     * @param win jQuery window object
  301.     */
  302.    initWindow: function(event, win) {
  303.       var self = jsxc.webrtc;
  305.       if (win.hasClass('jsxc_groupchat')) {
  306.          return;
  307.       }
  309.       jsxc.debug('webrtc.initWindow');
  311.       if (!self.conn) {
  312.          $(document).one('attached.jsxc', function() {
  313.             self.initWindow(null, win);
  314.          });
  315.          return;
  316.       }
  318.       // Add video call icon
  319.       var div = $('<div>').addClass('jsxc_video');
  320.       win.find('.jsxc_tools .jsxc_settings').after(div);
  322.       var screenMediaExtension = jsxc.options.get('screenMediaExtension') || {};
  323.       var browserDetails = self.conn.jingle.RTC.browserDetails || {};
  324.       var browser = browserDetails.browser;
  325.       var version = browserDetails.version;
  326.       if (screenMediaExtension[browser] || jsxc.storage.getItem('debug') || (browser === 'firefox' && version >= 52)) {
  327.          // Add screen sharing button if extension is available or we are in debug mode
  328.          var a = $('<a>');
  329.          a.text($.t('Share_screen'));
  330.          a.addClass('jsxc_shareScreen jsxc_video');
  331.          a.attr('href', '#');
  332.          win.find('.jsxc_settings .jsxc_menu li:last').after($('<li>').append(a));
  333.       }
  335.       self.updateIcon(win.data('bid'));
  336.    },
  338.    /**
  339.     * Enable or disable "video" icon and assign full jid.
  340.     *
  341.     * @memberOf jsxc.webrtc
  342.     * @param bid CSS conform jid
  343.     */
  344.    updateIcon: function(bid) {
  345.       jsxc.debug('Update icon', bid);
  347.       var self = jsxc.webrtc;
  349.       if (bid === jsxc.jidToBid(self.conn.jid)) {
  350.          return;
  351.       }
  353.       var win = jsxc.gui.window.get(bid);
  354.       var jid = win.data('jid');
  355.       var ls = jsxc.storage.getUserItem('buddy', bid);
  357.       if (typeof jid !== 'string') {
  358.          if (ls && typeof ls.jid === 'string') {
  359.             jid = ls.jid;
  360.          } else {
  361.             jsxc.debug('[webrtc] Could not update icon, because could not find jid for ' + bid);
  362.             return;
  363.          }
  364.       }
  366.       var res = Strophe.getResourceFromJid(jid);
  368.       var el = win.find('.jsxc_video');
  370.       var capableRes = self.getCapableRes(jid, self.reqVideoFeatures);
  371.       var targetRes = res;
  373.       if (targetRes === null) {
  374.          $.each(jsxc.storage.getUserItem('buddy', bid).res || [], function(index, val) {
  375.             if (capableRes.indexOf(val) > -1) {
  376.                targetRes = val;
  377.                return false;
  378.             }
  379.          });
  381.          jid = jid + '/' + targetRes;
  382.       }
  384.       el.off('click');
  386.       if (capableRes.indexOf(targetRes) > -1) {
  387.          el.click(function() {
  388.             if ($(this).hasClass('jsxc_shareScreen')) {
  389.                self.startScreenSharing(jid);
  390.             } else {
  391.                self.startCall(jid);
  392.             }
  393.          });
  395.          el.removeClass('jsxc_disabled');
  397.          el.attr('title', $.t('Start_video_call'));
  398.       } else {
  399.          el.addClass('jsxc_disabled');
  401.          el.attr('title', $.t('Video_call_not_possible'));
  402.       }
  403.    },
  405.    /**
  406.     * Check if full jid changed.
  407.     *
  408.     * @private
  409.     * @memberOf jsxc.webrtc
  410.     * @param e
  411.     * @param from full jid
  412.     */
  413.    onMessage: function(e, from) {
  414.       var self = jsxc.webrtc;
  415.       var bid = jsxc.jidToBid(from);
  417.       jsxc.debug('webrtc.onmessage', from);
  419.       if (self.chatJids[bid] !== from) {
  420.          self.updateIcon(bid);
  421.          self.chatJids[bid] = from;
  422.       }
  423.    },
  425.    /**
  426.     * Update icon on presence.
  427.     *
  428.     * @memberOf jsxc.webrtc
  429.     * @param ev
  430.     * @param status
  431.     * @private
  432.     */
  433.    onPresence: function(ev, jid, status, presence) {
  434.       var self = jsxc.webrtc;
  436.       if ($(presence).find('c[xmlns="' + Strophe.NS.CAPS + '"]').length === 0) {
  437.          jsxc.debug('webrtc.onpresence', jid);
  439.          self.updateIcon(jsxc.jidToBid(jid));
  440.       }
  441.    },
  443.    /**
  444.     * Display status message to user.
  445.     *
  446.     * @memberOf jsxc.webrtc
  447.     * @param txt message
  448.     * @param d duration in ms
  449.     */
  450.    setStatus: function(txt, d) {
  451.       var status = $('.jsxc_webrtc .jsxc_status');
  452.       var duration = (typeof d === 'undefined' || d === null) ? 4000 : d;
  454.       jsxc.debug('[Webrtc]', txt);
  456.       if (status.html()) {
  457.          // attach old messages
  458.          txt = status.html() + '<br />' + txt;
  459.       }
  461.       status.html(txt);
  463.       status.css({
  464.          'margin-left': '-' + (status.width() / 2) + 'px',
  465.          opacity: 0,
  466.          display: 'block'
  467.       });
  469.       status.stop().animate({
  470.          opacity: 1
  471.       });
  473.       clearTimeout(status.data('timeout'));
  475.       if (duration === 0) {
  476.          return;
  477.       }
  479.       var to = setTimeout(function() {
  480.          status.stop().animate({
  481.             opacity: 0
  482.          }, function() {
  483.             status.html('');
  484.          });
  485.       }, duration);
  487.       status.data('timeout', to);
  488.    },
  490.    /**
  491.     * Update "video" button if we receive cap information.
  492.     *
  493.     * @private
  494.     * @memberOf jsxc.webrtc
  495.     * @param event
  496.     * @param jid
  497.     */
  498.    onCaps: function(event, jid) {
  499.       var self = jsxc.webrtc;
  501.       if (jsxc.gui.roster.loaded) {
  502.          self.updateIcon(jsxc.jidToBid(jid));
  503.       } else {
  504.          $(document).on('cloaded.roster.jsxc', function() {
  505.             self.updateIcon(jsxc.jidToBid(jid));
  506.          });
  507.       }
  508.    },
  510.    /**
  511.     * Called if media failes.
  512.     *
  513.     * @private
  514.     * @memberOf jsxc.webrtc
  515.     */
  516.    onMediaFailure: function(ev, err) {
  517.       var self = jsxc.webrtc;
  518.       var msg;
  519.       err = err || {};
  521.       self.setStatus('media failure');
  523.       switch (err.name) {
  524.          case 'NotAllowedError':
  525.          case 'PERMISSION_DENIED':
  526.             msg = $.t('PermissionDeniedError');
  527.             break;
  528.          case 'HTTPS_REQUIRED':
  529.          case 'EXTENSION_UNAVAILABLE':
  530.             msg = $.t(err.name);
  531.             break;
  532.          default:
  533.             msg = $.t(err.name) !== err.name ? $.t(err.name) : $.t('UNKNOWN_ERROR');
  534.       }
  536.       jsxc.gui.window.postMessage({
  537.          bid: jsxc.jidToBid(jsxc.webrtc.last_caller),
  538.          direction: jsxc.Message.SYS,
  539.          msg: $.t('Media_failure') + ': ' + msg + ' (' + err.name + ').'
  540.       });
  542.       jsxc.gui.dialog.close();
  544.       jsxc.debug('media failure: ' + err.name);
  545.    },
  547.    /**
  548.     * Process incoming jingle offer.
  549.     *
  550.     * @param  {BaseSession} session
  551.     */
  552.    onIncoming: function(session) {
  553.       var self = jsxc.webrtc;
  554.       var type = (session.constructor) ? session.constructor.name : null;
  556.       if (type === 'FileTransferSession') {
  557.          self.onIncomingFileTransfer(session);
  558.       } else if (type === 'MediaSession') {
  559.          var reqMedia = false;
  561.          $.each(session.pc.remoteDescription.contents, function() {
  562.             if (this.senders === 'both') {
  563.                reqMedia = true;
  564.             }
  565.          });
  567.          session.call = reqMedia;
  569.          if (reqMedia) {
  570.             self.onIncomingCall(session);
  571.          } else {
  572.             self.onIncomingStream(session);
  573.          }
  574.       } else {
  575.          jsxc.warn('Unknown session type.');
  576.       }
  577.    },
  579.    /**
  580.     * Process incoming stream offer.
  581.     *
  582.     * @param  {MediaSession} session
  583.     */
  584.    onIncomingStream: function(session) {
  585.       jsxc.debug('incoming stream from ' + session.peerID);
  587.       var self = jsxc.webrtc;
  588.       var bid = jsxc.jidToBid(session.peerID);
  590.       session.on('change:connectionState', $.proxy(self.onIceConnectionStateChanged, self));
  592.       self.postScreenMessage(bid, $.t('Incoming_stream'), session.sid);
  594.       // display notification
  595.       jsxc.notification.notify($.t('Incoming_stream'), $.t('from_sender', {
  596.          sender: bid
  597.       }));
  599.       // send signal to partner
  600.       session.ring();
  602.       jsxc.webrtc.last_caller = session.peerID;
  604.       if (jsxc.webrtc.AUTO_ACCEPT) {
  605.          acceptIncomingStream(session);
  607.          return;
  608.       }
  610.       var dialog = jsxc.gui.dialog.open(jsxc.gui.template.get('incomingCall', bid), {
  611.          noClose: true
  612.       });
  614.       dialog.find('.jsxc_accept').click(function() {
  615.          $(document).trigger('accept.call.jsxc');
  617.          acceptIncomingStream(session);
  618.       });
  620.       dialog.find('.jsxc_reject').click(function() {
  621.          jsxc.gui.dialog.close();
  622.          $(document).trigger('reject.call.jsxc');
  624.          session.decline();
  625.       });
  627.       function acceptIncomingStream(session) {
  628.          jsxc.gui.dialog.close();
  630.          jsxc.gui.showVideoWindow(session.peerID);
  632.          session.accept();
  633.       }
  634.    },
  636.    /**
  637.     * Process incoming file offer.
  638.     *
  639.     * @param  {FileSession} session
  640.     */
  641.    onIncomingFileTransfer: function(session) {
  642.       jsxc.debug('incoming file transfer from ' + session.peerID);
  644.       var buddylist = jsxc.storage.getUserItem('buddylist') || [];
  645.       var bid = jsxc.jidToBid(session.peerID);
  647.       if (buddylist.indexOf(bid) > -1) {
  648.          //Accept file transfers only from contacts
  649.          session.accept();
  651.          var message = jsxc.gui.window.postMessage({
  652.             _uid: session.sid + ':msg',
  653.             bid: bid,
  654.             direction: jsxc.Message.IN,
  655.             attachment: {
  656.                name: session.receiver.metadata.name,
  657.                type: session.receiver.metadata.type || 'application/octet-stream'
  658.             }
  659.          });
  661.          session.receiver.on('progress', function(sent, size) {
  662.             jsxc.gui.window.updateProgress(message, sent, size);
  663.          });
  664.       }
  665.    },
  667.    /**
  668.     * Called on incoming call.
  669.     *
  670.     * @private
  671.     * @memberOf jsxc.webrtc
  672.     * @param {MediaSession} session
  673.     */
  674.    onIncomingCall: function(session) {
  675.       jsxc.debug('incoming call from ' + session.peerID);
  677.       var self = jsxc.webrtc;
  678.       var bid = jsxc.jidToBid(session.peerID);
  680.       session.on('change:connectionState', $.proxy(self.onIceConnectionStateChanged, self));
  682.       self.postCallMessage(bid, $.t('Incoming_call'), session.sid);
  684.       // display notification
  685.       jsxc.notification.notify($.t('Incoming_call'), $.t('from_sender', {
  686.          sender: bid
  687.       }));
  689.       // send signal to partner
  690.       session.ring();
  692.       jsxc.webrtc.last_caller = session.peerID;
  694.       if (jsxc.webrtc.AUTO_ACCEPT) {
  695.          self.acceptIncomingCall(session);
  696.          return;
  697.       }
  699.       var dialog = jsxc.gui.dialog.open(jsxc.gui.template.get('incomingCall', bid), {
  700.          noClose: true
  701.       });
  703.       dialog.find('.jsxc_accept').click(function() {
  704.          self.acceptIncomingCall(session);
  705.       });
  707.       dialog.find('.jsxc_reject').click(function() {
  708.          jsxc.gui.dialog.close();
  709.          $(document).trigger('reject.call.jsxc');
  711.          session.decline();
  712.       });
  713.    },
  715.    /**
  716.     * Called on incoming call.
  717.     *
  718.     * @private
  719.     * @memberOf jsxc.webrtc
  720.     * @param {MediaSession} session
  721.     */
  722.    acceptIncomingCall: function(session) {
  723.       $(document).trigger('accept.call.jsxc');
  725.       var self = jsxc.webrtc;
  727.       jsxc.switchEvents({
  728.          'mediaready.jingle': function(ev, stream) {
  729.             self.setStatus('Accept call');
  731.             self.localStream = stream;
  732.             self.conn.jingle.localStream = stream;
  734.             var dialog = jsxc.gui.showVideoWindow(session.peerID);
  735.             dialog.find('.jsxc_videoContainer').addClass('jsxc_establishing');
  737.             session.addStream(stream);
  738.             session.accept();
  739.          },
  740.          'mediafailure.jingle': function() {
  741.             session.decline();
  742.          }
  743.       });
  745.       self.reqUserMedia();
  746.    },
  748.    /**
  749.     * Process jingle termination event.
  750.     *
  751.     * @param  {BaseSession} session
  752.     * @param  {Object} reason Reason for termination
  753.     */
  754.    onTerminated: function(session, reason) {
  755.       var self = jsxc.webrtc;
  756.       var type = (session.constructor) ? session.constructor.name : null;
  758.       if (type === 'MediaSession') {
  759.          self.onCallTerminated(session, reason);
  760.       }
  761.    },
  763.    /**
  764.     * Called if call is terminated.
  765.     *
  766.     * @private
  767.     * @memberOf jsxc.webrtc
  768.     * @param {BaseSession} session
  769.     * @param  {Object} reason Reason for termination
  770.     */
  771.    onCallTerminated: function(session, reason) {
  772.       var self = jsxc.webrtc;
  774.       self.setStatus('call terminated ' + session.peerID + (reason && reason.condition ? reason.condition : ''));
  776.       var bid = jsxc.jidToBid(session.peerID);
  778.       if (self.localStream) {
  779.          // stop local stream
  780.          if (typeof self.localStream.getTracks === 'function') {
  781.             var tracks = self.localStream.getTracks();
  782.             tracks.forEach(function(track) {
  783.                track.stop();
  784.             });
  785.          } else if (typeof self.localStream.stop === 'function') {
  786.             self.localStream.stop();
  787.          } else {
  788.             jsxc.warn('Could not stop local stream');
  789.          }
  790.       }
  792.       // @REVIEW necessary?
  793.       if ($('.jsxc_remotevideo').length) {
  794.          $('.jsxc_remotevideo')[0].src = "";
  795.       }
  797.       if ($('.jsxc_localvideo').length) {
  798.          $('.jsxc_localvideo')[0].src = "";
  799.       }
  801.       self.conn.jingle.localStream = null;
  802.       self.localStream = null;
  803.       self.remoteStream = null;
  805.       jsxc.gui.closeVideoWindow();
  807.       // Close incoming call dialog and stop ringing
  808.       jsxc.gui.dialog.close();
  809.       $(document).trigger('reject.call.jsxc');
  811.       $(document).off('error.jingle');
  813.       var msg = (reason && reason.condition ? (': ' + $.t('jingle_reason_' + reason.condition)) : '') + '.';
  814.       if (session.call) {
  815.          msg = $.t('Call_terminated') + msg;
  816.          jsxc.webrtc.postCallMessage(bid, msg, session.sid);
  817.       } else {
  818.          msg = $.t('Stream_terminated') + msg;
  819.          jsxc.webrtc.postScreenMessage(bid, msg, session.sid);
  820.       }
  821.    },
  823.    /**
  824.     * Remote station is ringing.
  825.     *
  826.     * @private
  827.     * @memberOf jsxc.webrtc
  828.     */
  829.    onCallRinging: function() {
  830.       this.setStatus('ringing...', 0);
  832.       $('.jsxc_videoContainer').removeClass('jsxc_establishing').addClass('jsxc_ringing');
  833.    },
  835.    /**
  836.     * Called if we receive a remote stream.
  837.     *
  838.     * @private
  839.     * @memberOf jsxc.webrtc
  840.     * @param {BaseSession} session
  841.     * @param {Object} stream
  842.     */
  843.    onRemoteStreamAdded: function(session, stream) {
  844.       var self = jsxc.webrtc;
  846.       self.setStatus('Remote stream for session ' + session.sid + ' added.');
  848.       self.remoteStream = stream;
  850.       var isVideoDevice = stream.getVideoTracks().length > 0;
  851.       var isAudioDevice = stream.getAudioTracks().length > 0;
  853.       self.setStatus(isVideoDevice ? 'Use remote video device.' : 'No remote video device');
  854.       self.setStatus(isAudioDevice ? 'Use remote audio device.' : 'No remote audio device');
  856.       if ($('.jsxc_remotevideo').length) {
  857.          self.attachMediaStream($('#jsxc_webrtc .jsxc_remotevideo'), stream);
  859.          $('#jsxc_webrtc .jsxc_' + (isVideoDevice ? 'remotevideo' : 'noRemoteVideo')).addClass('jsxc_deviceAvailable');
  860.       }
  861.    },
  863.    /**
  864.     * Attach media stream to element.
  865.     *
  866.     * @memberOf jsxc.webrtc
  867.     * @param element {Element|jQuery}
  868.     * @param stream {mediastream}
  869.     */
  870.    attachMediaStream: function(element, stream) {
  871.       var el = (element instanceof jQuery) ? element.get(0) : element;
  872.       el.srcObject = stream;
  874.       $(element).show();
  875.    },
  877.    /**
  878.     * Called if the remote stream was removed.
  879.     *
  880.     * @private
  881.     * @meberOf jsxc.webrtc
  882.     * @param {BaseSession} session
  883.     */
  884.    onRemoteStreamRemoved: function(session) {
  885.       this.setStatus('Remote stream for ' + session.jid + ' removed.');
  887.       //@TODO clean up
  888.    },
  890.    /**
  891.     * Display information according to the connection state.
  892.     *
  893.     * @private
  894.     * @memberOf jsxc.webrtc
  895.     * @param {BaseSession} session
  896.     * @param {String} state
  897.     */
  898.    onIceConnectionStateChanged: function(session, state) {
  899.       var self = jsxc.webrtc;
  901.       jsxc.debug('connection state for ' + session.sid, state);
  903.       if (state === 'connected') {
  904.          $('#jsxc_webrtc .jsxc_deviceAvailable').show();
  905.       } else if (state === 'failed') {
  906.          jsxc.gui.window.postMessage({
  907.             bid: jsxc.jidToBid(session.peerID),
  908.             direction: jsxc.Message.SYS,
  909.             msg: $.t('ICE_connection_failure')
  910.          });
  912.          session.end('failed-transport');
  914.          $(document).trigger('callterminated.jingle');
  915.       } else if (state === 'interrupted') {
  916.          self.setStatus($.t('Connection_interrupted'));
  917.       }
  918.    },
  920.    /**
  921.     * Start a call to the specified jid.
  922.     *
  923.     * @memberOf jsxc.webrtc
  924.     * @param {String} jid full jid
  925.     * @param {String[]} um requested user media
  926.     */
  927.    startCall: function(jid, um) {
  928.       var self = jsxc.webrtc;
  930.       if (Strophe.getResourceFromJid(jid) === null) {
  931.          jsxc.debug('We need a full jid');
  932.          return;
  933.       }
  935.       self.last_caller = jid;
  937.       jsxc.switchEvents({
  938.          'mediaready.jingle': function(ev, stream) {
  939.             jsxc.debug('media ready for outgoing call');
  941.             self.initiateOutgoingCall(jid, stream);
  942.          },
  943.          'mediafailure.jingle': function() {
  944.             jsxc.gui.dialog.close();
  945.          }
  946.       });
  948.       self.reqUserMedia(um);
  949.    },
  951.    /**
  952.     * Start jingle session to jid with stream.
  953.     *
  954.     * @param  {String} jid
  955.     * @param  {Object} stream
  956.     */
  957.    initiateOutgoingCall: function(jid, stream) {
  958.       var self = jsxc.webrtc;
  960.       self.localStream = stream;
  961.       self.conn.jingle.localStream = stream;
  963.       var dialog = jsxc.gui.showVideoWindow(jid);
  965.       dialog.find('.jsxc_videoContainer').addClass('jsxc_establishing');
  967.       self.setStatus('Initiate call');
  969.       // @REVIEW session based?
  970.       $(document).one('error.jingle', function(ev, sid, error) {
  971.          if (error && error.source !== 'offer') {
  972.             return;
  973.          }
  975.          setTimeout(function() {
  976.             jsxc.gui.showAlert("Sorry, we couldn't establish a connection. Maybe your buddy is offline.");
  977.          }, 500);
  978.       });
  980.       var session = self.conn.jingle.initiate(jid);
  982.       // flag session as call
  983.       session.call = true;
  985.       session.on('change:connectionState', $.proxy(self.onIceConnectionStateChanged, self));
  987.       self.postCallMessage(jsxc.jidToBid(jid), $.t('Call_started'), session.sid);
  988.    },
  990.    /**
  991.     * Hang up the current call.
  992.     *
  993.     * @memberOf jsxc.webrtc
  994.     */
  995.    hangUp: function(reason, text) {
  996.       if (jsxc.webrtc.conn.jingle.manager && !$.isEmptyObject(jsxc.webrtc.conn.jingle.manager.peers)) {
  997.          jsxc.webrtc.conn.jingle.terminate(null, reason, text);
  998.       } else {
  999.          jsxc.gui.closeVideoWindow();
  1000.       }
  1002.       // @TODO check event
  1003.       $(document).trigger('callterminated.jingle');
  1004.    },
  1006.    /**
  1007.     * Start outgoing screen sharing session.
  1008.     *
  1009.     * @param  {String} jid
  1010.     */
  1011.    startScreenSharing: function(jid) {
  1012.       var self = this;
  1014.       if (Strophe.getResourceFromJid(jid) === null) {
  1015.          jsxc.debug('We need a full jid');
  1016.          return;
  1017.       }
  1019.       self.last_caller = jid;
  1021.       jsxc.switchEvents({
  1022.          'mediaready.jingle': function(ev, stream) {
  1023.             self.initiateScreenSharing(jid, stream);
  1024.          },
  1025.          'mediafailure.jingle': function(ev, err) {
  1026.             jsxc.gui.dialog.close();
  1028.             var browser = self.conn.jingle.RTC.webrtcDetectedBrowser;
  1030.             var screenMediaExtension = jsxc.options.get('screenMediaExtension') || {};
  1031.             if (screenMediaExtension[browser] &&
  1032.                (err.name === 'EXTENSION_UNAVAILABLE' || (err.name === 'NotAllowedError' && browser === 'firefox'))) {
  1033.                // post download link after explanation
  1034.                setTimeout(function() {
  1035.                   jsxc.gui.window.postMessage({
  1036.                      bid: jsxc.jidToBid(jid),
  1037.                      direction: jsxc.Message.SYS,
  1038.                      msg: $.t('Install_extension') + screenMediaExtension[browser]
  1039.                   });
  1040.                }, 500);
  1041.             }
  1042.          }
  1043.       });
  1045.       self.reqUserMedia(['screen']);
  1046.    },
  1048.    /**
  1049.     * Initiate outgoing (one-way) jingle session to jid with stream.
  1050.     *
  1051.     * @param  {String} jid
  1052.     * @param  {Object} stream
  1053.     */
  1054.    initiateScreenSharing: function(jid, stream) {
  1055.       var self = jsxc.webrtc;
  1056.       var bid = jsxc.jidToBid(jid);
  1058.       jsxc.webrtc.localStream = stream;
  1059.       jsxc.webrtc.conn.jingle.localStream = stream;
  1061.       var container = jsxc.gui.showMinimizedVideoWindow();
  1062.       container.addClass('jsxc_establishing');
  1064.       self.setStatus('Initiate stream');
  1066.       $(document).one('error.jingle', function(e, sid, error) {
  1067.          if (error && error.source !== 'offer') {
  1068.             return;
  1069.          }
  1071.          setTimeout(function() {
  1072.             jsxc.gui.showAlert("Sorry, we couldn't establish a connection. Maybe your buddy is offline.");
  1073.          }, 500);
  1074.       });
  1076.       var browser = self.conn.jingle.RTC.webrtcDetectedBrowser;
  1077.       var browserVersion = self.conn.jingle.RTC.webrtcDetectedVersion;
  1078.       var constraints;
  1080.       if ((browserVersion < 33 && browser === 'firefox') || browser === 'chrome') {
  1081.          constraints = {
  1082.             mandatory: {
  1083.                'OfferToReceiveAudio': false,
  1084.                'OfferToReceiveVideo': false
  1085.             }
  1086.          };
  1087.       } else {
  1088.          constraints = {
  1089.             'offerToReceiveAudio': false,
  1090.             'offerToReceiveVideo': false
  1091.          };
  1092.       }
  1094.       var session = self.conn.jingle.initiate(jid, undefined, constraints);
  1095.       session.call = false;
  1097.       session.on('change:connectionState', $.proxy(self.onIceConnectionStateChanged, self));
  1098.       // @REVIEW also for calls?
  1099.       session.on('accepted', function() {
  1100.          self.onSessionAccepted(session);
  1101.       });
  1103.       self.postScreenMessage(bid, $.t('Stream_started'), session.sid);
  1104.    },
  1106.    /**
  1107.     * Session was accepted by other peer.
  1108.     *
  1109.     * @param  {BaseSession} session
  1110.     */
  1111.    onSessionAccepted: function(session) {
  1112.       var self = jsxc.webrtc;
  1114.       $('.jsxc_videoContainer').removeClass('jsxc_ringing');
  1116.       self.postScreenMessage(jsxc.jidToBid(session.peerID), $.t('Connection_accepted'), session.sid);
  1117.    },
  1119.    /**
  1120.     * Request media from local user.
  1121.     *
  1122.     * @memberOf jsxc.webrtc
  1123.     */
  1124.    reqUserMedia: function(um) {
  1125.       if (this.localStream) {
  1126.          $(document).trigger('mediaready.jingle', [this.localStream]);
  1127.          return;
  1128.       }
  1130.       um = um || ['video', 'audio'];
  1132.       jsxc.gui.dialog.open(jsxc.gui.template.get('allowMediaAccess'), {
  1133.          noClose: true
  1134.       });
  1136.       if (um.indexOf('screen') >= 0) {
  1137.          jsxc.webrtc.getScreenMedia();
  1138.       } else if (typeof navigator !== 'undefined' && typeof navigator.mediaDevices !== 'undefined' &&
  1139.          typeof navigator.mediaDevices.enumerateDevices !== 'undefined') {
  1140.          navigator.mediaDevices.enumerateDevices()
  1141.             .then(filterUserMedia)
  1142.             .catch(function(err) {
  1143.                jsxc.warn(err.name + ": " + err.message);
  1144.             });
  1145.       } else if (typeof MediaStreamTrack !== 'undefined' && typeof MediaStreamTrack.getSources !== 'undefined') {
  1146.          // @deprecated in chrome since v56
  1147.          MediaStreamTrack.getSources(filterUserMedia);
  1148.       } else {
  1149.          jsxc.webrtc.getUserMedia(um);
  1150.       }
  1152.       function filterUserMedia(devices) {
  1153.          var availableDevices = devices.map(function(device) {
  1154.             return device.kind;
  1155.          });
  1157.          um = um.filter(function(el) {
  1158.             return availableDevices.indexOf(el) !== -1 || availableDevices.indexOf(el + 'input') !== -1;
  1159.          });
  1161.          if (um.length) {
  1162.             jsxc.webrtc.getUserMedia(um);
  1163.          } else {
  1164.             jsxc.warn('No audio/video device available.');
  1165.          }
  1166.       }
  1167.    },
  1169.    /**
  1170.     * Get user media from local browser.
  1171.     *
  1172.     * @memberOf jsxc.webrtc
  1173.     */
  1174.    getUserMedia: function(um) {
  1175.       var self = jsxc.webrtc;
  1176.       var constraints = {};
  1178.       if (um.indexOf('video') > -1) {
  1179.          constraints.video = true;
  1180.       }
  1182.       if (um.indexOf('audio') > -1) {
  1183.          constraints.audio = true;
  1184.       }
  1186.       try {
  1187.          self.conn.jingle.getUserMedia(constraints, self.userMediaCallback);
  1188.       } catch (e) {
  1189.          jsxc.error('GUM failed: ', e);
  1190.          $(document).trigger('mediafailure.jingle');
  1191.       }
  1192.    },
  1194.    userMediaCallback: function(err, stream) {
  1195.       if (err) {
  1196.          jsxc.warn('Failed to get access to local media. Error ', err);
  1197.          $(document).trigger('mediafailure.jingle', [err]);
  1198.       } else if (stream) {
  1199.          jsxc.debug('onUserMediaSuccess');
  1200.          $(document).trigger('mediaready.jingle', [stream]);
  1201.       }
  1202.    },
  1204.    /**
  1205.     * Get screen media from local browser.
  1206.     *
  1207.     * @memberOf jsxc.webrtc
  1208.     */
  1209.    getScreenMedia: function() {
  1210.       var self = jsxc.webrtc;
  1212.       jsxc.debug('get screen media');
  1214.       self.conn.jingle.getScreenMedia(self.screenMediaCallback);
  1215.    },
  1217.    screenMediaCallback: function(err, stream) {
  1218.       if (err) {
  1219.          $(document).trigger('mediafailure.jingle', [err]);
  1221.          return;
  1222.       }
  1224.       if (stream) {
  1225.          jsxc.debug('onScreenMediaSuccess');
  1226.          $(document).trigger('mediaready.jingle', [stream]);
  1227.       }
  1228.    },
  1230.    screenMediaAvailable: function() {
  1231.       var self = jsxc.webrtc;
  1232.       var browser = self.conn.jingle.RTC.webrtcDetectedBrowser;
  1234.       // test if chrome extension for this domain is available
  1235.       var chrome = !!sessionStorage.getScreenMediaJSExtensionId && browser === 'chrome';
  1237.       // the ff extension from {@link https://github.com/otalk/getScreenMedia}
  1238.       // does not provide any possibility to determine if it is installed or not.
  1239.       // Starting with Firefox 52 {@link https://www.mozilla.org/en-US/firefox/52.0a2/auroranotes/}
  1240.       // no extension is needed anyway.
  1241.       var firefox = browser === 'firefox';
  1243.       return chrome || firefox;
  1244.    },
  1246.    /**
  1247.     * Make a snapshot from a video stream and display it.
  1248.     *
  1249.     * @memberOf jsxc.webrtc
  1250.     * @param video Video stream
  1251.     */
  1252.    snapshot: function(video) {
  1253.       if (!video) {
  1254.          jsxc.debug('Missing video element');
  1255.       }
  1257.       $('.jsxc_snapshotbar p').remove();
  1259.       var canvas = $('<canvas/>').css('display', 'none').appendTo('body').attr({
  1260.          width: video.width(),
  1261.          height: video.height()
  1262.       }).get(0);
  1263.       var ctx = canvas.getContext('2d');
  1265.       ctx.drawImage(video[0], 0, 0);
  1266.       var img = $('<img/>');
  1267.       var url = null;
  1269.       try {
  1270.          url = canvas.toDataURL('image/jpeg');
  1271.       } catch (err) {
  1272.          jsxc.warn('Error', err);
  1273.          return;
  1274.       }
  1276.       img[0].src = url;
  1277.       var link = $('<a/>').attr({
  1278.          target: '_blank',
  1279.          href: url
  1280.       });
  1281.       link.append(img);
  1282.       $('.jsxc_snapshotbar').append(link);
  1284.       canvas.remove();
  1285.    },
  1287.    /**
  1288.     * Send file to full jid via jingle.
  1289.     *
  1290.     * @memberOf jsxc.webrtc
  1291.     * @param  {string} jid full jid
  1292.     * @param  {file} file
  1293.     * @return {object} session
  1294.     */
  1295.    sendFile: function(jid, file) {
  1296.       jsxc.debug('Send file via webrtc');
  1298.       var self = jsxc.webrtc;
  1300.       if (!Strophe.getResourceFromJid(jid)) {
  1301.          jsxc.warn('Require full jid to send file via webrtc');
  1303.          return;
  1304.       }
  1306.       var sess = self.conn.jingle.manager.createFileTransferSession(jid);
  1308.       sess.on('change:sessionState', function() {
  1309.          jsxc.debug('Session state', sess.state);
  1310.       });
  1311.       sess.on('change:connectionState', function() {
  1312.          jsxc.debug('Connection state', sess.connectionState);
  1313.       });
  1315.       sess.start(file);
  1317.       return sess;
  1318.    },
  1320.    /**
  1321.     * Display received file.
  1322.     *
  1323.     * @memberOf jsxc.webrtc
  1324.     * @param  {object} sess
  1325.     * @param  {File} file
  1326.     * @param  {object} metadata file metadata
  1327.     */
  1328.    onReceivedFile: function(sess, file, metadata) {
  1329.       jsxc.debug('file received', metadata);
  1331.       if (!FileReader) {
  1332.          return;
  1333.       }
  1335.       var reader = new FileReader();
  1336.       var type;
  1338.       if (!metadata.type) {
  1339.          // detect file type via file extension, because XEP-0234 v0.14
  1340.          // does not send any type
  1341.          var ext = metadata.name.replace(/.+\.([a-z0-9]+)$/i, '$1').toLowerCase();
  1343.          switch (ext) {
  1344.             case 'jpg':
  1345.             case 'jpeg':
  1346.             case 'png':
  1347.             case 'gif':
  1348.             case 'svg':
  1349.                type = 'image/' + ext.replace(/^jpg$/, 'jpeg');
  1350.                break;
  1351.             case 'mp3':
  1352.             case 'wav':
  1353.                type = 'audio/' + ext;
  1354.                break;
  1355.             case 'pdf':
  1356.                type = 'application/pdf';
  1357.                break;
  1358.             case 'txt':
  1359.                type = 'text/' + ext;
  1360.                break;
  1361.             default:
  1362.                type = 'application/octet-stream';
  1363.          }
  1364.       } else {
  1365.          type = metadata.type;
  1366.       }
  1368.       reader.onload = function(ev) {
  1369.          // modify element with uid metadata.actualhash
  1371.          jsxc.gui.window.postMessage({
  1372.             _uid: sess.sid + ':msg',
  1373.             bid: jsxc.jidToBid(sess.peerID),
  1374.             direction: jsxc.Message.IN,
  1375.             attachment: {
  1376.                name: metadata.name,
  1377.                type: type,
  1378.                size: metadata.size,
  1379.                data: ev.target.result
  1380.             }
  1381.          });
  1382.       };
  1384.       if (!file.type) {
  1385.          // file type should be handled in lib
  1386.          file = new File([file], metadata.name, {
  1387.             type: type
  1388.          });
  1389.       }
  1391.       reader.readAsDataURL(file);
  1392.    }
  1393. };
  1395. jsxc.webrtc.postCallMessage = function(bid, msg, uid) {
  1396.    jsxc.gui.window.postMessage({
  1397.       _uid: uid,
  1398.       bid: bid,
  1399.       direction: jsxc.Message.SYS,
  1400.       msg: ':telephone_receiver: ' + msg
  1401.    });
  1402. };
  1403. jsxc.webrtc.postScreenMessage = function(bid, msg, uid) {
  1404.    jsxc.gui.window.postMessage({
  1405.       _uid: uid,
  1406.       bid: bid,
  1407.       direction: jsxc.Message.SYS,
  1408.       msg: ':computer: ' + msg
  1409.    });
  1410. };
  1412. jsxc.gui.showMinimizedVideoWindow = function() {
  1413.    var self = jsxc.webrtc;
  1415.    // needed to trigger complete.dialog.jsxc
  1416.    jsxc.gui.dialog.close();
  1418.    var videoContainer = $('<div/>');
  1419.    videoContainer.addClass('jsxc_videoContainer jsxc_minimized');
  1420.    videoContainer.appendTo('body');
  1421.    videoContainer.draggable({
  1422.       containment: "parent"
  1423.    });
  1425.    var videoElement = $('<video class="jsxc_localvideo" autoplay=""></video>');
  1426.    videoElement.appendTo(videoContainer);
  1428.    videoElement[0].muted = true;
  1429.    videoElement[0].volume = 0;
  1431.    if (self.localStream) {
  1432.       self.attachMediaStream(videoElement, self.localStream);
  1433.    }
  1435.    videoContainer.append('<div class="jsxc_controlbar"><div><div class="jsxc_hangUp jsxc_videoControl"></div></div></div></div>');
  1436.    videoContainer.find('.jsxc_hangUp').click(function() {
  1437.       jsxc.webrtc.hangUp('success');
  1438.    });
  1439.    videoContainer.click(function() {
  1440.       videoContainer.find('.jsxc_controlbar').toggleClass('jsxc_visible');
  1441.    });
  1443.    return videoContainer;
  1444. };
  1446. /**
  1447.  * Display window for video call.
  1448.  *
  1449.  * @memberOf jsxc.gui
  1450.  */
  1451. jsxc.gui.showVideoWindow = function(jid) {
  1452.    var self = jsxc.webrtc;
  1454.    // needed to trigger complete.dialog.jsxc
  1455.    jsxc.gui.dialog.close();
  1457.    $('body').append(jsxc.gui.template.get('videoWindow'));
  1459.    // mute own video element to avoid echoes
  1460.    $('#jsxc_webrtc .jsxc_localvideo')[0].muted = true;
  1461.    $('#jsxc_webrtc .jsxc_localvideo')[0].volume = 0;
  1463.    var rv = $('#jsxc_webrtc .jsxc_remotevideo');
  1464.    var lv = $('#jsxc_webrtc .jsxc_localvideo');
  1466.    lv.draggable({
  1467.       containment: "parent"
  1468.    });
  1470.    if (self.localStream) {
  1471.       self.attachMediaStream(lv, self.localStream);
  1472.    }
  1474.    var w_dialog = $('#jsxc_webrtc').width();
  1475.    var w_remote = rv.width();
  1477.    // fit in video
  1478.    if (w_remote > w_dialog) {
  1479.       var scale = w_dialog / w_remote;
  1480.       var new_h = rv.height() * scale;
  1481.       var new_w = w_dialog;
  1482.       var vc = $('#jsxc_webrtc .jsxc_videoContainer');
  1484.       rv.height(new_h);
  1485.       rv.width(new_w);
  1487.       vc.height(new_h);
  1488.       vc.width(new_w);
  1490.       lv.height(lv.height() * scale);
  1491.       lv.width(lv.width() * scale);
  1492.    }
  1494.    if (self.remoteStream) {
  1495.       self.attachMediaStream(rv, self.remoteStream);
  1497.       $('#jsxc_webrtc .jsxc_' + (self.remoteStream.getVideoTracks().length > 0 ? 'remotevideo' : 'noRemoteVideo')).addClass('jsxc_deviceAvailable');
  1498.    }
  1500.    var win = jsxc.gui.window.open(jsxc.jidToBid(jid));
  1502.    win.find('.slimScrollDiv').resizable('disable');
  1503.    jsxc.gui.window.resize(win, {
  1504.       size: {
  1505.          width: $('#jsxc_webrtc .jsxc_chatarea').width(),
  1506.          height: $('#jsxc_webrtc .jsxc_chatarea').height()
  1507.       }
  1508.    }, true);
  1510.    $('#jsxc_webrtc .jsxc_chatarea ul').append(win.detach());
  1512.    $('#jsxc_webrtc .jsxc_hangUp').click(function() {
  1513.       jsxc.webrtc.hangUp('success');
  1514.    });
  1516.    $('#jsxc_webrtc .jsxc_fullscreen').click(function() {
  1518.       if ($.support.fullscreen) {
  1519.          // Reset position of localvideo
  1520.          $(document).one('disabled.fullscreen', function() {
  1521.             lv.removeAttr('style');
  1522.          });
  1524.          $('#jsxc_webrtc .jsxc_videoContainer').fullscreen();
  1525.       }
  1526.    });
  1528.    $('#jsxc_webrtc .jsxc_videoContainer').click(function() {
  1529.       $('#jsxc_webrtc .jsxc_controlbar').toggleClass('jsxc_visible');
  1530.    });
  1532.    return $('#jsxc_webrtc');
  1533. };
  1535. jsxc.gui.closeVideoWindow = function() {
  1536.    var win = $('#jsxc_webrtc .jsxc_chatarea > ul > li');
  1538.    if (win.length > 0) {
  1539.       $('#jsxc_windowList > ul').prepend(win.detach());
  1540.       win.find('.slimScrollDiv').resizable('enable');
  1541.       jsxc.gui.window.resize(win);
  1542.    }
  1544.    $('#jsxc_webrtc, .jsxc_videoContainer').remove();
  1545. };
  1547. $.extend(jsxc.CONST, {
  1548.    KEYCODE_ENTER: 13,
  1549.    KEYCODE_ESC: 27
  1550. });
  1552. $(document).ready(function() {
  1553.    $(document).on('init.window.jsxc', jsxc.webrtc.initWindow);
  1554.    $(document).on('attached.jsxc', jsxc.webrtc.init);
  1555.    $(document).on('disconnected.jsxc', jsxc.webrtc.onDisconnected);
  1556.    $(document).on('connected.jsxc', jsxc.webrtc.onConnected);
  1557. });