How to use Jitsi Meet in the EmberJS app

Question

In my Ember app, I use ember-inject-script, which I installed:

npm install --save-dev ember-inject-script 

The controller.js file for my page is as follows:

 import Ember from 'ember'; import injectScript from 'ember-inject-script'; export default Ember.Controller.extend({ init: function() { this._super(); var url = "https://meet.jit.si/external_api.js"; injectScript(url); var domain = "meet.jit.si"; var room = "JitsiMeetAPIExample"; var width = 700; var height = 700; var htmlElement = document.querySelector('#meet'); var api = new JitsiMeetExternalAPI(domain, room, width, height, htmlElement); } }); 

The pattern is as follows:

 <h2>Jitsi Meet</h2> <div id="meet"></div> {{outlet}} 

But I get a console error:

Error processing route: projects.index JitsiMeetExternalAPI not defined ReferenceError: JitsiMeetExternalAPI not defined

Answer 1

• injectScript in asynchronous mode, so you cannot use the JitsiMeetExternalAPI very following statement. You need to use then .

• Another problem is that you are accessing the DOM element in the controller initialization method, which will not be available. usually the controller does not support the DOM. for this I recommend you write a component and use didInsertElement hook

Another alternative approach to loading js at the right time is in beforeModel hook routes, you can just use Ember. $. getJSON (url).

 beforeModel(){ return Ember.$.getJSON(url); }