问题描述
我正在使用最新的opentok客户端API 2.18.0和Ember.js框架构建视频网络应用程序的原型。
我有一个简单的Ember.js页面,控制器和CSS示例,该示例将OK连接到Vonage视频API,但未替换页面video div DOM targetElement(“发布者”)。
我所看到的只是发布在HTML正文后面的新DOM元素中的视频。
问题,为什么没有替换targetElement?
将发布者targetElement更改为无效名称不会引发错误并且行为完全相同。
OT.initPublisher('publisherINVALID'
我的页面
{{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}}
我的控制器
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.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.message);
} else {
session.publish(publisher,function(error) {
if (error) {
console.log('There was an error publishing: ',error.message);
}
});
console.log("INIT VIDEO SESSION PUBLISHED");
}
});
},actions: {
start() {
console.log("Todo CH START");
},cancel() {
this.send('no');
},},});
我的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;
}
解决方法
调用OT.initPublisher
时,Ember可能尚未在模板中呈现HTML。
要检查是否是问题所在,可以在debugger
行之前添加OT.initPublisher
,然后检查DOM。
如果这是问题所在,则可以通过安排渲染完成后运行的代码来解决此问题。您可以通过将控制器的this.initializeSession
方法中对init
的调用替换为schedule('afterRender',this,this.initializeSession)
来实现。使用schedule
import { schedule } from '@ember/runloop';
或者,如果您使用的是最新版本的Ember(3.12或更高版本),则可以考虑使用{{did-insert ...}}
修饰符来调用初始化,而不是将其安排在运行循环中。