Firefox not firing peer peerJoined event

[udit7590]

I am trying to create a room with a custom ID. Now another user joins the room and thus communication is established. I am listening for peerJoined and peerLeft events to do my tasks. When I run the code on Chrome, it works fine. But when I try to run one use on chrome and another on firefox, peerJoined event is fired only for isSelf = true and not for the peer joining the room.

[oooookk7]

Hi @udit7590, do you mind sharing your code?

[udit7590]

@letchoo Here is the sample code:

  var SkylinkVideoSupport  = function($selfVideoElement, $peerVideoElementContainer, options) {
  this.service      = undefined; // Currently Skylink
  this.initialized  = false;
  this.$selfVideoElement          = $selfVideoElement;
  this.$peerVideoElementContainer = $peerVideoElementContainer;

  this.options = options || {};
  this.options =  $.extend({}, this.defaults, this.options);

  // Initialize
  this.loadServiceSDKAndInitialize();
}

// --------------------------------------------------------------------------------------------------------------------
// Section For Initialization
// --------------------------------------------------------------------------------------------------------------------
SkylinkVideoSupport.prototype.loadServiceSDKAndInitialize = function() {
  var _this = this;

  $.getScript(SkylinkVideoSupport.config.serviceSDKUrl, function( data, textStatus, jqxhr ) {
    console.log('[SkylinkVideoSupport]' + textStatus ); // Success

    _this.service = new Skylink();

    console.log('[SkylinkVideoSupport] Skylink SDK loaded'); // Data returned
    _this.triggerEvent('service_loaded', [_this]);

    _this.setServiceLogLevel();
    _this.bindEvents();
  });
};

SkylinkVideoSupport.prototype.setServiceLogLevel = function() {
  this.service.setLogLevel(4);
};

SkylinkVideoSupport.prototype.initializeService = function() {
  var _this = this;

  if (!this.initialized) {
    this.service.init({
      apiKey: _this.getApiKey(),
      defaultRoom: _this.getRoomId()
    }, function (error, success) {
      if (error) {
        _this.triggerEvent('initialization_failed', [_this]);
        _this.updateVideoStatus(_this.options.messages.initializationFailed(error));
      } else {
        _this.initialized = true;
        _this.triggerEvent('initialized', [_this]);
        _this.updateVideoStatus(_this.options.messages.initialized());
      }
    });
  }
};

// --------------------------------------------------------------------------------------------------------------------
// Section For Default Options
// --------------------------------------------------------------------------------------------------------------------
SkylinkVideoSupport.prototype.defaults = {
  $statusElement: null,
  messages: {
    roomJoined: function() { return 'Joined Room' },
    roomJoinError: function(error) { return ('Failed joining room.<br>' + 'Error: ' + (error.error.message || error.error)) },
    initializationFailed: function(error) { return ('Failed retrieval for room information.<br>Error: ' + (error.error.message || error.error)) },
    initialized: function() { return 'Room information has been loaded. Room is ready for user to join.' }
  }
};

SkylinkVideoSupport.config = {
  serviceSDKUrl : "https://cdn.temasys.com.sg/skylink/skylinkjs/0.6.x/skylink.complete.js"
};

// --------------------------------------------------------------------------------------------------------------------
// Section For Utility functions
// --------------------------------------------------------------------------------------------------------------------
SkylinkVideoSupport.prototype.getApiKey = function() {
  // Get your own key at developer.temasys.com.sg
  return '<%= Spree::Config["video_support_main_api_key"] %>';
};

SkylinkVideoSupport.prototype.getRoomId = function() {
  return 'u_default_room';
};

SkylinkVideoSupport.prototype.triggerEvent = function(name, data) {
  // Triggering event on the body. Whichever element wants to listen for it, can.
  console.log('[SkylinkVideoSupport] Triggering ' + name + ' event');
  $(document).trigger('video_support:' + name, data);
};

SkylinkVideoSupport.prototype.updateVideoStatus = function(message) {
  if (!!this.options.$statusElement) {
    this.options.$statusElement.html(message);
  }
};

SkylinkVideoSupport.prototype.joinRoom = function(roomId) {
  var _this = this;

  console.log('[SkylinkVideoSupport] Room ID: ' + roomId);
  if (!roomId) { return; }

  this.service.joinRoom(roomId, {
    audio: true,
    video: true
  }, function (error, success) {
    if (error) {
      _this.updateVideoStatus(_this.options.messages.roomJoinError(error));
      _this.triggerEvent('room_joined_error', [_this, error]);
    } else {
      _this.updateVideoStatus(_this.options.messages.roomJoined());
      _this.triggerEvent('room_joined', [_this, success]);
    }
  });
};

SkylinkVideoSupport.prototype.leaveRoom = function() {
  var _this = this;

  this.service.leaveRoom(function(error, success) {
    if (error){
      console.log("[SkylinkVideoSupport] Error happened");
      _this.triggerEvent('room_left_error', [_this, error]);
    }
    else{
      console.log("[SkylinkVideoSupport] Successfully left room");
      _this.triggerEvent('room_left', [_this, success]);
    }
  });
};
// --------------------------------------------------------------------------------------------------------------------
// Section For Events Binding
// --------------------------------------------------------------------------------------------------------------------
SkylinkVideoSupport.prototype.bindEvents = function() {
  this.bindPeerJoinedEvent();
  this.bindIncomingStreamEvent();
  this.bindPeerLeftEvent();
  this.bindMediaAccessSuccessEvent();

  this.triggerEvent('service_events_binded', [this]);
};

SkylinkVideoSupport.prototype.bindPeerJoinedEvent = function() {
  var _this = this;

  this.service.on('peerJoined', function(peerId, peerInfo, isSelf) {
    if(isSelf) return; // We already have a video element for our video and don't need to create a new one.
    var vid = document.createElement('video');
    vid.autoplay = true;
    vid.muted = false; // Added to avoid feedback when testing locally
    vid.id = peerId;

    _this.$peerVideoElementContainer.append(vid);
  });
};

SkylinkVideoSupport.prototype.bindIncomingStreamEvent = function() {
  this.service.on('incomingStream', function(peerId, stream, isSelf) {
    if(isSelf) return;
    var vid = document.getElementById(peerId);
    attachMediaStream(vid, stream);
  });
};

SkylinkVideoSupport.prototype.bindPeerLeftEvent = function() {
  this.service.on('peerLeft', function(peerId, peerInfo, isSelf) {
    // Only if user is in no room, remove the peer video element
    if (!isSelf && !peerInfo.room) {
      $('#' + peerId).remove();
    }
  });
};

SkylinkVideoSupport.prototype.bindMediaAccessSuccessEvent = function() {
  var _this = this;

  this.service.on('mediaAccessSuccess', function(stream) {
    attachMediaStream(_this.$selfVideoElement.get(0), stream);
  });
};

I am calling joinRoom for two users. It works fine on chrome. But on Firefox, I dont receive events for peerJoined.

[oooookk7]

Hi @udit7590, thanks for providing the code. Is autoIntroduce turned ON for the privileged key?

[udit7590]

Hi @letchoo . Yes autoIntroduce is ON

[oooookk7]

Hi @udit7590, I am able to reproduce the issue on my end. The reason was that Chrome was joining the default room and Firefox was joining the selected room, which was caused by $.getScript being loaded twice for me. It might be the cause of your issue and I suggest that you do checks before loading the script again:

SkylinkVideoSupport.prototype.loadServiceSDKAndInitialize = function() {
  var _this = this;

  // Prevent scripts being loaded twice and allow an second reload when a process task for loading is happening
  if (!_this.loaded && !_this.loadingScript) {
    $.getScript(SkylinkVideoSupport.config.serviceSDKUrl, function( data, textStatus, jqxhr ) {
      console.log('[SkylinkVideoSupport]' + textStatus ); // Success
      _this.loadingScript = false; // you may put this for errors as well.

      _this.loaded = true;
      _this.service = new Skylink();

      console.log('[SkylinkVideoSupport] Skylink SDK loaded'); // Data returned
      _this.triggerEvent('service_loaded', [_this]);

      _this.setServiceLogLevel();
      _this.bindEvents();
    });
  }
};

See the error logs.txt

[udit7590]

Hi @letchoo . I verified on both the browser that they were joining to the same room that was created by me and since I am running the script only once on each browser, I didn't ran into script being loaded twice or initialized twice. However, today while testing I saw that video is appearing successfully on Firefox as well. Maybe it is fixed after the site was down today. I'll respond back if I am able to reproduce the issue. Thanks for all the help

[oooookk7]

No problem and welcomed :)

[oooookk7]

Hi @udit7590, are you still experiencing this issue?

[udit7590]

Hi @letchoo . Yes I still experience issues when the conversation is between a firefox and a chrome client. Basically, when a user has joined a room from firefox and another user tries to join the room from chrome, it sends the request to join the room but the logs show sending to peers message and hangs. Nothing proceeds after wards. Any possible reason for that?

[oooookk7]

Hi @udit7590, is it possible to share your both logs for firefox and chrome (in .txt files preferred) to us?

[udit7590]

Hi @letchoo Logs contain the keys used for the process. Is there a safe place where I can share the same?

[oooookk7]

Hi @udit7590, for private sessions, you may open a ticket in our Temasys Support Portal and link in the ticket this github issue. In that case, I'll close this ticket and we will move our debugging session to the Support Portal

[udit7590]

Hi @letchoo Sure

[oooookk7]

@udit7590 ok then, I move our session then.