Opentok client API using Ember.js framework - ember.js

Question

I am building a prototype video web application using latest opentok client API 2.18.0 and the Ember.js framework.
I have a simple Ember.js page, controller and css example which connects OK to Vonage video API but the page video div DOM targetElement ("publisher") is not replaced.
All I see is the published video in a new DOM element appended to the HTML body.
Question, why is the targetElement not replaced?
Changing the publisher targetElement to an invalid name does not throw an error and behaves exactly the same.
OT.initPublisher('publisherINVALID'
My page
{{global/site-header}}
{{#global/app-container}}
<div class="Container">
{{!-- TODO opentok is not putting video here? --}}
<div id="videos" class="VideoParticipant">
<div id="subscriber" class="VideoParticipant-subscriber"></div>
<div id="publisher" class="VideoParticipant-publisher"></div>
</div>
{{forms/buttons/button-action
class="Button--block"
text='START'
onClick=(action 'start')
}}
</div>
{{/global/app-container}}
My controller
import Ember from 'ember';
import OT from '#opentok/client';
const {
Controller,
Object: EmberObject,
} = Ember;
// TODO get session, token from server
const apiKey = "REMOVED";
const sessionId = "REMOVED";
const token = "REMOVED";
export default Controller.extend({
init() {
this._super(...arguments);
this.initializeSession();
},
initializeSession() {
var session = OT.initSession(apiKey, sessionId);
this.session = session;
// Subscribe to a newly created stream
session.on('streamCreated', function(event) {
session.subscribe(event.stream, 'subscriber', {
insertMode: 'replace'
}, function(error) {
if (error) {
console.log('There was an error subscribing: ', error.name, error.message);
return;
}
});
});
// Create a publisher
var publisher = OT.initPublisher('publisher', {
insertMode: 'replace'
}, function(error) {
if (error) {
console.log('There was an error initializing publisher: ', error.name, error.message);
return;
}
});
// Connect to the session
session.connect(token, function(error) {
// If the connection is successful, initialize a publisher and publish to the session
if (error) {
console.log('There was an error connecting to session: ', error.name, error.message);
} else {
session.publish(publisher, function(error) {
if (error) {
console.log('There was an error publishing: ', error.name, error.message);
}
});
console.log("INIT VIDEO SESSION PUBLISHED");
}
});
},
actions: {
start() {
console.log("TODO CH START");
},
cancel() {
this.send('no');
},
},
});
My CSS
.VideoParticipant {
position: relative;
width: 100%;
height: 100%;
margin-left: auto;
margin-right: auto;
}
.VideoParticipant-subscriber {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 10;
}
.VideoParticipant-publisher {
position: relative;
width: 360px;
height: 240px;
margin-bottom: 10px;
margin-left: 10px;
z-index: 100;
border: 3px solid white;
border-radius: 3px;
}

Answer 1

It may be that Ember has not yet rendered the HTML in your template when OT.initPublisher is called.
To check to see if this is the issue, you could add a debugger immediately before the OT.initPublisher line, and inspect the DOM.
If that is the issue, you could work around it by scheduling your code run after rendering is complete. You could do this by replacing the call to this.initializeSession in the init method of the controller, with schedule('afterRender', this, this.initializeSession). Import schedule using import { schedule } from '#ember/runloop';
Alternatively, if you are on a recent version of Ember (3.12 or higher), you can look into using the {{did-insert ...}} modifier to invoke the initialization instead of scheduling it on the runloop.