Twilio-video.js: Participants in same room not able to see videos and listen audio. Firefox only!

[kumail-raza]

Issue: Two participants not able to listen other stream (video,audio), though tracks of the participants in room object are available, also attached with the video tag.

Scenario: Two user joins different rooms initially, (being on the same tabs) without disconnecting from the room, then they both join the common room. Both of them not able to listen each other video, audio.

• [x] I have verified that the issue occurs with the latest twilio-video.js release.
• [x] I verified that the Quickstart application the issue is reproduced.
• [x] I have verified with chrome, its working fine. The issue occurs on FireFox.

Code to reproduce the issue:
Following piece of code is the snippet of the quick start code for twilio-video.js, with code to reproduce.

$.getJSON('/token', function(data) {
  // -------:: START - CODE TO REPRODUCE ::----------- 
    var connectOptions = {
        name: "abc",
        logLevel: 'debug'
    };
    Video.connect(data.token, connectOptions).then((room)=>{
       window.room=room;
       console.log("kr110","success")
    }, function(error) {
        log("kr110",'Could not connect to Twilio: ' + error.message);
    });
  // -------:: END - CODE TO REPRODUCE ::----------- 

  identity = data.identity;
  console.log(identity);

  document.getElementById('room-controls').style.display = 'block';

  // Bind button to join Room.
  document.getElementById('button-join').onclick = function() {
    roomName = document.getElementById('room-name').value;
    if (!roomName) {
      alert('Please enter a room name.');
      return;
    }

    log("Joining room '" + roomName + "'...");
    var connectOptions = {
      name: roomName,
      logLevel: 'debug'
    };

    if (previewTracks) {
      connectOptions.tracks = previewTracks;
    }

    // Join the Room with the token from the server and the
    // LocalParticipant's Tracks.
    Video.connect(data.token, connectOptions).then(roomJoined, function(error) {
      log('Could not connect to Twilio: ' + error.message);
    });
  };

   //.....
});

Expected behavior:

Being on the same tab at the same time user can connect to different rooms!

Actual behavior:

I believe participant stream could share only at one room! Either a twilio library limitation, or webRtc or the browser.

Software versions:

• [x] Browser(s): FireFox (63.0), Chrome (69+)
• [x] Operating System: Ubuntu(18.04)
• [x] twilio-video.js: Quickstart

[manjeshbhargav]

Hi @smkrn110 ,

Thanks for writing in with your issue. I was wondering how you are getting the value for data.identity, which you send /token in order to create an AccessToken. If for some reason you are using the same string for each user, then when the second user joins, the first user will be kicked out of the Room due to duplicate identity.

Also, it looks like you are setting the first room to window.room. Can you make sure you're not setting the second room to window.room in the roomJoined callback?

Also, can you give me some Room SIDs which for which I can check our server logs? That will help me in trying to debug this issue further.

Thanks,

Manjesh Malavalli
JSDK Team

[kumail-raza]

Hi @manjeshbhargav,

It is all quickstart app provided by twilio itself. So /token provides random identity as server fetch from some randomname file, for window.room its was just for testing purpose.

My query is, could one person connects to, more than one room at the same time for video/audio chatting?

Since I am not able to achieve it. I like to know; the issue is from twilio api or it is related to webRTC or limitation at browsers end.

Thanks.

[manjeshbhargav]

@smkrn110 ,

You should be able to connect to two Rooms at the same time. The reason I asked about window.room was in roomJoined, we also set window.room to the second Room that you connect to. So I wanted to make sure you're not overriding that global variable.

Can you give me the Room SIDs for the 2 Rooms that you join? That will help me to look at our server-side logs.

Thanks,

Manjesh Malavalli
JSDK Team

[kumail-raza]

Ok @manjeshbhargav

Following are the Room SIDs

smkrn110_room1 : RMaf8865156ec8d168321ae3178fb6462e|
smkrn110_room2 : RM0402af643d511211a560fe457c37f625

Issue:
Unable to see the video of remote participants in 2nd room.

Steps to reproduce:
Two person A and B.
1) Both join to room room1 first.
2) When both of them join 2nd room room2 without leaving the first room, from the same tab.

Then participants (in 2nd room) not able to see remote person video, i have inspect the DOM everything seems to attached also.

Like to mention again, I have reproduce this issue with twilio quickstart app for video-js.

[kumail-raza]

Any progress on this, make sure the issue is only face with the firefox, chrome is working fine. For other browser I have not test it.

[manjeshbhargav]

Hi @smkrn110 ,

I was able to reproduce the behavior you are seeing. We are in the process of figuring out why this is happening only with Firefox. I will get back to you as soon as I have more information.

In the meantime, I was wondering what use case you are trying to solve by connecting to 2 Rooms at once? I would love to know more about it. Also, I noticed that the Rooms you connect to are "group" Rooms. I did not see this behavior in a "peer-to-peer" Room.

So, while we are working on this I wonder if switching the default Room type to "peer-to-peer" in your Twilio Console would be a good stop-gap measure.

Please let me know what you think.

Thanks,

Manjesh Malavalli
JSDK Team

[kumail-raza]

Any progress on this issue?

[bobin141322]

Hi Twilio team,

I have the same issue with IOS 11.0.3 -> Firefox: 63.0.3. I only see video but cannot hear audio. When I log Status from audio sent from IOS, using code:

this.activeRoom.getStats().then(statsReportArray => {
console.log(statsReportArray); })

I get log:

participants":[{"sid":"PA63b644971f93565d278641a0f56723f7","identity":"5bd662c9b1c31b000792e990:patient1 Pham:patient","tracks":[{"kind":"audio","priority":"medium","id":"c73b2A4eAcb6cb70Ec27B0c3A3aCC31c",

and

audioLevel: null
​
bytesReceived: 0
​
codec: null
​
jitter: 0
​
packetsLost: 0
​
packetsReceived: 0
​
ssrc: undefined
​
timestamp: 1543915618943
​
trackId: "c73b2A4eAcb6cb70Ec27B0c3A3aCC31c"
​
trackSid: "MT33cea478e5d36768e22e722c7f077327"

-Room Sid: "sid":"RM144bbdef4cc3e9614cbf46234b2be9c5","name":"RM144bbdef4cc3e9614cbf46234b2be9c5

I investigate a long time but I cannot find out solution. Please help me check this.

Thanks,
Kieu

[kumail-raza]

19days passed any update?

[manjeshbhargav]

Hi @smkrn110 ,

We have a bug filed for this and it is in our backlog. We will reach out to you once we have made some progress. Please watch this space for updates.

Thanks,

Manjesh Malavalli
JSDK Team

[bobin141322]

@manjeshbhargav
Could you help me have a look my issue? Is it the problem from Twilio? I need your confirmation to give answer to client. They are worry about this.
Please!
Thanks,
Kieu

[manjeshbhargav]

Hi @bobin141322 ,

I think what you are experiencing is a different issue than the one under discussion here. Your issue looks like a Safari <--> Firefox interop problem. We have released [email protected], which fixes this problem. Please see this issue for details.

Thanks,

Manjesh Malavalli
JSDK Team

[bobin141322]

Hi @manjeshbhargav,

I try upgrade to 1.14.2 newest such the comment by syerrapragada in your recommend link. But the issue still exist. I think this is new issue.
I use IOS native App (not use Safari) with IOS 11.0.3 and Firefox: 63.0.3. When I recieve track audio from remote track, sometime I see audio track have property muted = true at track.mediaStreamTrack and I cannot hear any thing (70%).

enabled: true
​
id: "{f6a881d4-3f6e-4194-bdb3-a92c890aa03a}"
​
kind: "audio"
​
label: "remote audio"
​
muted: true
​
onended: null
​
onmute: null
​
onunmute: null
​
readyState: "live"

I tried set enable for remote track: track.enable() but I cannot and get error: "Uncaught (in promise): TypeError: track.enable is not a function.

Room ID: "sid":"RM8cd763883568c567337b133af105bfb0"
audio log:
audioLevel: null
​
bytesReceived: 0
​
codec: null
​
jitter: 0
​
packetsLost: 0
​
packetsReceived: 0
​
ssrc: undefined
​
timestamp: 1544078875156
​
trackId: "34bA3Ab85AfaFC6fBAdcD49D056D13De"
​
trackSid: "MTfc4a9aa5f748c65c0bd93ab96594cf29"
​
I am trying to enable track for remote audio. Could you give me any advice?

Thanks,
Kieu

[bobin141322]

I also test on version 2.0.0 beta4. This issue still happen.

[manjeshbhargav]

Hi @bobin141322 ,

In that case, can you open a new issue? It will help us to track progress made on it.

Thanks,

Manjesh Malavalli
JSDK Team

[bobin141322]

Hi @manjeshbhargav,
Thanks for you reply. I open new issue as your suggestion.
https://github.com/twilio/twilio-video.js/issues/478
Thanks,
Kieu

[kumail-raza]

Hi @manjeshbhargav,

What is the progress with the issue?

[kumail-raza]

@manjeshbhargav

Any update on the initial prob, reported on this issue? It was experienced only with the firefox.

[makarandp0]

Hi @smkrn110, We looked more into this have found the root cause. Looks like the DTLS connection for 2nd participant is not established when two rooms are created from same Firefox tab. We have a solution in mind, and will be trying it out soon. We might have an update in couple of weeks.

Thanks,
Makarand
JSDK Team

[sherif-hafiz]

Hi @makarandp0 is there any updates on this issue?

[makarandp0]

Hello @sherif-hafiz and @smkrn110 ,
This issue (VMS-1946) is now fixed. It was issue with the backend, which means you do not need to update the client sdk for the fix. Please let me know if you still seeing otherwise.

Thanks
Makarand