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

如何解决使用Ember.js框架的Opentok客户端API

我正在使用最新的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 ...}}修饰符来调用初始化，而不是将其安排在运行循环中。