Twilio-video.js: Error occur after upgrading to [email protected]

[kumail-raza]

Check the attached image for the error details:

• [x] I verified that the error is not occurs with previous version 2.0.0-beta5.
• [x] I have verified that the issue occurs with the latest twilio-video.js release and is not marked as a known issue in the CHANGELOG.md.
• [x] I reviewed the Common Issues and open GitHub issues and verified that this report represents a potentially new issue.

Software versions:

• [x] Browser(s): Chrome
• [x] Operating System: Ubuntu
• [x] twilio-video.js: 2.0.0-beta6
• [x] Third-party libraries (e.g., Angular, React, etc.): Angular 5

[manjeshbhargav]

Hi @smkrn110 ,

Thanks for writing in with your issue. Are you seeing this error during load time or after you have joined a Room? Also, Which version of Chrome did you use while you saw this error?

Thanks,

Manjesh Malavalli
JSDK Team

[kumail-raza]

Hi @manjeshbhargav

After joining a room, then the library throwing this continuously on console.

• [x] Browser(s): Chrome Version 71.0.3578.98 (Official Build) (64-bit)

[manjeshbhargav]

Hi @smkrn110 ,

I tried to reproduce this on my end and could not. Can you add a breakpoint on the line generating the TypeError and see if response is of type RTCStatsReport. Also, it would be great if you can share the output with me.

Thanks,

Manjesh Malavalli
JSDK Team

[kumail-raza]

Attached is the screenshot with the breakpoint and on console, you can check.

I experienced the same issue today.

[manjeshbhargav]

Hi @smkrn110 ,

From your screenshot, it looks like response is an instance of the Chromium's legacy RTCStatsResponse object, which is only used in the SDK for Chrome <67. For Chrome 67+, response should be an instance of RTCStatsReport. Can you also share the exact userAgent string with me? And is this Chrome browser or Electron?

Thanks,

Manjesh Malavalli
JSDK Team

[kumail-raza]

navigator.userAgent

 "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36"

Its a Chrome browser.

Operating System: Ubuntu 18.04.

[kumail-raza]

@manjeshbhargav

Any update on this issues, we already waited for beta6, for re-connection of signaling but encounter with the above issue.

2nd once we will move to beta6, and in a case when 'reconnecting' > 'reconnected' event fires, do the stream automatically recovers that is start playing (audio/video)? or we have to remove/unpublish tracks and republish them?

[manjeshbhargav]

Hi @smkrn110 ,

We are trying to reproduce this issue, and we will reach out once we have more information. Regarding your question about media during reconnection, it should automatically recover once you rejoin the Room. You won't need to unpublish and republish tracks.

Thanks,

Manjesh Malavalli
JSDK Team

[syerrapragada]

Hi @smkrn110,

We have not been able to reproduce the issue. Could you please run the following fiddle in the browser and paste the console output?

https://jsfiddle.net/g8L6pqnx/

Thanks,
Sreeram

[kumail-raza]

@syerrapragada

Following is the details, after executing the snippet you shared me via jsFiddle, also I have attached chrome about info with the version of the chrome. (OS : Ubuntu)*

[kumail-raza]

@syerrapragada

After upgrade to chrome version 73, I am getting RTCStatsReport, 🧐

Question : If I upgrade to twilio version 2.0.0-beta6, so my application going to be unstable with previous version of chrome? 😕 😮

[manjeshbhargav]

Hi @smkrn110 ,

Your application should still work without any issues. It is surprising that in Chrome 71 on Ubuntu, the Promise-based RTCPeerConnection.getStats() returns RTCStatsResponse which is deprecated. We will try and file a Chromium bug about this, although I'm not sure what their policy is about fixing bugs on older versions of Chrome (on Ubuntu in particular, this is not happening on Mac OS and Windows).

Thanks,

Manjesh Malavalli
JSDK Team

[kumail-raza]

Your application should still work without any issues.

But the issue I reported will be face by a user having Chrome 71 with Ubuntu machine! It causing participants webcams are not showing either side, the main reason for reporting this, otherwise I would have put check around the response.forEach 🙂 and go with it.

I am totally confused and not sure to upgrade for beta6 now, where Signaling re-connection mechanism is also important for me, any chance Twilio could help for this in next release?

[manjeshbhargav]

Hi @smkrn110 ,

We periodically publish webrtc stats to our servers so that we can debug any call quality issues later. I think this logic is what is resulting in the errors that you are seeing. A potential workaround can be to disable this feature on versions of Chrome where getStats() resolves with an RTCStatsResponse:

function doesGetStatsResolveWithRTCStatsResponse() {
  const pc = new RTCPeerConnection();
  const promise = pc.getStats();
  return promise instanceof Promise
    ? promise.then(stats => typeof RTCStatsResponse !== 'undefined'
      && stats instanceof RTCStatsResponse)
    : Promise.resolve(false);
}

doesGetStatsResolveWithRTCStatsResponse().then(doesResolve => {
  return Twilio.Video.connect(token, {
    ...
    insights: !doesResolve
    ...
  });
}).then(room => {
  ...
});

Please try it out and let me know if this is good enough to unblock you.

Thanks,

Manjesh Malavalli
JSDK Team

[syerrapragada]

@smkrn110
Did above workaround help mitigate the issue on Chrome 71 (Ubuntu)? Please let us know.

Thanks,
Sreeram

[kumail-raza]

@manjeshbhargav or @syerrapragada

Need quick response I am upgrading to beta11. The above solution not works with the provided snippet above for this issue.

function doesGetStatsResolveWithRTCStatsResponse() {
  const pc = new RTCPeerConnection();
  const promise = pc.getStats();
  return promise instanceof Promise
    ? promise.then(stats => typeof RTCStatsResponse !== 'undefined'
      && stats instanceof RTCStatsResponse)
    : Promise.resolve(false);
}

doesGetStatsResolveWithRTCStatsResponse().then(doesResolve => {
  return Twilio.Video.connect(token, {
    ...
    insights: !doesResolve
    ...
  });
}).then(room => {
  ...
});

I have tried with removing the ! sign insights: doesResolve as doesGetStatsResolveWithRTCStatsResponse resolves to false, so I think ! sign is not needed.

Can respond with quick fix for the issue!

Noted: Not facing this issue with v2.0.0-beta5, what is the difference with the beta5 causing this issue?

Thanks

[kumail-raza]

@syerrapragada, @manjeshbhargav

Snippet you shared previously ..,

var chromeMajorVersion = parseInt(navigator.userAgent.match(/Chrome\/([0-9]+)/)[1], 10);
console.log('Chrome major version:', chromeMajorVersion);

['plan-b', 'unified-plan'].forEach(sdpFormat => {
  new RTCPeerConnection({
    sdpSemantics: sdpFormat
  }).getStats().then(
    stats => console.log(`SDP Format:${sdpFormat}, stats object type: "${typeof stats}", has forEach?: ${typeof stats.forEach !== 'undefined'}`));
});

Result

[kumail-raza]

@manjeshbhargav , @syerrapragada

[kumail-raza]

@manjeshbhargav @syerrapragada

I experienced the same error on Windows, Chrome v74 and v75. forEach is not a function.

//twilio-video.js:20963
function standardizeChromeOrSafariStats(response) {
  // response.forEach
}

Kindly check and updated, following are the platform I have.

Windows: Chrome v74/75
Ubuntu: Chrome v73
Twilio: twilio-video.js v2.0.0-beta11

[manjeshbhargav]

Hi @smkrn110 ,

What do you get if you run typeof RTCStatsResponse in the browser console?

Thanks,

Manjesh Malavalli
JSDK Team

[syerrapragada]

Hi @smkrn110,

I tried on windows chrome v75 and I get the following:

Are you using any custom chrome build?

Regards,
Sreeram

[kumail-raza]

@syerrapragada

Can you check this with chrome on ubuntu?

[kumail-raza]

hi @manjeshbhargav & @syerrapragada

ISSUE FIXED!

On drill down the twilio-video.js I encounter with WebRTC module which enlightened and assist me figuring out this issue. Actually there was a library webrtc.js which was previously used by the product currently I am working on, the main culprit behind the issue. It was overriding object RTCStatsResponse (and others) causing all that mess and on removing that webrtc.js, all working perfectly fine!

Closing this issue.

Regards,