求助：如何在Ionic 3中集成Voxeet API实现音视频通话

Hey there, I’ve successfully integrated the Voxeet JS SDK into an Ionic 3 project before, so I can help you work through this. The issue you’re facing is likely tied to Ionic’s platform lifecycle or missing configuration steps—let’s break down the process step by step:

1. Add the Voxeet JS SDK to Your Project #

You have two reliable options here:

• CDN Approach (quick setup): Drop this script tag into your src/index.html file, right before the closing </body> tag:

  <script src="https://cdn.voxeet.com/voxeet-sdk-js/latest/VoxeetSDK.min.js"></script>
  

• NPM Install (better for version control): Run this command in your project root:

  npm install @voxeet/voxeet-web-sdk --save
  

  Then, to avoid TypeScript errors, create or update src/declarations.d.ts with this line:

  declare var VoxeetSDK: any;
  

2. Initialize the SDK Correctly #

The key here is waiting for Ionic’s platform to be ready before initializing Voxeet. Ionic needs time to load native dependencies (even for web builds), so wrapping initialization in platform.ready() prevents "SDK not defined" errors.

Let’s create a reusable service (call.service.ts) to handle all Voxeet logic:

import { Injectable } from '@angular/core';
import { Platform } from 'ionic-angular';

@Injectable()
export class CallService {
  constructor(private platform: Platform) {
    this.platform.ready().then(() => {
      // Replace with your actual Voxeet App Key and Secret
      VoxeetSDK.initialize('YOUR_APP_KEY', 'YOUR_APP_SECRET');
    });
  }

  // Create a new conference room
  async createRoom(roomName: string) {
    try {
      const room = await VoxeetSDK.createRoom({ name: roomName });
      return room;
    } catch (err) {
      console.error('Failed to create room:', err);
      throw err;
    }
  }

  // Join an existing room
  async joinRoom(roomId: string) {
    try {
      await VoxeetSDK.join(roomId);
      
      // Handle incoming remote streams
      VoxeetSDK.conference.on('streamAdded', (participant, stream) => {
        if (stream.type === 'Camera') {
          // Create a video element for the remote participant
          const videoEl = document.createElement('video');
          videoEl.id = `video-${participant.id}`;
          videoEl.autoplay = true;
          document.getElementById('remote-videos')?.appendChild(videoEl);
          
          // Attach the stream to the video element
          VoxeetSDK.attachMediaStream(videoEl, stream);
        }
      });
    } catch (err) {
      console.error('Failed to join room:', err);
      throw err;
    }
  }

  // Leave the current room
  async leaveRoom() {
    try {
      await VoxeetSDK.leave();
      // Clean up video elements
      document.getElementById('remote-videos')?.innerHTML = '';
    } catch (err) {
      console.error('Failed to leave room:', err);
      throw err;
    }
  }
}

3. Build the Call UI & Connect to the Service #

Create a call page (call.html) with video containers and action buttons:

<ion-content padding>
  <div class="video-grid">
    <!-- Local video feed -->
    <video id="local-video" autoplay muted class="local-video"></video>
    <!-- Remote video feeds container -->
    <div id="remote-videos" class="remote-videos"></div>
  </div>
</ion-content>

<ion-footer>
  <ion-toolbar>
    <button ion-button full (click)="startCall()">Start Call</button>
    <button ion-button full color="danger" (click)="endCall()">End Call</button>
  </ion-toolbar>
</ion-footer>

Then, in the page’s TypeScript file (call.ts), connect to the service:

import { Component } from '@angular/core';
import { CallService } from '../../services/call.service';

@Component({
  selector: 'page-call',
  templateUrl: 'call.html'
})
export class CallPage {
  constructor(private callService: CallService) {}

  async startCall() {
    const room = await this.callService.createRoom('MyIonicCall');
    await this.callService.joinRoom(room.id);
    
    // Render local video feed
    const localStream = VoxeetSDK.conference.localStream;
    const localVideo = document.getElementById('local-video');
    if (localVideo) {
      VoxeetSDK.attachMediaStream(localVideo, localStream);
    }
  }

  async endCall() {
    await this.callService.leaveRoom();
    // Clear local video
    const localVideo = document.getElementById('local-video');
    if (localVideo) {
      VoxeetSDK.detachMediaStream(localVideo);
    }
  }
}

4. Handle Permissions (Critical for Native Builds) #

For Android/iOS, you need to request camera and microphone permissions. Use these Cordova plugins:

• Install them first:

  cordova plugin add cordova-plugin-android-permissions --save
  cordova plugin add cordova-plugin-ios-permissions --save
  

• Update the CallService to request permissions on initialization:

  // Inside platform.ready() in CallService
  if (this.platform.is('cordova')) {
    const permissions = cordova.plugins.permissions;
    permissions.requestPermissions(
      [permissions.CAMERA, permissions.RECORD_AUDIO],
      (status) => {
        if (!status.hasPermission) {
          console.warn('Camera/microphone permissions denied—call features will not work');
        }
      },
      (err) => console.error('Permission request failed:', err)
    );
  }
  

Troubleshooting Common Issues #

• "VoxeetSDK is not defined": Make sure you’re initializing the SDK after platform.ready(), and your CDN/npm package is loading correctly.
• No video/audio stream: Check permissions (native) or browser permissions (web), and ensure the SDK has access to your camera/mic.
• Failed to join room: Double-check your Voxeet App Key/Secret, and confirm your network allows connections to Voxeet’s servers.

Most of Voxeet’s JS SDK API works directly in Ionic 3—you just need to respect Ionic’s lifecycle events to avoid timing issues.

内容的提问来源于stack exchange，提问作者Kamal Bhf