@trtc/calls-uikit-vue2 4.4.8 → 4.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trtc/calls-uikit-vue2",
-  "version": "4.4.8",
+  "version": "4.5.0",
   "main": "./tuicall-uikit-vue2.umd.js",
   "module": "./tuicall-uikit-vue2.es.js",
   "types": "./types/index.d.ts",
@@ -13,9 +13,10 @@
     "directory": "Web"
   },
   "dependencies": {
-    "@tencentcloud/tui-core-lite": "1.0.0",
-    "@trtc/call-engine-lite-js": "~3.5.8",
-    "@tencentcloud/lite-chat": "^1.6.3"
+    "@tencentcloud/tui-core-lite": "~1.0.1",
+    "@trtc/call-engine-lite-js": "~4.0.0",
+    "@tencentcloud/lite-chat": "^1.6.3",
+    "@trtc/call-engine-lite-wx": "~4.0.0"
 },
   "bugs": {
     "url": "https://github.com/tencentyun/TUICallKit/issues"

package/src/Components/components/GroupCall/MediaContainer/MediaContainer.vue

@@ -151,11 +151,19 @@ const visibleStreamIdList = computed(() => {
     }
   });
 });
-const showStream = computed(() => !(
-  callRole.value === CallRole.CALLEE
-  && callStatus.value === CallStatus.CALLING
-  && !isFloatWindow.value
-));
+const showStream = computed(() => {
+  // HarmonyOS: keep stream visible during CALLEE CALLING state to avoid join room timeout
+  if (TUIGlobal.isWxHarmony && callRole.value === CallRole.CALLEE && callStatus.value === CallStatus.CALLING) {
+    console.warn('HarmonyOS: keeping stream visible during CALLEE CALLING state');
+    return true;
+  }
+
+  return !(
+    callRole.value === CallRole.CALLEE
+    && callStatus.value === CallStatus.CALLING
+    && !isFloatWindow.value
+  );
+});
 
 const mediaContainerStyle = computed(() => {
   let visibility = '';

package/src/Components/components/common/TopBar/TopBar.vue

@@ -21,9 +21,11 @@
         <div class="control-item">
           <Minimize v-if="!isPC && showMinimize" />
         </div>
+        <!-- @if process.env.BUILD_TARGET!='MINI' -->
         <div class="control-item">
           <AITranscriberSwitchH5 v-if="showAITranscriberSwitch" />
         </div>
+        <!-- @endif -->
       </div>
     </Col>
     <Col :span="8" justify="center" align="center">
@@ -62,8 +64,10 @@ import FullScreen from '../Button/FullScreen.vue';
 // @endif
 import InviteUser from '../Button/InviteUser.vue';
 import Timer from '../Timer/Timer.vue';
+// @if process.env.BUILD_TARGET!='MINI'
 import AITranscriberSwitch from '../AIAssistant/components/AITranscriberSwitchPC.vue';
 import AITranscriberSwitchH5 from '../AIAssistant/components/AITranscriberSwitchH5.vue';
+// @endif
 
 defineProps(TopBarProps);
 const isPC = TUIGlobal.isPC;

package/src/TUICallService/CallService/backgroundHandler.ts

@@ -0,0 +1,182 @@
+/**
+ * BackgroundHandler - Mini Program background detection and auto hangup handler
+ * 
+ * When mini program goes to background for more than 4s, automatically hang up the call
+ * to avoid issues caused by WeChat disconnecting WebSocket after 5s.
+ */
+
+import { CallStatus, CallRole, StoreName, NAME } from '../const/index';
+import TuiStore from '../TUIStore/tuiStore';
+import { ITUIStore } from '../interface/index';
+const TUIStore: ITUIStore = TuiStore.getInstance();
+
+export interface IBackgroundConfig {
+  enableAutoHangup: boolean;      // Enable auto hangup on background (default: true)
+  hangupTimeout: number;          // Auto hangup timeout in ms (default: 4000)
+}
+const DEFAULT_BACKGROUND_CONFIG: IBackgroundConfig = {
+  enableAutoHangup: true,
+  hangupTimeout: 4000,      // 4s auto hangup (before ws disconnects at 5s)
+};
+
+export default class BackgroundHandler {
+  private _callService: any;
+  private _hangupTimer: ReturnType<typeof setTimeout> | null = null;
+  private _backgroundTimestamp: number = 0;
+  private _isInBackground: boolean = false;
+  private _config: IBackgroundConfig = { ...DEFAULT_BACKGROUND_CONFIG };
+  private _isInitialized: boolean = false;
+
+  constructor(callService: any) {
+    this._callService = callService;
+  }
+
+  // Initialize background detection for mini program; Listen to wx.onAppHide/onAppShow events
+  public initBackgroundDetection(): void {
+    if (this._isInitialized) return;
+    
+    try {
+      // @ts-ignore
+      if (typeof wx !== 'undefined' && wx.onAppHide && wx.onAppShow) {
+        // @ts-ignore
+        wx.onAppHide(this._handleAppHide);
+        // @ts-ignore
+        wx.onAppShow(this._handleAppShow);
+        this._isInitialized = true;
+        console.log('[TUICallKit] BackgroundHandler initialized');
+      }
+    } catch (error) {
+      console.warn('[TUICallKit] BackgroundHandler init failed:', error);
+    }
+  }
+
+  // Destroy background detection; Remove event listeners and clear timers
+  public destroyBackgroundDetection(): void {
+    if (!this._isInitialized) return;
+
+    try {
+      // @ts-ignore
+      if (typeof wx !== 'undefined' && wx.offAppHide && wx.offAppShow) {
+        // @ts-ignore
+        wx.offAppHide(this._handleAppHide);
+        // @ts-ignore
+        wx.offAppShow(this._handleAppShow);
+      }
+      this._clearTimers();
+      this._isInitialized = false;
+      console.log('[TUICallKit] BackgroundHandler destroyed');
+    } catch (error) {
+      console.warn('[TUICallKit] BackgroundHandler destroy failed:', error);
+    }
+  }
+
+  // Handle app hide event (going to background)
+  private _handleAppHide = (): void => {
+    const callStatus = TUIStore.getData(StoreName.CALL, NAME.CALL_STATUS) || CallStatus.IDLE;
+    const callRole = TUIStore.getData(StoreName.CALL, NAME.CALL_ROLE) || CallRole.UNKNOWN;
+
+    // Only handle when in connected state (as per requirement: only for connected calls)
+    if ((callStatus !== CallStatus.CONNECTED) || !this._config.enableAutoHangup) return;
+
+    this._isInBackground = true;
+    this._backgroundTimestamp = Date.now();
+    this._callService?._tuiCallEngine?.reportLog?.({
+      name: 'TUICallkit.background.appHide',
+      data: { callStatus, callRole, timestamp: this._backgroundTimestamp, config: this._config },
+    });
+
+    this._hangupTimer = setTimeout(() => {
+      this._handleBackgroundTimeout();
+    }, this._config.hangupTimeout);
+  };
+
+  // Handle app show event (returning from background)
+  private _handleAppShow = (): void => {
+    if (!this._isInBackground) return;
+
+    const backgroundDuration = Date.now() - this._backgroundTimestamp;
+    const callStatus = TUIStore.getData(StoreName.CALL, NAME.CALL_STATUS) || CallStatus.IDLE;
+    const callRole = TUIStore.getData(StoreName.CALL, NAME.CALL_ROLE) || CallRole.UNKNOWN;
+    
+    this._callService?._tuiCallEngine?.reportLog?.({
+      name: 'TUICallkit.background.appShow',
+      data: { callStatus, callRole, backgroundDuration, timestamp: Date.now() },
+    });
+
+    this._isInBackground = false;
+    this._clearTimers();
+
+    // If background time exceeded hangup timeout, show toast to explain why call ended
+    if (backgroundDuration >= this._config.hangupTimeout) {
+      this._showToast('后台超时，通话已结束');
+      this._checkCallStatusAfterBackground();
+    }
+  };
+
+  // Show toast - compatible with both UniApp and native mini program
+  private _showToast(title: string): void {
+    try {
+      // @ts-ignore - UniApp API
+      if (typeof uni !== 'undefined' && uni?.showToast) {
+        // @ts-ignore
+        uni.showToast({ title, icon: 'none', duration: 2500 });
+      // @ts-ignore - Native mini program API
+      } else if (typeof wx !== 'undefined' && wx?.showToast) {
+        // @ts-ignore
+        wx.showToast({ title, icon: 'none', duration: 2500 });
+      }
+    } catch (error) {}
+  }
+
+  // Handle background timeout - auto hangup
+  private async _handleBackgroundTimeout(): Promise<void> {
+    try {
+      const callStatus = TUIStore.getData(StoreName.CALL, NAME.CALL_STATUS) || CallStatus.IDLE;
+      const callRole = TUIStore.getData(StoreName.CALL, NAME.CALL_ROLE) || CallRole.UNKNOWN;
+      const backgroundDuration = Date.now() - this._backgroundTimestamp;
+
+      // Report timeout event before hangup
+      this._callService?._tuiCallEngine?.reportLog?.({
+        name: 'TUICallkit.background.timeout',
+        data: { callStatus, callRole, backgroundDuration, hangupTimeout: this._config.hangupTimeout },
+      });
+
+      // Only handle CONNECTED state (CALLING state is filtered in _handleAppHide)
+      if (callStatus === CallStatus.CONNECTED) {
+        this._callService?._tuiCallEngine?.reportLog?.({
+          name: 'TUICallkit.background.hangup',
+          data: { callStatus, callRole, action: 'hangup' },
+        });
+        await this._callService?.hangup?.();
+      }
+    } catch (error) {
+      this._callService?._tuiCallEngine?.reportLog?.({
+        name: 'TUICallkit.background.hangup.fail',
+        data: { error: String(error) },
+      });
+    }
+  }
+
+  // Check call status after returning from long background; Handle case where call should have ended
+  private _checkCallStatusAfterBackground(): void {
+    try {
+      const callStatus = TUIStore.getData(StoreName.CALL, NAME.CALL_STATUS) || CallStatus.IDLE;
+      // If still in call state after exceeding timeout, something went wrong
+      // The call should have been ended by _handleBackgroundTimeout
+      if (callStatus !== CallStatus.IDLE) {
+        // Force reset if needed
+        this._callService?._resetCallStore?.();
+      }
+    } catch (error) {
+      console.warn('[TUICallKit] Check call status after background failed:', error);
+    }
+  }
+
+  // Clear hangup timer
+  private _clearTimers(): void {
+    if (this._hangupTimer) {
+      clearTimeout(this._hangupTimer);
+      this._hangupTimer = null;
+    }
+  }
+}

package/src/TUICallService/CallService/index.ts

@@ -27,7 +27,7 @@ const TUIGlobal: ITUIGlobal = TuiGlobal.getInstance();
 const TUIStore: ITUIStore = TuiStore.getInstance();
 const uiDesign = UIDesign.getInstance();
 uiDesign.setTUIStore(TUIStore);
-const version = '4.4.8';
+const version = '4.5.0';
 import AIAssistant from './AIAssistant'; // 仅 web 支持 AI 实时字幕
 const frameWork = 'vue2.7';
 export { TUIGlobal, TUIStore, uiDesign };

package/src/TUICallService/TUIGlobal/tuiGlobal.ts

@@ -1,4 +1,4 @@
-import { APP_NAMESPACE, IS_PC, IS_H5, IN_WX_MINI_APP, IN_UNI_NATIVE_APP, IN_UNI_APP, IS_MAC, IS_WIN } from '../utils/env';
+import { APP_NAMESPACE, IS_PC, IS_H5, IN_WX_MINI_APP, IN_UNI_NATIVE_APP, IN_UNI_APP, IS_MAC, IS_WIN, IS_WX_HARMONY } from '../utils/env';
 import { ITUIGlobal } from '../interface/ITUIGlobal';
 
 export default class TUIGlobal implements ITUIGlobal {
@@ -12,6 +12,7 @@ export default class TUIGlobal implements ITUIGlobal {
   public isOfficial: boolean = false;
   public isWIN: boolean = false;
   public isMAC: boolean = false;
+  public isWxHarmony: boolean = false;
   constructor() {
     this.initEnv();
   }
@@ -35,6 +36,7 @@ export default class TUIGlobal implements ITUIGlobal {
     this.isUniPlatform = IN_UNI_APP;
     this.isWIN = IS_WIN;
     this.isMAC = IS_MAC;
+    this.isWxHarmony = IS_WX_HARMONY;
   }
 
   initOfficial(SDKAppID: number) {

package/src/TUICallService/interface/ITUIGlobal.ts

@@ -9,6 +9,7 @@
  * @property {Boolean} isOfficial true 标识是腾讯云官网 Demo 应用
  * @property {Boolean} isWIN true 标识是window系统pc
  * @property {Boolean} isMAC true 标识是mac os系统pc
+ * @property {Boolean} isWxHarmony true 标识是微信小程序运行在鸿蒙系统
 */
 export interface ITUIGlobal {
   global: any; // 挂在 wx、uni、window 对象
@@ -20,6 +21,7 @@ export interface ITUIGlobal {
   isOfficial: boolean;
   isWIN: boolean;
   isMAC: boolean;
+  isWxHarmony: boolean;
   /**
    * 初始化 TUIGlobal 环境变量
    * @function

package/src/TUICallService/utils/env.ts

@@ -49,3 +49,9 @@ export const IS_H5 = IS_ANDROID || IS_WIN_PHONE || IS_SYMBIAN || IS_IOS;
 export const IS_PC = IN_BROWSER && !IS_H5;
 export const IS_WIN = IS_PC && USER_AGENT.includes('Windows NT');
 export const IS_MAC = IS_PC && USER_AGENT.includes('Mac');
+
+let IS_WX_HARMONY = false;
+if (IN_WX_MINI_APP) {
+  IS_WX_HARMONY = (wx.getSystemInfoSync()?.system || '').includes('Harmony');
+}
+export { IS_WX_HARMONY };

package/src/index.ts

@@ -37,7 +37,7 @@ const TUICallType = {
   AUDIO_CALL: 1,
   VIDEO_CALL: 2,
 };
-const Version = '4.4.8'; // basic-demo 原来上报使用
+const Version = '4.5.0'; // basic-demo 原来上报使用
 
 // 输出产物
 export {