Hi! This is the first time I'm asking a question here at DEV :) Hope you can shed some light on this thing.
Context
I'm working on a personal project that uses the Twilio Video API. This project was started using Svelte and everything was really fine and working.
However, I had to move the project to another JavaScript framework/library after facing issues related to Webpack and the most up to date Svelte router libraries I could find.
I decided to move the code to EmberJS. At first, it was going good BUT
when I imported the twilio-video package in a class file, this error appeared in the browser and halted the execution of the app:
TypeError: 'get peerIdentity' called on an object that does not implement interface RTCPeerConnection.
Of course, I found a related issue in the library GitHub page and it suggested upgrading to a recent version. I did it but the error didn't go away. I even downgraded the library to the same version I was using in the Svelte project but it kept happening.
Importing Twilio-Video breaks page in Firefox 70+ with RTC disabled
#811
- [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.
- [x] I verified that the Quickstart application works in my environment.
- [x] I am not sharing any Personally Identifiable Information (PII) or sensitive account information (API keys, credentials, etc.) when reporting this issue.
Code to reproduce the issue:
import TwilioVideo from 'twilio-video'
...in Firefox 70+ with media.peerconnection.enabled set to false in about:config.
Expected behavior:
Twilio SDK should see that WebRTC is not available and still allow other functions on the page to work.
Actual behavior:
Entire page is brought down at import time by undefined reference to global mozRTCSessionDescription (https://github.com/twilio/twilio-webrtc.js/issues/106).
When I tried patching around this, I hit another undefined reference to RTCPeerConnection.
These references both need to be fixed to ensure importing Twilio-Video, even when WebRTC is disabled, doesn't break non-call related functions on the page. The simplest fix would seem to be accessing both via window.
Software versions:
- Browser(s): Firefox 70+
- Operating System: Linux, but likely all
- twilio-video.js: 2.0.0-beta15
- Third-party libraries (e.g., Angular, React, etc.): not relevant
Funny Thing is...
Just out of curiosity, I tried the complaining version twilio-video 2.0.0-beta16 in the Svelte project and guess what? It worked!
With Svelte the error doesn't happen!
But I'm still stucked in the EmberJS app so I need a solution to keep going.
Fortunately, the Twilio Video library can be used with a CDN and I proceeded to use it that way. The error keeps showing up but it doesn't halt the normal execution of the EmberJS app.
Questions
So now I face the question Why does this happen in EmberJS and not in Svelte? To my knowledge, Svelte is kind of a compiler and that could be related.
Is there a way to keep using the NPM version of the library in a way that the error doesn't break the app?
Top comments (12)
Hi Francisco,
I tried to replicate this in a new ember app, here's what I did.
I created a new component using the ember generator command
ember g component my-video. PS: If you are on higher versions of ember, you need to manually sayember g component-class my-videoInside the components/my-video.js, I tried doing the following import:
import * as TwilioVideo from 'twilio-video';But I ended facing this issue: github.com/twilio/twilio-video.js/... (globals is not defined)
So the solution to it was to say:
import * as TwilioVideo from 'twilio-video/dist/twilio-video';And then use TwilioVideo inside the component as you normally would use.
I've not gone too far using the
TwilioVideoimport because I believe that was the point where you had been stuck.Like Isaac has mentioned, please do join us on Ember's discord.
Hello again!
Just tried (couldn't wait until the night) and your approach worked. Still the error happens but the component doesn't stop working.
Thanks a lot! 👍🏽
Would it be possible for you to share a gist of what you had tried?
In the components where the importing was failing I did:
And then kept using the library as normal.
And which method are you trying to use? Is it possible to share a github gist?
Sure. Here's the link gist.github.com/cesc1989/3791d184c...
I tried this, and without the util imported in the component, things seem to work for me. I'm trying this in Ember 3.17+ app. Maybe something in the util is causing this issue?
Interesting 🤔. Gonna give it a try.
Sure, let me know how it goes :)
Thanks! Gonna try it tonight. I'll let you know what happens :)
Hi, Francisco. A friend from Ember Discord directed me to your blog post about migrating your app to Ember.
You mentioned having trouble with importing
twilio-videoin Ember. I was wondering if you would like to join Ember Discord (discordapp.com/invite/emberjs) so that you can ask people on the#helpchannel. Another possibility is to ask on Ember Discourse (discuss.emberjs.com/).Thanks for writing both blog posts!
Isaac,
Thanks @ijlee2 Going to give a try to the solution shared by @abhilashlr
If that doesn't work, I'll ask in the Discord chat. Either way I think I'm joining the Discord server :)