Ionic 3 Angular 5混合App集成OpenTok在Android端初始化发布者时崩溃

看起来你已经搭建好了核心流程，但发布者初始化时崩溃大概率是几个细节没处理到位。结合Ionic混合应用的特性和OpenTok Cordova插件的要求，我整理了具体的修复方案：

1. 修正Token的拼写错误 #

你在session.connect里用了硬编码的'myTokenGoeshere'，但构造函数里已经定义了this.token变量，这明显是笔误。用变量替换硬编码值，避免无效token导致的连接异常。

2. 修复订阅逻辑的语法错误 #

这段代码有个明显的语法问题：

this.session.subscribe(event.stream, 'subscriber');
this.session.subscribe.subscribeToVideo = true

session.subscribe()返回的是订阅对象，你需要把它赋值给变量后再修改属性，而不是直接在subscribe方法上设置，这会触发未定义错误进而引发崩溃。

3. 确保DOM元素存在后再初始化发布者 #

Ionic的页面渲染是异步的，startCall执行时，页面上的#publisher和#subscriber元素可能还没渲染完成，直接调用OT.initPublisher会找不到容器导致崩溃。建议在页面生命周期钩子（比如ionViewDidEnter）后执行通话逻辑，或者初始化前检查元素是否存在。

4. 正确使用Cordova版OpenTok API #

混合应用中要使用Cordova的OpenTok插件API，而非web版OT对象（虽然部分方法名一致，但底层实现不同），确保你已经正确安装了cordova-plugin-opentok插件。

修正后的完整代码 #

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
declare var OT: any;

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  session: any;
  publisher: any;
  apiKey: string;
  sessionId: string;
  token: string;

  constructor(public navCtrl: NavController) {
    this.apiKey = '46271262';
    this.sessionId = '1_MX40NjI3MTI2Mn5- MTU1MDU2MTE3NDk4OX5RcmQzSmQ2Z2VzZnl4RmNXNEY5ckJQc0V-fg';
    this.token = 'myTokenGoesHere'; // 替换为你的有效令牌
  }

  // 确保页面DOM渲染完成后再执行通话逻辑
  ionViewDidEnter() {
    // 可在此处初始化或给按钮绑定事件，规避DOM未就绪问题
  }

  startCall() {
    // 初始化会话
    this.session = OT.initSession(this.apiKey, this.sessionId);

    this.session.on({
      streamCreated: (event) => {
        // 订阅远程流并保存订阅对象，可直接在配置中设置视频订阅属性
        const subscriber = this.session.subscribe(event.stream, 'subscriber', {
          subscribeToVideo: true
        });
        OT.updateViews();
      },
      streamDestroyed: (event) => {
        console.log(`Stream ${event.stream.name} ended because ${event.reason}`);
        OT.updateViews();
      },
      // 增加错误监听，方便排查问题
      error: (error) => {
        console.error('Session error:', error);
      }
    });

    // 使用正确的token变量连接会话
    this.session.connect(this.token, (error) => {
      if (error) {
        console.error('Connection error:', error);
        return;
      }

      // 确保publisher容器存在后初始化发布者
      const publisherContainer = document.getElementById('publisher');
      if (!publisherContainer) {
        console.error('Publisher container not found!');
        return;
      }

      // 初始化发布者，配置基础参数
      this.publisher = OT.initPublisher('publisher', {
        width: '100%',
        height: '100%',
        publishAudio: true,
        publishVideo: true
      }, (pubError) => {
        if (pubError) {
          console.error('Publisher init error:', pubError);
          return;
        }
        alert("Publish Started");
        this.session.publish(this.publisher);
      });
    });
  }
}

额外检查项 #

• 确认你的home.html中存在对应的容器元素：

  <div id="publisher" style="width: 300px; height: 200px;"></div>
  <div id="subscriber" style="width: 300px; height: 200px;"></div>
  <button ion-button (click)="startCall()">Start Call</button>
  

• 确保已安装OpenTok Cordova插件：

  cordova plugin add cordova-plugin-opentok --variable OPENTOK_API_KEY=YOUR_API_KEY
  

• 建议使用真实设备测试，避免在浏览器中测试混合应用的原生插件功能。

内容的提问来源于stack exchange，提问作者LivingDigital Demos