@trtc/calls-uikit-react 4.5.3-beta.1 → 4.5.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trtc/calls-uikit-react",
-  "version": "4.5.3-beta.1",
+  "version": "4.5.8",
   "main": "./tuicall-uikit-react.umd.js",
   "module": "./tuicall-uikit-react.es.js",
   "types": "./types/index.d.ts",
@@ -14,8 +14,9 @@
   },
   "dependencies": {
     "@tencentcloud/tui-core-lite": "~1.0.1",
-    "@trtc/call-engine-lite-js": "4.0.5-beta.1",
-    "@tencentcloud/lite-chat": "^1.6.3"
+    "@trtc/call-engine-lite-js": "~4.0.9",
+    "@tencentcloud/lite-chat": "^1.6.3",
+    "@trtc/call-engine-lite-wx": "~5.0.6"
 },
   "bugs": {
     "url": "https://github.com/tencentyun/TUICallKit/issues"

package/src/Components/TUICallKit/TUICallKit.tsx

@@ -15,6 +15,7 @@ import {
 import SingleCall from '../components/SingleCall/SingleCall';
 import GroupCall from '../components/GroupCall/GroupCall';
 import { AISubtitle } from '../components/common/AIAssistant';
+import AutoPlayDialog from '../components/common/AutoPlayDialog';
 import { classNames } from '../util/classnames';
 import {
   CallInfoContext,
@@ -25,6 +26,7 @@ import {
 } from '../context';
 import { MessagePlugin } from '../components/base/Message/MessagePlugin';
 import FloatingWindow from '../components/common/FloatingWindow';
+import { UIKitModal } from '../components/common/UIKitModal';
 import useGetSpeakers from '../hooks/useGetSpeakers';
 import TUICallKitStyle from './TUICallKit.module.scss';
 import Portal from '../components/base/Portal/Portal';
@@ -176,6 +178,21 @@ export default function TUICallKit(props: ITUICallKitProps) {
     setTranslateContextValue({ t: value });
   }
 
+  // Consume the MODAL_ERROR store written by handleModalError (e.g. package errors
+  // -1001/-1002, no camera/microphone 60003/60004). UIKitModal.openModal is imperative
+  // and mounts its own portal on document.body, so it works even when callStatus is IDLE
+  // and the component tree below returns null.
+  const handleModalErrorChange = (value) => {
+    if (value) {
+      UIKitModal.openModal({
+        id: value?.id,
+        title: value?.title,
+        content: value?.content,
+        type: 'error',
+      });
+    }
+  };
+
   const watchOptions = {
     [NAME.CALL_STATUS]: handleCallStatusChange,
     [NAME.IS_GROUP]: handleIsGroupChange,
@@ -191,6 +208,7 @@ export default function TUICallKit(props: ITUICallKitProps) {
     [NAME.IS_SHOW_ENABLE_VIRTUAL_BACKGROUND]: handleIsShowEnableVirtualBackgroundChange,
     [NAME.IS_MUTE_SPEAKER]: handleMuteSpeakerChange,
     [NAME.TRANSLATE]: handleTranslateChange,
+    [NAME.MODAL_ERROR]: handleModalErrorChange,
   };
 
   useLayoutEffect(() => {
@@ -249,6 +267,7 @@ export default function TUICallKit(props: ITUICallKitProps) {
               <div style={{ ...style }} className={classnames} id='tuicallkit-id'>
                 {!isGroupCall && <SingleCall />}
                 {isGroupCall && <GroupCall />}
+                <AutoPlayDialog />
                 <AISubtitle />
               </div>
               <Portal attach="body">

package/src/Components/components/SingleCall/MediaContainer/hooks/useGetLargeViewName.ts

@@ -8,6 +8,13 @@ export default function useGetLargeViewName() {
   const { callStatus } = useContext(CallInfoContext);
   const [largeViewName, setLargeViewName] = useState(ViewName.LOCAL);
 
+  // Only depend on the primitive `isEnter` flag (plus layoutMode & callStatus),
+  // instead of the whole remoteList reference. Otherwise every mutation on
+  // remote user info (e.g. isAudioAvailable / isVideoAvailable toggled by
+  // remote mic/camera off) would re-run this effect and forcibly reset
+  // `largeViewName` to REMOTE, overriding the user's manual large-view choice.
+  const remoteIsEnter = !!remoteList?.[0]?.isEnter;
+
   useEffect(() => {
     if (callStatus === CallStatus.CALLING) {
       return;
@@ -20,10 +27,10 @@ export default function useGetLargeViewName() {
       return;
     }
 
-    if (remoteList?.[0]?.isEnter) {
+    if (remoteIsEnter) {
       setLargeViewName(ViewName.REMOTE);
     }
-  }, [remoteList, layoutMode, callStatus]);
+  }, [remoteIsEnter, layoutMode, callStatus]);
 
   return [largeViewName, setLargeViewName] as const;
 }

package/src/Components/components/common/AutoPlayDialog/AutoPlayDialog.module.scss

@@ -0,0 +1,33 @@
+@use "../../../style/theme/util" as *;
+
+.auto-play-dialog {
+  position: absolute;
+  top: 5.2%;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 2;
+  width: 90%;
+  height: 40px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 10px;
+  border-radius: 6px;
+  font-size: 14px;
+  font-weight: 400;
+  font-family: PingFang SC;
+
+  @include theme() {
+    background-color: get(floating-color-default);
+    color: get(text-color-primary);
+  }
+
+  .auto-play-action {
+    flex-shrink: 0;
+    margin-left: 10px;
+
+    @include theme() {
+      color: get(text-color-link);
+    }
+  }
+}

package/src/Components/components/common/AutoPlayDialog/AutoPlayDialog.tsx

@@ -0,0 +1,57 @@
+import React, { useEffect, useState } from 'react';
+import {
+  TUIStore,
+  StoreName,
+  NAME,
+  TUIGlobal,
+  TUICallKitAPI,
+} from '../../../../TUICallService';
+import { useTranslate } from '../../../hooks';
+import AutoPlayDialogStyle from './AutoPlayDialog.module.scss';
+
+export default function AutoPlayDialog() {
+  const { t } = useTranslate();
+  // The onAutoPlayFailed event is listened in CallService at initialization time and its result is
+  // stored in TUIStore, so here we only need to sync the visibility from the store.
+  const [
+    isAutoPlayDialogVisible,
+    setIsAutoPlayDialogVisible,
+  ] = useState(TUIStore.getData(StoreName.CALL, NAME.IS_SHOW_AUTO_PLAY_DIALOG));
+
+  const handleAutoPlayDialogVisibleChange = (value: boolean) => {
+    setIsAutoPlayDialogVisible(value);
+  };
+
+  useEffect(() => {
+    TUIStore.watch(StoreName.CALL, {
+      [NAME.IS_SHOW_AUTO_PLAY_DIALOG]: handleAutoPlayDialogVisibleChange,
+    });
+
+    return () => {
+      TUIStore.unwatch(StoreName.CALL, {
+        [NAME.IS_SHOW_AUTO_PLAY_DIALOG]: handleAutoPlayDialogVisibleChange,
+      });
+    };
+  }, []);
+
+  const handleResumePlaybackClick = () => {
+    TUIStore.update(StoreName.CALL, NAME.IS_SHOW_AUTO_PLAY_DIALOG, false);
+    (TUICallKitAPI as any)?._autoPlayResume?.();
+  };
+
+  if (!isAutoPlayDialogVisible || !TUIGlobal.isH5) {
+    return null;
+  }
+
+  return (
+    <div className={AutoPlayDialogStyle['auto-play-dialog']}>
+      <div>{typeof t === 'function' ? t('auto play failed') : ''}</div>
+      <div
+        className={AutoPlayDialogStyle['auto-play-action']}
+        onClick={handleResumePlaybackClick}
+      >
+        {typeof t === 'function' ? t('click to resume') : ''}
+      </div>
+    </div>
+  );
+}

package/src/Components/components/common/AutoPlayDialog/index.ts

@@ -0,0 +1,3 @@
+import AutoPlayDialog from './AutoPlayDialog';
+
+export default AutoPlayDialog;

package/src/TUICallService/CallService/UIKitModal.ts

@@ -1,6 +1,9 @@
 
-// @if process.env.BUILD_TARGET ='MINI'
-import { UIKitModal } from '../UIKitModal';
+// @if process.env.BUILD_TARGET='MINI'
+// Use the explicit `/index` path so the WeChat mini-program `require`, which
+// only appends `.js` and does not resolve a directory to its `index.js`, can
+// locate the module.
+import { UIKitModal } from '../UIKitModal/index';
 // @endif
 // @if process.env.BUILD_TARGET!='MINI'
 import TuiStore from '../TUIStore/tuiStore';
@@ -22,16 +25,18 @@ const WEB_MODAL_ERROR_CODES = [
     30000,
     20007,
     101002,
+    101011,
+    -3301,
 ];
 
 const WEB_MODAL_ERROR_MAP = {
     '-1001': {
         id: 10001,
-        key: 'error.10001'
+        key: 'error.10001',
     },
     '-1002': {
         id: 10002,
-        key: 'error.10002'
+        key: 'error.10002',
     },
     '-1101': {
         id: 10004,
@@ -64,15 +69,29 @@ const WEB_MODAL_ERROR_MAP = {
     '101002': {
         id: 10014,
         key: 'error.10014'
+    },
+    // 101011: package ability not supported, needs an upgrade on the console.
+    // Message references the engine's ERROR_PACKAGE_NOT_SUPPORTED wording.
+    '101011': {
+        id: 10016,
+        key: 'error.10016'
+    },
+    '-3301': {
+        id: 10015,
+        key: 'error.10015',
+        // Message shown when the call is initiated from the Chat + TUICallKit integrated scenario.
+        chatKey: 'error.10015.chat'
     }
 };
 // @endif
 
-// @if process.env.BUILD_TARGET ='MINI'
+// @if process.env.BUILD_TARGET='MINI'
 const MINI_MODAL_ERROR_CODES = [
     -1001,
     -1002,
     101002,
+    101011,
+    -3301,
 ];
 
 const MINI_MODAL_ERROR_MAP = {
@@ -87,33 +106,50 @@ const MINI_MODAL_ERROR_MAP = {
     '101002': {
         id: 10014,
         content: '发起通话失败，用户 ID 无效，请确认该用户已注册'
+    },
+    // 101011: package ability not supported, needs an upgrade on the console.
+    // Content references the engine's ERROR_PACKAGE_NOT_SUPPORTED wording.
+    '101011': {
+        id: 10016,
+        content: '您的应用还未开通音视频通话（TUICallKit）能力，您可以去控制台申请免费体验：https://console.cloud.tencent.com/im/detail 或购买通话能力套餐包：https://buy.cloud.tencent.com/avc 有疑问请参考：https://cloud.tencent.com/document/product/647/104662'
+    },
+    '-3301': {
+        id: 10015,
+        content: '未开通 TRTC 服务导致进房失败，请到控制台为您的应用开通 TRTC 服务',
+        // Content shown when the call is initiated from the Chat + TUICallKit integrated scenario.
+        chatContent: '当前为 Chat 融合场景，未开通 TRTC 服务导致进房失败，请到 IM 控制台为您的应用开通 TRTC 服务'
     }
 }
 // @endif
 
-export function handleModalError(error) {
+// `isFromChat` marks whether the current call is initiated from the Chat + TUICallKit
+// integrated scenario (true) or from standalone TUICallKit (false), so the modal can
+// show source-specific guidance for package errors such as -1001 / -1002.
+export function handleModalError(error, isFromChat = false) {
     if (!error || !error?.code) {
         return;
     }
 
     // @if process.env.BUILD_TARGET!='MINI'
-    handleWebModalError(error);
+    handleWebModalError(error, isFromChat);
     // @endif
 
     // @if process.env.BUILD_TARGET='MINI'
-    handleMiniModalError(error);
+    handleMiniModalError(error, isFromChat);
     // @endif
 }
 
 // @if process.env.BUILD_TARGET!='MINI'
-function handleWebModalError(error) {
+function handleWebModalError(error, isFromChat = false) {
     if (!WEB_MODAL_ERROR_CODES.includes(error.code)) {
         return;
     }
 
     const errorInfo = WEB_MODAL_ERROR_MAP[error.code.toString()];
     if (errorInfo) {
-        let content = t(errorInfo.key);
+        // Prefer the Chat-integrated message when available and the call comes from Chat.
+        const messageKey = isFromChat && errorInfo.chatKey ? errorInfo.chatKey : errorInfo.key;
+        let content = t(messageKey);
         TUIStore.update(StoreName.CALL, NAME.MODAL_ERROR, {
             id: errorInfo.id,
             content: content,
@@ -124,16 +160,18 @@ function handleWebModalError(error) {
 // @endif
 
 // @if process.env.BUILD_TARGET='MINI'
-function handleMiniModalError(error) {
+function handleMiniModalError(error, isFromChat = false) {
     if (!MINI_MODAL_ERROR_CODES.includes(error.code)) {
         return;
     }
 
     const errorInfo = MINI_MODAL_ERROR_MAP[error.code.toString()];
     if (errorInfo) {
+        // Prefer the Chat-integrated content when available and the call comes from Chat.
+        const content = isFromChat && errorInfo.chatContent ? errorInfo.chatContent : errorInfo.content;
         UIKitModal.openModal({
             id: errorInfo.id,
-            content: errorInfo.content,
+            content: content,
             title: '错误',
             type: 'error'
         });

package/src/TUICallService/CallService/engineEventHandler.ts

@@ -48,6 +48,7 @@ export default class EngineEventHandler {
     callEngine.on(TUICallEvent.ON_USER_INVITING, this._handleOnUserInviting, this); // 通话存在邀请他人时, 通话里的所有人都会抛出
     callEngine.on(TUICallEvent.SDK_READY, this._handleSDKReady, this); // SDK Ready 回调
     callEngine.on(TUICallEvent.KICKED_OUT, this._handleKickedOut, this); // 未开启多端登录时, 多端登录收到的被踢事件
+    // @ts-ignore
     callEngine.on(TUICallEvent.MESSAGE_SENT_BY_ME, this._messageSentByMe, this);
     // @ts-ignore
     TUICallEvent.CALL_MESSAGE && callEngine.on(TUICallEvent.CALL_MESSAGE, this._handleCallMessage, this); // call message card display event
@@ -75,6 +76,7 @@ export default class EngineEventHandler {
     callEngine.off(TUICallEvent.ON_USER_INVITING, this._handleOnUserInviting, this);
     callEngine.off(TUICallEvent.SDK_READY, this._handleSDKReady, this);
     callEngine.off(TUICallEvent.KICKED_OUT, this._handleKickedOut, this);
+    // @ts-ignore
     callEngine.off(TUICallEvent.MESSAGE_SENT_BY_ME, this._messageSentByMe, this);
     // @ts-ignore
     TUICallEvent.ON_USER_NETWORK_QUALITY_CHANGED && callEngine.off(TUICallEvent.ON_USER_NETWORK_QUALITY_CHANGED, this._handleNetworkQuality, this);
@@ -342,7 +344,7 @@ export default class EngineEventHandler {
   private async _handleUserVideoAvailable(event: any): Promise<any> {
     const { userID: userId, isVideoAvailable } = analyzeEventData(event);
     console.log(`${NAME.PREFIX}_handleUserVideoAvailable event data: ${JSON.stringify(event)}.`);
-    
+
     this._setRemoteUserInfoAudioVideoAvailable(isVideoAvailable, NAME.VIDEO, userId);
     try {
       isVideoAvailable && await this._startRemoteView(userId);
@@ -393,7 +395,7 @@ export default class EngineEventHandler {
       remoteUserInfoList.push({ userId });
       TUIStore.update(StoreName.CALL, NAME.REMOTE_USER_INFO_LIST, remoteUserInfoList);
       TUIStore.update(StoreName.CALL, NAME.REMOTE_USER_INFO_EXCLUDE_VOLUMN_LIST, remoteUserInfoList);
-      
+
       const [userInfo] = await getRemoteUserProfile([userId], this._callService?.getTim());
       remoteUserInfoList = TUIStore.getData(StoreName.CALL, NAME.REMOTE_USER_INFO_LIST);
       remoteUserInfoList.forEach((obj) => {

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.5.3-beta.1';
+const version = '4.5.8';
 import AIAssistant from './AIAssistant'; // 仅 web 支持 AI 实时字幕
 const frameWork = 'react';
 export { TUIGlobal, TUIStore, uiDesign };
@@ -52,10 +52,12 @@ export default class TUICallService {
   private _wasmReadyResolve;
   private _isInitialized = false;
   // Use an arrow function to keep the `this` binding when registering/unregistering the listener.
-  private _handleAutoPlayFailed = () => {
+  private _handleAutoPlayFailed = (event: any) => {
     this._tuiCallEngine?.reportLog?.({
       name: 'TUICallkit.onAutoPlayFailed',
     });
+    // @ts-ignore
+    this._autoPlayResume = event?.resume; // webrtc 自动恢复播放失败需要自己调用
     TUIStore.update(StoreName.CALL, NAME.IS_SHOW_AUTO_PLAY_DIALOG, true);
   };
 
@@ -63,8 +65,8 @@ export default class TUICallService {
     console.log(`${NAME.PREFIX}version: ${version}`);
     this._wasmReadyPromise = new Promise(resolve => {
       this._wasmReadyResolve = resolve;
-    }); 
-    this._loadWasm(); 
+    });
+    this._loadWasm();
     this._watchTUIStore();
     this._engineEventHandler = EngineEventHandler.getInstance({ callService: this });
 
@@ -88,7 +90,7 @@ export default class TUICallService {
       return;
     }
     await this._wasmReadyPromise;
-    
+
     if (!this._isInitialized) {
       await this._doInit(params);
       this._isInitialized = true;
@@ -116,6 +118,7 @@ export default class TUICallService {
         frameWork,
         // @ts-ignore
         language: 7,
+        // @ts-ignore
         callkitVersion: version,
         isFromChat: isFromChat || false,
         component,
@@ -212,7 +215,7 @@ export default class TUICallService {
       const response = await this._tuiCallEngine.calls(callsParams);
       await this._updateCallStoreAfterCall(userIDList, response);
     } catch (error: any) {
-      handleModalError(error);
+      handleModalError(error, this._isFromChat);
       this._handleCallError(error, 'calls');
     }
   }
@@ -248,7 +251,7 @@ export default class TUICallService {
       //   setLocalUserInfoAudioVideoAvailable(true, NAME.VIDEO);
       // }
     } catch (error) {
-      handleModalError(error);
+      handleModalError(error, this._isFromChat);
       this._handleCallError(error, 'join');
     }
   }
@@ -350,9 +353,6 @@ export default class TUICallService {
           const { enable } = params;
           TUIStore.update(StoreName.CALL, NAME.IS_FORCE_USE_V2_API, !!enable);
           break;
-        case 'setWaterMark':
-          this._tuiCallEngine?.callExperimentalAPI?.(jsonStr);
-          break;
         default:
           break;
       }
@@ -381,7 +381,7 @@ export default class TUICallService {
         error,
       });
       if (handleRepeatedCallError(error)) return;
-      handleModalError(error);
+      handleModalError(error, this._isFromChat);
       noDevicePermissionToast(error, CallMediaType.AUDIO, this._tuiCallEngine);
       this._resetCallStore();
     }
@@ -412,7 +412,7 @@ export default class TUICallService {
         }
       });
     } catch (error) {
-      handleModalError(error);
+      handleModalError(error, this._isFromChat);
       console.debug(error);
     }
     this._resetCallStore();
@@ -426,7 +426,7 @@ export default class TUICallService {
         this._chatCombine?.callTUIService({ message: response?.data?.message });
       }
     } catch (error) {
-      handleModalError(error);
+      handleModalError(error, this._isFromChat);
       console.debug(error);
     }
     this._resetCallStore();
@@ -759,7 +759,7 @@ export default class TUICallService {
   private _resetCallStore() {
     this._cleanupAvoidRepeatCallState();
     this._bellContext?.stop();
-    
+
     const oldStatusStr = generateStatusChangeText();
     this._stopTimer();
     // localUserInfo, language 在通话结束后不需要清除

package/src/TUICallService/CallService/miniProgram.ts

@@ -1,4 +1,5 @@
 import { CallMediaType, CallStatus } from '../const/index';
+import { checkDevicePermission } from '../utils/permission';
 
 export function initialUI() {
   // 收起键盘
@@ -34,7 +35,9 @@ export async function beforeCall(type: CallMediaType, that: any) {
       microphone: true,
       camera: type === CallMediaType.VIDEO,
     };
-    const hasDevicePermission = await that._tuiCallEngine.deviceCheck(deviceMap); // miniProgram 检查设备权限
+    // `deviceCheck` is not implemented by @trtc/call-engine-lite-wx, so use the
+    // mini-program permission utility to pre-check microphone/camera access.
+    const hasDevicePermission = await checkDevicePermission(deviceMap); // miniProgram 检查设备权限
     return hasDevicePermission ? CallStatus.CALLING : CallStatus.IDLE;
   } catch (error) {
     console.debug(error);

package/src/TUICallService/UIKitModal/UIKitModal.ts

@@ -1,12 +1,21 @@
 // @ts-nocheck
 import type { UIKitModalOptions, UIKitModalResult } from './type';
-import  TUICallKitServer from '../CallService';
+// Use the explicit `/index` path so the WeChat mini-program `require`, which
+// only appends `.js` and does not resolve a directory to its `index.js`, can
+// locate the module.
+import  TUICallKitServer from '../CallService/index';
+
+// Native WeChat mini-program only exposes `wx`, while uniapp exposes `uni`.
+// Fall back to `wx` when `uni` is not defined so the modal works in both.
+const platform: any = typeof uni !== 'undefined'
+  ? uni
+  : (typeof wx !== 'undefined' ? wx : undefined);
 
 const URL_REGEX = /^(https?:\/\/)?([\da-z.-]+)\.([a-z.]{2,6})([/\w .-]*)*\/?$/i;
 const FULL_URL_REGEX = /(https?:\/\/[^\s]+)/g;
 
 function isDevEnvironment(): boolean {
-  const accountInfo = uni.getAccountInfoSync?.();
+  const accountInfo = platform.getAccountInfoSync?.();
   const envVersion = accountInfo?.miniProgram?.envVersion;
   return envVersion === 'develop' || envVersion === 'trial';
 }
@@ -82,7 +91,7 @@ const createUIKitModal = (options: UIKitModalOptions): Promise<UIKitModalResult>
     const processedContent = processContent(options.content);
     const hasLink = !!url;
 
-    uni.showModal({
+    platform.showModal({
       title: options.title || '',
       content: processedContent,
       cancelText: '取消',
@@ -91,10 +100,10 @@ const createUIKitModal = (options: UIKitModalOptions): Promise<UIKitModalResult>
         const action = res.confirm ? 'confirm' : 'cancel';
         if (res.confirm) {
           if (hasLink && url) {
-            uni.setClipboardData({
+            platform.setClipboardData({
               data: url,
               success: () => {
-                uni.showToast({ title: '链接已复制', icon: 'success' });
+                platform.showToast({ title: '链接已复制', icon: 'success' });
               },
             });
           }

package/src/TUICallService/locales/en.ts

@@ -145,6 +145,9 @@ export const en = {
   'error.10012': "Detected that the current page is under HTTP protocol. To ensure smooth access and full functionality of TUICallEngine SDK for production environment users, please use HTTPS protocol (or localhost) to access the audio/video application page. For details, please visit: <a href='https://web.sdk.qcloud.com/trtc/webrtc/v5/doc/zh-cn/tutorial-05-info-browser.html#h2-3'>View Documentation</a>",
   'error.10013': "Call failed: You have been blocked by the other party or you have blocked the other party",
   'error.10014': "Call initiation failed. User ID is invalid. Please confirm that the user is registered.",
+  'error.10015': "Failed to enter the room because the TRTC service is not activated. Please go to the <a href='https://console.cloud.tencent.com/trtc'>console</a> to activate the TRTC service for your application",
+  'error.10015.chat': "You are currently in the Chat + TUICallKit integrated scenario. Failed to enter the room because the TRTC service is not activated. Please go to the <a href='https://console.cloud.tencent.com/im/rtc-config'>IM console</a> to activate the TRTC service for your application",
+  'error.10016': "Your application has not enabled the audio and video call (TUICallKit) capability. You can apply for a free trial in the <a href='https://console.cloud.tencent.com/im/detail'>console</a>, or purchase the <a href='https://buy.cloud.tencent.com/avc'>call capability package</a>. If you have any questions, please refer to the <a href='https://cloud.tencent.com/document/product/647/104662'>documentation</a>",
   'error': 'Error',
   // AI Subtitle Settings
   'ai-subtitle': 'AI Subtitle',

package/src/TUICallService/locales/ja_JP.ts

@@ -1,5 +1,5 @@
 export const ja_JP = {
-  // 按钮文案 
+  // 按钮文案
   'hangup': '通話終了',
   'reject': '拒否',
   'accept': '応答',
@@ -55,7 +55,7 @@ export const ja_JP = {
   'open camera': 'オープンカメラ',
   'close camera': 'カメラを閉じる',
   'open microphone': 'オープンマイク',
-  'close microphone': 'マイクを閉じる',  
+  'close microphone': 'マイクを閉じる',
   'camera enabled': 'カメラオン',
   'camera disabled': 'カメラオフ',
   'microphone enabled': 'マイクオン',
@@ -144,6 +144,8 @@ export const ja_JP = {
   'error.10012': "現在のページがHTTPプロトコル下にあることが検出されました。本番環境のユーザーがTUICallEngine SDKの全機能をスムーズに利用できるようにするため、音声・ビデオアプリケーションページにはHTTPSプロトコル（またはlocalhost）を使用してアクセスしてください。詳細については、<a href='https://web.sdk.qcloud.com/trtc/webrtc/v5/doc/zh-cn/tutorial-05-info-browser.html#h2-3'>ドキュメントを確認</a>してください",
   'error.10013': "通話失敗：相手にブロックされているか、または相手をブロックしています",
   'error.10014': "通話の開始に失敗しました。ユーザーIDが無効です。ユーザーが登録されていることを確認してください。",
+  'error.10015.chat': "現在は Chat と TUICallKit の統合シナリオです。TRTC サービスが有効化されていないため、ルームへの入室に失敗しました。<a href='https://console.cloud.tencent.com/im/rtc-config'>IM コンソール</a>でアプリケーションの TRTC サービスを有効化してください",
+  'error.10016': "あなたのアプリケーションは音声・ビデオ通話（TUICallKit）機能を有効にしていません。<a href='https://console.cloud.tencent.com/im/detail'>コンソール</a>で無料体験を申請するか、<a href='https://buy.cloud.tencent.com/avc'>通話機能パッケージ</a>を購入してください。ご不明な点がある場合は、<a href='https://cloud.tencent.com/document/product/647/104662'>ドキュメント</a>をご参照ください",
   'error': 'エラー',
   // AI Subtitle Settings
   'ai-subtitle': 'AI字幕',

package/src/TUICallService/locales/zh-cn.ts

@@ -140,6 +140,9 @@ export const zh = {
   'error.10012': "检测到当前页面正处于 http 协议下，为确保生产环境用户顺畅接入和体验 TUICallEngine SDK 的全部功能，请使用 https 协议(或 localhost)访问音视频应用页面。详情请前往：<a href='https://web.sdk.qcloud.com/trtc/webrtc/v5/doc/zh-cn/tutorial-05-info-browser.html#h2-3'>查看文档</a>",
   'error.10013': "呼叫失败：您已被对方拉黑或您拉黑了对方",
   'error.10014': "发起通话失败，用户 ID 无效，请确认该用户已注册。",
+  'error.10015': "未开通 TRTC 服务导致进房失败，请前往<a href='https://console.cloud.tencent.com/trtc'>控制台</a>为您的应用开通 TRTC 服务",
+  'error.10015.chat': "当前为 Chat 与 TUICallKit 融合场景，未开通 TRTC 服务导致进房失败，请前往 <a href='https://console.cloud.tencent.com/im/rtc-config'>IM 控制台</a>为您的应用开通 TRTC 服务",
+  'error.10016': "您的应用还未开通音视频通话（TUICallKit）能力，您可以去<a href='https://console.cloud.tencent.com/im/detail'>控制台</a>申请免费体验，或购买<a href='https://buy.cloud.tencent.com/avc'>通话能力套餐包</a>，有疑问请参考<a href='https://cloud.tencent.com/document/product/647/104662'>相关文档</a>",
   'error': '错误',
   // AI Subtitle Settings
   'ai-subtitle': 'AI 字幕',

package/src/TUICallService/utils/env.ts

@@ -43,8 +43,18 @@ const IS_ANDROID = /Android/i.test(USER_AGENT);
 const IS_WIN_PHONE = /(?:Windows Phone)/.test(USER_AGENT);
 const IS_SYMBIAN = /(?:SymbianOS)/.test(USER_AGENT);
 const IS_IOS = /iPad/i.test(USER_AGENT) || /iPhone/i.test(USER_AGENT) || /iPod/i.test(USER_AGENT);
+// HarmonyOS webview (e.g. ArkWeb inside a WeChat H5 page). The UA of every
+// HarmonyOS form factor contains "OpenHarmony"/"HarmonyOS"/"ArkWeb", so the
+// system keyword alone cannot tell phones/tablets from 2-in-1 PCs. HarmonyOS
+// puts the device type in the UA parenthesis: "Phone" / "Tablet" / "PC", and
+// mobile webviews additionally carry a "Mobile" token. Therefore only treat
+// HarmonyOS phones/tablets (Phone/Tablet/Mobile and NOT PC) as H5, so that
+// HarmonyOS 2-in-1 PCs still fall back to the desktop layout.
+const IS_HARMONY = /OpenHarmony|HarmonyOS|ArkWeb/i.test(USER_AGENT);
+const IS_HARMONY_PC = IS_HARMONY && /\bPC\b/i.test(USER_AGENT);
+export const IS_HARMONY_WEBVIEW = IS_HARMONY && /Phone|Tablet|Mobile/i.test(USER_AGENT) && !IS_HARMONY_PC;
 
-export const IS_H5 = IS_ANDROID || IS_WIN_PHONE || IS_SYMBIAN || IS_IOS;
+export const IS_H5 = IS_ANDROID || IS_WIN_PHONE || IS_SYMBIAN || IS_IOS || IS_HARMONY_WEBVIEW;
 
 export const IS_PC = IN_BROWSER && !IS_H5;
 export const IS_WIN = IS_PC && USER_AGENT.includes('Windows NT');