Got a "TypeError: 'get peerIdentity'" in EmberJS and not in Svelte. Do you know why?

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

GIF

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

graue posted on Nov 20, 2019

• [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

View on GitHub

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!

GIF

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?

Comments

[abhilashlr]

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 say ember g component-class my-video

Inside 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 TwilioVideo import because I believe that was the point where you had been stuck.

Like Isaac has mentioned, please do join us on Ember's discord.

[Francisco Quintero 🇨🇴]

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! 👍🏽

[abhilashlr]

Would it be possible for you to share a gist of what you had tried?

[Francisco Quintero 🇨🇴]

In the components where the importing was failing I did:

-const Video = Twilio.Video;
+import * as Video from 'twilio-video/dist/twilio-video';

And then kept using the library as normal.

[abhilashlr]

And which method are you trying to use? Is it possible to share a github gist?

[Francisco Quintero 🇨🇴]

Sure. Here's the link gist.github.com/cesc1989/3791d184c...

	import Component from '@glimmer/component';
	import { action } from '@ember/object';
	import { tracked } from '@glimmer/tracking';
	import { inject as service } from '@ember/service';
	import * as Video from 'twilio-video/dist/twilio-video';
	import { attachTracks } from "../utils/intrati-twilio";
	export default class CreateRoomComponent extends Component {
	@tracked previewing = false;
	@service router;
	@service('room-name') roomNameService;
	get roomName() {
	let name = this.roomNameService.getName();
	return name;
	}
	@action preview() {
	const localTracksPromise = window.previewTracks
	? Promise.resolve(window.previewTracks)
	: Video.createLocalTracks();
	localTracksPromise.then(
	tracks => {
	window.previewTracks = tracks;
	this.previewing = true;
	const previewContainer = document.getElementById("local-media");
	if (!previewContainer.querySelector("video")) {
	attachTracks(tracks, previewContainer);
	}
	},
	error => {
	console.error("Unable to access local media", error);
	}
	);
	}
	@action continue() {
	this.router.transitionTo('room', this.roomName);
	}
	}

view raw create-room.js hosted with ❤ by GitHub

	import Component from '@glimmer/component';
	import { action } from '@ember/object';
	import { inject as service } from '@ember/service';
	import * as Video from 'twilio-video/dist/twilio-video';
	import {
	attachTracks,
	getTracks,
	participantConnected,
	detachParticipantTracks
	} from "../utils/intrati-twilio";
	export default class RoomComponent extends Component {
	@service('active-room') activeRoomService;
	@service('room-name') roomNameService;
	@service('access-token') accessTokenService;
	@action startRoom() {
	const connectOptions = { name: this.roomNameService.getName() };
	Video.connect(this.accessTokenService.getToken(), connectOptions).then((room) => {
	/* room logic */
	},
	(error) => {
	console.error(`Unable to connect to Room: ${error.message}`);
	});
	}
	get roomUrl() {
	let roomName = this.roomNameService.getName();
	// Set domain in ENV
	let domain = "localhost:4200"
	let roomUrl = `https://${domain}/rooms/${roomName}`
	return roomUrl
	}
	@action copyRoomUrlToClipboard() {
	const copyable = document.getElementById("share-room-name");
	copyable.select();
	document.execCommand('copy');
	}
	}

view raw room.js hosted with ❤ by GitHub

[abhilashlr]

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?

[Francisco Quintero 🇨🇴]

Interesting 🤔. Gonna give it a try.

[abhilashlr]

Sure, let me know how it goes :)

[Francisco Quintero 🇨🇴]

Thanks! Gonna try it tonight. I'll let you know what happens :)

[Isaac Lee]

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-video in Ember. I was wondering if you would like to join Ember Discord (discordapp.com/invite/emberjs) so that you can ask people on the #help channel. Another possibility is to ask on Ember Discourse (discuss.emberjs.com/).

Thanks for writing both blog posts!

Isaac,

[Francisco Quintero 🇨🇴]

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 :)