使用Ember.js框架的Opentok客户端API

我正在使用最新的opentok客户端API 2.18.0和Ember.js框架构建一个视频web应用程序原型

我有一个简单的Ember.js页面、控制器和css示例，它将OK连接到Vonage视频API，但没有替换页面video div DOM targetElement（“发布者”）

我所看到的只是附加到HTML主体的新DOM元素中发布的视频

问题，为什么不替换targetElement

将publisher targetElement更改为无效名称不会引发错误，其行为与此完全相同

OT.initPublisher（'publisherINVALID'

我的页面

我的CSS

---

可能是在调用

OT.initPublisher

时，Ember尚未在模板中呈现HTML

要检查这是否是问题所在，可以在

OT.initPublisher

行的前面添加一个

debugger

，并检查DOM

如果这是一个问题，您可以通过在渲染完成后安排代码运行来解决。您可以通过将控制器的

init

方法中对

this.initializeSession

的调用替换为

schedule（'afterRender'，this，this.initializeSession'）来完成此操作

.Import

schedule

使用

Import{schedule}从'@ember/runloop'导入；

或者，如果您使用的是Ember的最新版本（3.12或更高版本），则可以使用

{{did insert…}

修饰符调用初始化，而不是在runloop上调度初始化

{{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.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');
    },
  },
});

.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;
}