How do I use Jitsi Meet in an EmberJS app

Question

In my Ember app I'm using ember-inject-script which I installed:

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

The controller.js file for my page looks like this:

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 Template is this:

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

Yet I get a console error:

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

Answer 1

• injectScript in asynchronous so you can't use JitsiMeetExternalAPI very next statement. You need to use then.

• Another issue is, you are accessing the DOM element in controller init method, which will not be available. generally controller is not DOM aware. for this I will encourage you to write Component and use didInsertElement hook

One more alternative approach to load js at the required time, is in routes beforeModel hook, you can just use Ember.$.getJSON(url).

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