@unisphere/models-sdk-js 1.2.0 → 1.3.0

package/index.esm.js

@@ -4423,7 +4423,8 @@ class AvatarControlSDK {
             id: config.avatarId
           },
           voiceConfig: config.voiceId ? {
-            id: config.voiceId
+            id: config.voiceId,
+            modelId: 'eleven_flash_v2_5'
           } : undefined
         })
       });
@@ -4891,11 +4892,12 @@ class PeerConnectionManager {
     }
     const config = {
       iceServers: this.iceServers,
-      iceTransportPolicy: this.iceTransportPolicy
+      iceTransportPolicy: this.iceTransportPolicy,
+      bundlePolicy: 'max-bundle'
     };
     this.logger.info('Creating RTCPeerConnection');
     this.pc = new RTCPeerConnection(config);
-    // Setup event handlers
+    // Setup event handlersCan you
     this.setupEventHandlers();
     this.logger.info('RTCPeerConnection created successfully');
   }
@@ -5272,32 +5274,30 @@ class AvatarRTCSDK {
     this.signalingManager = null;
     this.videoElement = null;
     this.state = ConnectionState.DISCONNECTED;
-    // Reconnection state
-    this.whepUrl = null;
     this.reconnectAttempts = 0;
     this.isReconnecting = false;
     // Event handlers
     this.eventHandlers = new Map();
-    this.iceServers = (config === null || config === void 0 ? void 0 : config.iceServers) || DEFAULT_ICE_SERVERS;
-    this.iceTransportPolicy = (config === null || config === void 0 ? void 0 : config.iceTransportPolicy) || 'all';
-    this.retryConfig = (config === null || config === void 0 ? void 0 : config.retryConfig) || DEFAULT_RETRY_CONFIG;
-    this.logger = (config === null || config === void 0 ? void 0 : config.logger) || createLogger('AvatarRTCSDK', parseLogLevel(config === null || config === void 0 ? void 0 : config.logLevel));
-    this.logger.info('Initialized AvatarRTCSDK');
+    if (!config.whepUrl) {
+      throw new AvatarError('WHEP URL is required', AvatarErrorCode.INVALID_ARGUMENT);
+    }
+    this.whepUrl = config.whepUrl;
+    this.iceServers = config.iceServers || DEFAULT_ICE_SERVERS;
+    this.iceTransportPolicy = config.iceTransportPolicy || 'all';
+    this.retryConfig = config.retryConfig || DEFAULT_RETRY_CONFIG;
+    this.logger = config.logger || createLogger('AvatarRTCSDK', parseLogLevel(config.logLevel));
+    this.logger.info('Initialized AvatarRTCSDK with WHEP URL:', this.whepUrl);
   }
   /**
    * Connect to WebRTC endpoint using WHEP URL with retry logic
-   *
-   * @param whepUrl - WHEP URL for WebRTC signaling
    */
-  connect(whepUrl) {
+  connect() {
     return __awaiter(this, void 0, void 0, function* () {
-      this.logger.info('Connecting to WHEP URL:', whepUrl);
+      this.logger.info('Connecting to WHEP URL:', this.whepUrl);
       if (this.state === ConnectionState.CONNECTING || this.state === ConnectionState.CONNECTED) {
         this.logger.warn('Already connecting or connected, ignoring');
         return;
       }
-      // Store whepUrl for reconnection
-      this.whepUrl = whepUrl;
       this.reconnectAttempts = 0;
       this.setState(ConnectionState.CONNECTING);
       try {
@@ -5326,9 +5326,6 @@ class AvatarRTCSDK {
    */
   connectInternal() {
     return __awaiter(this, void 0, void 0, function* () {
-      if (!this.whepUrl) {
-        throw new AvatarError('WHEP URL not set', AvatarErrorCode.INVALID_ARGUMENT);
-      }
       // Create peer connection manager
       this.pcManager = new PeerConnectionManager({
         iceServers: this.iceServers,
@@ -5442,7 +5439,6 @@ class AvatarRTCSDK {
     // Stop any ongoing reconnection attempts
     this.isReconnecting = false;
     this.reconnectAttempts = 0;
-    this.whepUrl = null;
     // Stop video
     if (this.videoElement) {
       if (this.videoElement.srcObject) {
@@ -6498,6 +6494,7 @@ class KalturaAvatarSession {
    * @param config - Optional configuration
    */
   constructor(apiKey, config) {
+    this.rtcSDK = null;
     this.state = SessionState.IDLE;
     this.sessionId = null;
     // Event handlers
@@ -6507,6 +6504,7 @@ class KalturaAvatarSession {
     }
     const logLevel = (config === null || config === void 0 ? void 0 : config.logLevel) || 'info';
     this.logger = createLogger('KalturaAvatarSession', parseLogLevel(logLevel));
+    this.config = config;
     this.logger.info('Initializing Kaltura Avatar SDK');
     // Initialize Control SDK
     const controlConfig = {
@@ -6516,15 +6514,6 @@ class KalturaAvatarSession {
       logLevel
     };
     this.controlSDK = new AvatarControlSDK(controlConfig);
-    // Initialize RTC SDK
-    const rtcConfig = {
-      iceServers: config === null || config === void 0 ? void 0 : config.iceServers,
-      iceTransportPolicy: config === null || config === void 0 ? void 0 : config.iceTransportPolicy,
-      logger: this.logger
-    };
-    this.rtcSDK = new AvatarRTCSDK(rtcConfig);
-    // Setup RTC event handlers
-    this.setupRTCEventHandlers();
     this.logger.info('Kaltura Avatar SDK initialized');
   }
   /**
@@ -6539,6 +6528,7 @@ class KalturaAvatarSession {
    */
   createSession(options) {
     return __awaiter(this, void 0, void 0, function* () {
+      var _a, _b;
       this.logger.info('Creating session with options:', options);
       // Validate state
       if (this.state !== SessionState.IDLE && this.state !== SessionState.ERROR) {
@@ -6563,11 +6553,35 @@ class KalturaAvatarSession {
         const initResponse = yield this.controlSDK.initClient(this.sessionId);
         const whepUrl = initResponse.whepUrl;
         this.logger.info('Client initialized, WHEP URL:', whepUrl);
-        // Step 3: Connect WebRTC
-        this.logger.info('Step 3: Connecting WebRTC');
-        yield this.rtcSDK.connect(whepUrl);
+        // Convert TURN server fields to ICE servers format
+        const iceServers = [{
+          urls: [`turn:${initResponse.turn.url}:80?transport=udp`, `turn:${initResponse.turn.url}:443?transport=udp`, `turn:${initResponse.turn.url}:80?transport=tcp`],
+          username: initResponse.turn.username,
+          credential: initResponse.turn.credential
+        }];
+        this.logger.info('ICE servers configured:', iceServers);
+        // Step 3: Initialize RTC SDK with WHEP URL and ICE servers from backend
+        this.logger.info('Step 3: Initializing RTC SDK');
+        const rtcConfig = {
+          whepUrl,
+          // Use ICE servers from backend response, fallback to config if not provided
+          iceServers: iceServers || ((_a = this.config) === null || _a === void 0 ? void 0 : _a.iceServers),
+          iceTransportPolicy: (_b = this.config) === null || _b === void 0 ? void 0 : _b.iceTransportPolicy,
+          logger: this.logger
+        };
+        this.rtcSDK = new AvatarRTCSDK(rtcConfig);
+        // Setup RTC event handlers
+        this.setupRTCEventHandlers();
+        // Step 4: Connect WebRTC
+        this.logger.info('Step 4: Connecting WebRTC');
+        yield this.rtcSDK.connect();
         this.setState(SessionState.READY);
         this.logger.info('Session ready');
+        // Step 5: Auto-attach video if container ID provided
+        if (options.videoContainerId) {
+          this.logger.info('Auto-attaching avatar to container:', options.videoContainerId);
+          this.attachAvatar(options.videoContainerId);
+        }
       } catch (error) {
         this.logger.error('Failed to create session:', error);
         this.setState(SessionState.ERROR);
@@ -6577,14 +6591,35 @@ class KalturaAvatarSession {
     });
   }
   /**
-   * Attach avatar video to a video element
+   * Attach avatar video to a div container by creating a video element inside it
    *
-   * @param videoElement - HTML video element to display avatar
+   * @param containerId - ID of the div element to attach the avatar video to
    */
-  attachAvatar(videoElement) {
-    this.logger.info('Attaching avatar to video element');
-    if (!videoElement || !(videoElement instanceof HTMLVideoElement)) {
-      throw new AvatarError('Invalid video element', AvatarErrorCode.VIDEO_ELEMENT_INVALID);
+  attachAvatar(containerId) {
+    this.logger.info('Attaching avatar to container:', containerId);
+    if (!containerId || typeof containerId !== 'string') {
+      throw new AvatarError('Invalid container ID', AvatarErrorCode.INVALID_ARGUMENT);
+    }
+    if (!this.rtcSDK) {
+      throw new AvatarError('RTC SDK not initialized. Create a session first.', AvatarErrorCode.INVALID_STATE);
+    }
+    // Find the container element
+    const container = document.getElementById(containerId);
+    if (!container) {
+      throw new AvatarError(`Container element with ID '${containerId}' not found`, AvatarErrorCode.VIDEO_ELEMENT_INVALID);
+    }
+    // Create video element if it doesn't exist
+    let videoElement = container.querySelector('video');
+    if (!videoElement) {
+      videoElement = document.createElement('video');
+      videoElement.setAttribute('autoplay', '');
+      videoElement.setAttribute('playsinline', '');
+      videoElement.style.width = '100%';
+      videoElement.style.height = '100%';
+      container.appendChild(videoElement);
+      this.logger.info('Created new video element in container');
+    } else {
+      this.logger.info('Using existing video element in container');
     }
     this.rtcSDK.attachVideo(videoElement);
     this.logger.info('Avatar attached');
@@ -6656,18 +6691,23 @@ class KalturaAvatarSession {
       this.setState(SessionState.ENDED);
       try {
         // Disconnect RTC first
-        this.rtcSDK.disconnect();
+        if (this.rtcSDK) {
+          this.rtcSDK.disconnect();
+        }
         // End session with backend
         if (this.sessionId) {
           yield this.controlSDK.endSession(this.sessionId);
           this.sessionId = null;
         }
+        // Clear RTC SDK reference
+        this.rtcSDK = null;
         this.setState(SessionState.IDLE);
         this.logger.info('Session ended successfully');
       } catch (error) {
         this.logger.error('Error ending session:', error);
         // Set state to idle anyway to allow creating new session
         this.setState(SessionState.IDLE);
+        this.rtcSDK = null;
         throw error;
       }
     });
@@ -6682,6 +6722,9 @@ class KalturaAvatarSession {
    * Get current connection state
    */
   getConnectionState() {
+    if (!this.rtcSDK) {
+      return ConnectionState.DISCONNECTED;
+    }
     return this.rtcSDK.getConnectionState();
   }
   /**
@@ -6716,6 +6759,9 @@ class KalturaAvatarSession {
    * Setup event handlers for RTC SDK
    */
   setupRTCEventHandlers() {
+    if (!this.rtcSDK) {
+      return;
+    }
     this.rtcSDK.on('connected', () => {
       this.emit('connectionChange', ConnectionState.CONNECTED);
     });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unisphere/models-sdk-js",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "author": "kaltura",
   "private": false,
   "license": "AGPL-3.0",

package/src/KalturaAvatarSession.d.ts

@@ -9,8 +9,16 @@
  * ```typescript
  * const session = new KalturaAvatarSession('your-api-key');
  *
+ * // Option 1: Auto-attach during session creation
+ * await session.createSession({
+ *   avatarId: 'avatar-123',
+ *   videoContainerId: 'avatar-container'
+ * });
+ *
+ * // Option 2: Attach manually after session creation
  * await session.createSession({ avatarId: 'avatar-123' });
- * session.attachAvatar(videoElement);
+ * session.attachAvatar('avatar-container');
+ *
  * await session.sayText('Hello from Kaltura Avatar!');
  * await session.endSession();
  * ```
@@ -21,8 +29,9 @@ import { AvatarConfig, ConnectionState, CreateSessionOptions, SessionState, Sess
  */
 export declare class KalturaAvatarSession {
     private readonly controlSDK;
-    private readonly rtcSDK;
+    private rtcSDK;
     private readonly logger;
+    private readonly config;
     private state;
     private sessionId;
     private eventHandlers;
@@ -45,11 +54,11 @@ export declare class KalturaAvatarSession {
      */
     createSession(options: CreateSessionOptions): Promise<void>;
     /**
-     * Attach avatar video to a video element
+     * Attach avatar video to a div container by creating a video element inside it
      *
-     * @param videoElement - HTML video element to display avatar
+     * @param containerId - ID of the div element to attach the avatar video to
      */
-    attachAvatar(videoElement: HTMLVideoElement): void;
+    attachAvatar(containerId: string): void;
     /**
      * Send audio file for the avatar to speak
      *

package/src/control-sdk/types.d.ts

@@ -31,6 +31,15 @@ export interface InitClientResponse {
     success: boolean;
     /** WHEP URL for WebRTC connection */
     whepUrl: string;
+    /** TURN server configuration */
+    turn: {
+        /** TURN server URL */
+        url: string;
+        /** TURN server username */
+        username: string;
+        /** TURN server credential */
+        credential: string;
+    };
     /** Optional error message if initialization failed */
     error?: string;
 }

package/src/rtc-sdk/AvatarRTCSDK.d.ts

@@ -26,17 +26,15 @@ export declare class AvatarRTCSDK {
     private readonly iceServers;
     private readonly iceTransportPolicy;
     private readonly retryConfig;
-    private whepUrl;
+    private readonly whepUrl;
     private reconnectAttempts;
     private isReconnecting;
     private eventHandlers;
-    constructor(config?: RTCConfig);
+    constructor(config: RTCConfig);
     /**
      * Connect to WebRTC endpoint using WHEP URL with retry logic
-     *
-     * @param whepUrl - WHEP URL for WebRTC signaling
      */
-    connect(whepUrl: string): Promise<void>;
+    connect(): Promise<void>;
     /**
      * Internal connection logic (without retry)
      */

package/src/rtc-sdk/types.d.ts

@@ -7,6 +7,8 @@ import { RetryConfig } from '../types';
  * Configuration for the RTC SDK
  */
 export interface RTCConfig {
+    /** WHEP URL for WebRTC connection */
+    whepUrl: string;
     /** ICE servers for WebRTC connection */
     iceServers?: RTCIceServer[];
     /** ICE transport policy */

package/src/types.d.ts

@@ -26,6 +26,8 @@ export interface CreateSessionOptions {
     avatarId: string;
     /** Optional voice ID for the avatar */
     voiceId?: string;
+    /** Optional ID of the div element to automatically attach the avatar video to */
+    videoContainerId?: string;
 }
 /**
  * Configuration for retry logic with exponential backoff