DEV Community

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

Francisco Quintero 🇨🇴 on April 02, 2020

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 pe...
Collapse
 
abhilashlr profile image
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.

Collapse
 
cescquintero profile image
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! 👍🏽

Collapse
 
abhilashlr profile image
abhilashlr

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

Thread Thread
 
cescquintero profile image
Francisco Quintero 🇨🇴 • Edited

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.

Thread Thread
 
abhilashlr profile image
abhilashlr

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

Thread Thread
 
cescquintero profile image
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
Thread Thread
 
abhilashlr profile image
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?

Thread Thread
 
cescquintero profile image
Francisco Quintero 🇨🇴

Interesting 🤔. Gonna give it a try.

Thread Thread
 
abhilashlr profile image
abhilashlr

Sure, let me know how it goes :)

Collapse
 
cescquintero profile image
Francisco Quintero 🇨🇴

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

Collapse
 
ijlee2 profile image
Isaac Lee • Edited

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,

Collapse
 
cescquintero profile image
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 :)