cnhis-design-vue 3.3.3-release.12 → 3.3.3-release.13

package/es/components/iho-chat/src/hooks/useVideo.js

@@ -1,14 +1,14 @@
-import { ref, computed, onBeforeUnmount } from 'vue';
+import { ref, computed, onBeforeUnmount, nextTick } from 'vue';
 import { useData } from './useData.js';
 import 'stompjs';
 import 'sockjs-client/dist/sockjs.min.js';
 import { MESSAGE_TYPE } from '../constants/index.js';
 import '../api/index.js';
-import { formatSeconds } from '../utils/index.js';
+import { formatSeconds, $message } from '../utils/index.js';
 import 'lodash-es';
 import TRTC from 'trtc-sdk-v5';
 
-function useVideo() {
+function useVideo(config = {}) {
   const time = {
     timer: null,
     seconds: 0
@@ -21,6 +21,11 @@ function useVideo() {
   const timing = ref("");
   const voiceClose = ref(false);
   const videocamClose = ref(false);
+  const isConnect = ref(false);
+  const remoteUsers = ref([]);
+  const videoRefs = ref(/* @__PURE__ */ new Map());
+  const retryTimers = ref(/* @__PURE__ */ new Map());
+  const retryCount = ref(/* @__PURE__ */ new Map());
   const isAudio = computed(() => state.currentAVMsg.chatMessageType === MESSAGE_TYPE.AUDIO);
   const isCall = computed(() => state.currentAVMsg.callMode === "call");
   const messageTypeText = computed(() => isAudio.value ? function() {
@@ -39,6 +44,7 @@ function useVideo() {
     }
   }());
   const trtc = TRTC.create();
+  const MAIN_STREAM_TYPE = TRTC.TYPE.STREAM_TYPE_MAIN;
   function startTimer() {
     resetTimer();
     time.timer = setInterval(() => {
@@ -52,50 +58,401 @@ function useVideo() {
     time.timer = null;
     time.seconds = 0;
   }
-  async function toggleAudio() {
-    await trtc.updateLocalAudio({
-      mute: !voiceClose.value
-    });
-    voiceClose.value = !voiceClose.value;
+  async function checkTRTCSupport() {
+    try {
+      const checkResult = await TRTC.isSupported();
+      if (!checkResult.result) {
+        $message.error("\u60A8\u7684\u6D4F\u89C8\u5668\u4E0D\u652F\u6301\u89C6\u9891\u901A\u8BDD\uFF0C\u8BF7\u4F7F\u7528\u6700\u65B0\u7248Chrome\u6D4F\u89C8\u5668");
+        return false;
+      }
+      if (!checkResult.detail.isH264EncodeSupported) {
+        $message.error("\u60A8\u7684\u6D4F\u89C8\u5668\u4E0D\u652F\u6301\u89C6\u9891\u7F16\u7801");
+        return false;
+      }
+      if (!checkResult.detail.isH264DecodeSupported) {
+        $message.error("\u60A8\u7684\u6D4F\u89C8\u5668\u4E0D\u652F\u6301\u89C6\u9891\u89E3\u7801");
+        return false;
+      }
+      return true;
+    } catch (error) {
+      console.error("Error checking TRTC support:", error);
+      $message.error("\u68C0\u67E5\u6D4F\u89C8\u5668\u652F\u6301\u65F6\u51FA\u9519");
+      return false;
+    }
   }
-  async function toggleVideo() {
-    await trtc.updateLocalVideo({
-      mute: !videocamClose.value
+  function findUser(userId) {
+    return remoteUsers.value.find((user) => user.id === userId);
+  }
+  function findUserIndex(userId) {
+    return remoteUsers.value.findIndex((user) => user.id === userId);
+  }
+  function addOrUpdateUser(userId, updates) {
+    const userIndex = findUserIndex(userId);
+    if (userIndex !== -1) {
+      const oldUser = {
+        ...remoteUsers.value[userIndex]
+      };
+      Object.assign(remoteUsers.value[userIndex], updates);
+      console.log(`Updated user ${userId}:`, {
+        old: oldUser,
+        new: remoteUsers.value[userIndex]
+      });
+    } else {
+      const newUser = {
+        id: userId,
+        name: updates.name || userId,
+        hasVideo: updates.hasVideo || false,
+        hasAudio: updates.hasAudio || false
+      };
+      remoteUsers.value.push(newUser);
+      console.log(`Added new user ${userId}:`, newUser);
+    }
+  }
+  function removeUser(userId) {
+    console.log("Removing user:", userId);
+    const userIndex = findUserIndex(userId);
+    if (userIndex !== -1) {
+      remoteUsers.value.splice(userIndex, 1);
+    }
+    videoRefs.value.delete(userId);
+    clearRetryTimer(userId);
+    stopRemoteVideo(userId).catch((error) => {
+      console.warn("Error stopping remote video during user removal:", error);
     });
-    videocamClose.value = !videocamClose.value;
-  }
-  function installEventHandlers({
-    handleError,
-    handleRemoteUserEnter,
-    handleRemoteAudioAvailable,
-    handleRemoteUserExit,
-    handleRemoteVideoAvailable
-  }) {
-    trtc.on(TRTC.EVENT.ERROR, handleError);
-    trtc.on(TRTC.EVENT.REMOTE_USER_ENTER, handleRemoteUserEnter);
-    trtc.on(TRTC.EVENT.REMOTE_AUDIO_AVAILABLE, handleRemoteAudioAvailable);
-    trtc.on(TRTC.EVENT.REMOTE_USER_EXIT, handleRemoteUserExit);
-    if (isAudio.value)
+    console.log("User removed and cleaned up:", userId);
+  }
+  function clearRetryTimer(userId) {
+    const timer = retryTimers.value.get(userId);
+    if (timer) {
+      clearTimeout(timer);
+      retryTimers.value.delete(userId);
+    }
+    retryCount.value.delete(userId);
+  }
+  async function tryRenderRemoteVideo(userId) {
+    var _a, _b;
+    const videoElement = videoRefs.value.get(userId);
+    const user = findUser(userId);
+    console.log("tryRenderRemoteVideo called for user:", userId);
+    console.log("Video element:", videoElement);
+    console.log("User data:", user);
+    console.log("Is connected:", isConnect.value);
+    if (!videoElement) {
+      console.log("Video element not found for user:", userId, "Available refs:", Array.from(videoRefs.value.keys()));
       return;
-    trtc.on(TRTC.EVENT.REMOTE_VIDEO_AVAILABLE, handleRemoteVideoAvailable);
-  }
-  function uninstallEventHandlers({
-    handleError,
-    handleRemoteUserEnter,
-    handleRemoteAudioAvailable,
-    handleRemoteUserExit,
-    handleRemoteVideoAvailable
-  }) {
-    trtc.off(TRTC.EVENT.ERROR, handleError);
-    trtc.off(TRTC.EVENT.REMOTE_USER_ENTER, handleRemoteUserEnter);
-    trtc.off(TRTC.EVENT.REMOTE_AUDIO_AVAILABLE, handleRemoteAudioAvailable);
-    trtc.off(TRTC.EVENT.REMOTE_USER_EXIT, handleRemoteUserExit);
-    if (isAudio.value)
+    }
+    if (!isConnect.value) {
+      console.log("Not connected, skipping video render for user:", userId);
+      return;
+    }
+    if (!(user == null ? void 0 : user.hasVideo)) {
+      console.log("User has no video stream:", userId, "User hasVideo:", user == null ? void 0 : user.hasVideo);
       return;
-    trtc.off(TRTC.EVENT.REMOTE_VIDEO_AVAILABLE, handleRemoteVideoAvailable);
+    }
+    try {
+      const existingVideo = videoElement.querySelector("video");
+      if (existingVideo) {
+        console.log("Video already playing for user:", userId);
+        return;
+      }
+      console.log("Starting remote video for user:", userId, "with element:", videoElement);
+      await trtc.startRemoteVideo({
+        userId,
+        streamType: MAIN_STREAM_TYPE,
+        view: videoElement
+      });
+      console.log("Successfully rendered video for user:", userId);
+      clearRetryTimer(userId);
+    } catch (error) {
+      console.warn("Failed to render video for user:", userId, error);
+      if (error.code === "INVALID_OPERATION" && (((_a = error.message) == null ? void 0 : _a.includes("does not publishing stream")) || ((_b = error.message) == null ? void 0 : _b.includes("not exist"))) || error.code === "OPERATION_ABORT") {
+        console.log("User no longer exists or not publishing, removing from retry:", userId);
+        clearRetryTimer(userId);
+        addOrUpdateUser(userId, {
+          hasVideo: false
+        });
+      }
+    }
   }
-  onBeforeUnmount(() => {
+  async function stopRemoteVideo(userId) {
+    var _a;
+    try {
+      await trtc.stopRemoteVideo({
+        userId,
+        streamType: MAIN_STREAM_TYPE
+      });
+      console.log("Stopped remote video for user:", userId);
+    } catch (error) {
+      if (error.code === "INVALID_OPERATION" && ((_a = error.message) == null ? void 0 : _a.includes("does not exist"))) {
+        console.log("User already exited, no need to stop video:", userId);
+      } else {
+        console.warn("Error stopping remote video for user:", userId, error);
+      }
+    }
+  }
+  function isUserValid(userId) {
+    const user = findUser(userId);
+    return user !== void 0;
+  }
+  function cleanupInvalidUsers() {
+    const validUserIds = remoteUsers.value.map((user) => user.id);
+    const retryUserIds = Array.from(retryTimers.value.keys());
+    retryUserIds.forEach((userId) => {
+      if (!validUserIds.includes(userId)) {
+        console.log("Cleaning up retry timer for invalid user:", userId);
+        clearRetryTimer(userId);
+      }
+    });
+  }
+  let userConnectionCheckInterval = null;
+  function startUserConnectionMonitoring() {
+    if (userConnectionCheckInterval)
+      return;
+    console.log("Starting user connection monitoring...");
+    userConnectionCheckInterval = setInterval(() => {
+      if (!isConnect.value) {
+        stopUserConnectionMonitoring();
+        return;
+      }
+      remoteUsers.value.forEach((user) => {
+        if (!user.hasVideo && !user.hasAudio) {
+          console.log(`User ${user.id} has no streams for extended period, checking...`);
+        }
+      });
+    }, 1e4);
+  }
+  function stopUserConnectionMonitoring() {
+    if (userConnectionCheckInterval) {
+      clearInterval(userConnectionCheckInterval);
+      userConnectionCheckInterval = null;
+      console.log("Stopped user connection monitoring");
+    }
+  }
+  function checkAndRenderAllVideos() {
+    console.log("Checking and rendering all videos...");
+    cleanupInvalidUsers();
+    const currentUsers = remoteUsers.value.filter((user) => user.hasVideo);
+    console.log("Current users with video:", currentUsers.map((u) => u.id));
+    currentUsers.forEach((user) => {
+      const videoElement = videoRefs.value.get(user.id);
+      if (videoElement) {
+        const hasExistingVideo = videoElement.querySelector("video");
+        console.log(`User ${user.id}: hasVideo=${user.hasVideo}, hasElement=${!!videoElement}, hasExistingVideo=${!!hasExistingVideo}`);
+        if (user.hasVideo && !hasExistingVideo) {
+          console.log(`Attempting to render video for user: ${user.id}`);
+          tryRenderRemoteVideo(user.id);
+        }
+      } else {
+        console.log(`No video element found for user: ${user.id}`);
+      }
+    });
+  }
+  async function forceRenderAllVideos() {
+    var _a;
+    console.log("Force rendering all available videos...");
+    const usersWithVideo = remoteUsers.value.filter((user) => user.hasVideo);
+    console.log("Users with video to force render:", usersWithVideo.map((u) => u.id));
+    for (const user of usersWithVideo) {
+      const videoElement = videoRefs.value.get(user.id);
+      if (videoElement && user.hasVideo) {
+        try {
+          const existingVideo = videoElement.querySelector("video");
+          if (existingVideo) {
+            existingVideo.remove();
+          }
+          await trtc.startRemoteVideo({
+            userId: user.id,
+            streamType: MAIN_STREAM_TYPE,
+            view: videoElement
+          });
+          console.log(`Force rendered video for user: ${user.id}`);
+        } catch (error) {
+          console.error(`Failed to force render video for user ${user.id}:`, error);
+          if (error.code === "INVALID_OPERATION" && ((_a = error.message) == null ? void 0 : _a.includes("does not publishing stream"))) {
+            console.log("User not publishing stream, updating status:", user.id);
+            addOrUpdateUser(user.id, {
+              hasVideo: false
+            });
+          }
+        }
+      }
+    }
+  }
+  function cleanupAllResources() {
+    retryTimers.value.forEach((timer) => clearTimeout(timer));
+    retryTimers.value.clear();
+    retryCount.value.clear();
+    videoRefs.value.clear();
+    remoteUsers.value = [];
+    isConnect.value = false;
     resetTimer();
+    stopUserConnectionMonitoring();
+  }
+  async function toggleAudio() {
+    try {
+      await trtc.updateLocalAudio({
+        mute: !voiceClose.value
+      });
+      voiceClose.value = !voiceClose.value;
+    } catch (error) {
+      console.error("Error toggling audio:", error);
+      $message.error("\u5207\u6362\u97F3\u9891\u5931\u8D25");
+    }
+  }
+  async function toggleVideo() {
+    try {
+      await trtc.updateLocalVideo({
+        mute: !videocamClose.value
+      });
+      videocamClose.value = !videocamClose.value;
+    } catch (error) {
+      console.error("Error toggling video:", error);
+      $message.error("\u5207\u6362\u89C6\u9891\u5931\u8D25");
+    }
+  }
+  async function enterRoom() {
+    if (isConnect.value) {
+      console.log("Already connected");
+      return true;
+    }
+    const isSupported = await checkTRTCSupport();
+    if (!isSupported) {
+      return false;
+    }
+    try {
+      console.log("Entering TRTC room...");
+      await trtc.enterRoom({
+        strRoomId: state.currentAVMsg.strRoomId,
+        sdkAppId: parseInt(state.userInfo.sdkAppID),
+        userId: state.userInfo.id,
+        userSig: state.userInfo.userSig,
+        proxy: trtcProxy.value
+      });
+      isConnect.value = true;
+      console.log("Successfully entered TRTC room");
+      startUserConnectionMonitoring();
+      return true;
+    } catch (error) {
+      console.error("Failed to enter TRTC room:", error);
+      $message.error(`\u8FDB\u5165\u623F\u95F4\u5931\u8D25: ${error.message || "\u672A\u77E5\u9519\u8BEF"}`);
+      isConnect.value = false;
+      return false;
+    }
+  }
+  async function exitRoom() {
+    try {
+      console.log("Exiting TRTC room...");
+      const stopPromises = [];
+      stopPromises.push(trtc.stopLocalAudio().catch((error) => {
+        console.warn("Error stopping local audio:", error);
+      }));
+      if (!isAudio.value) {
+        stopPromises.push(trtc.stopLocalVideo().catch((error) => {
+          console.warn("Error stopping local video:", error);
+        }));
+      }
+      await Promise.allSettled(stopPromises);
+      if (isConnect.value) {
+        await trtc.exitRoom().catch((error) => {
+          console.warn("Error exiting room:", error);
+        });
+      }
+      cleanupAllResources();
+      console.log("Successfully exited TRTC room");
+    } catch (error) {
+      console.error("Error during exit:", error);
+    }
+  }
+  async function startLocalMedia(selfVideoRef) {
+    try {
+      await trtc.startLocalAudio({
+        mute: voiceClose.value
+      });
+      if (!isAudio.value && selfVideoRef) {
+        await trtc.startLocalVideo({
+          view: selfVideoRef,
+          mute: videocamClose.value
+        });
+      }
+    } catch (error) {
+      console.error("Error starting local media:", error);
+      throw error;
+    }
+  }
+  function installEventHandlers(handlers) {
+    console.log("Installing TRTC event handlers...");
+    const wrappedHandlers = {
+      handleError: (error) => {
+        console.log("TRTC EVENT: ERROR", error);
+        handlers.handleError(error);
+      },
+      handleRemoteUserEnter: (event) => {
+        console.log("TRTC EVENT: REMOTE_USER_ENTER", event);
+        handlers.handleRemoteUserEnter(event);
+      },
+      handleRemoteAudioAvailable: (event) => {
+        console.log("TRTC EVENT: REMOTE_AUDIO_AVAILABLE", event);
+        handlers.handleRemoteAudioAvailable(event);
+      },
+      handleRemoteUserExit: (event) => {
+        console.log("TRTC EVENT: REMOTE_USER_EXIT", event);
+        handlers.handleRemoteUserExit(event);
+      },
+      handleRemoteVideoAvailable: (event) => {
+        console.log("TRTC EVENT: REMOTE_VIDEO_AVAILABLE", event);
+        handlers.handleRemoteVideoAvailable(event);
+      },
+      handleRemoteVideoUnavailable: (event) => {
+        console.log("TRTC EVENT: REMOTE_VIDEO_UNAVAILABLE", event);
+        if (handlers.handleRemoteVideoUnavailable) {
+          handlers.handleRemoteVideoUnavailable(event);
+        }
+      }
+    };
+    trtc.on(TRTC.EVENT.ERROR, wrappedHandlers.handleError);
+    trtc.on(TRTC.EVENT.REMOTE_USER_ENTER, wrappedHandlers.handleRemoteUserEnter);
+    trtc.on(TRTC.EVENT.REMOTE_AUDIO_AVAILABLE, wrappedHandlers.handleRemoteAudioAvailable);
+    trtc.on(TRTC.EVENT.REMOTE_USER_EXIT, wrappedHandlers.handleRemoteUserExit);
+    if (!isAudio.value) {
+      trtc.on(TRTC.EVENT.REMOTE_VIDEO_AVAILABLE, wrappedHandlers.handleRemoteVideoAvailable);
+      trtc.on(TRTC.EVENT.REMOTE_VIDEO_UNAVAILABLE, wrappedHandlers.handleRemoteVideoUnavailable);
+      console.log("REMOTE_VIDEO_UNAVAILABLE event listener added");
+    }
+  }
+  function uninstallEventHandlers(handlers) {
+    trtc.off(TRTC.EVENT.ERROR, handlers.handleError);
+    trtc.off(TRTC.EVENT.REMOTE_USER_ENTER, handlers.handleRemoteUserEnter);
+    trtc.off(TRTC.EVENT.REMOTE_AUDIO_AVAILABLE, handlers.handleRemoteAudioAvailable);
+    trtc.off(TRTC.EVENT.REMOTE_USER_EXIT, handlers.handleRemoteUserExit);
+    if (!isAudio.value) {
+      trtc.off(TRTC.EVENT.REMOTE_VIDEO_AVAILABLE, handlers.handleRemoteVideoAvailable);
+      trtc.off(TRTC.EVENT.REMOTE_VIDEO_UNAVAILABLE, handlers.handleRemoteVideoUnavailable || handlers.handleRemoteVideoAvailable);
+    }
+  }
+  function setVideoRef(userId, el) {
+    if (el) {
+      videoRefs.value.set(userId, el);
+      console.log("Video ref set for user:", userId, "Element:", el);
+      if (isConnect.value) {
+        const user = findUser(userId);
+        console.log("User found:", user);
+        if (user == null ? void 0 : user.hasVideo) {
+          console.log("User has video, attempting to render");
+          nextTick(() => {
+            tryRenderRemoteVideo(userId);
+          });
+        } else {
+          console.log("User has no video stream yet, will render when available");
+        }
+      }
+    } else {
+      videoRefs.value.delete(userId);
+      clearRetryTimer(userId);
+      console.log("Video ref removed for user:", userId);
+    }
+  }
+  onBeforeUnmount(() => {
+    cleanupAllResources();
   });
   return {
     state,
@@ -105,16 +462,37 @@ function useVideo() {
     timing,
     voiceClose,
     videocamClose,
+    isConnect,
     isAudio,
     isCall,
+    messageTypeText,
+    time,
+    remoteUsers,
+    videoRefs,
     startTimer,
     resetTimer,
     toggleAudio,
     toggleVideo,
-    messageTypeText,
-    time,
+    enterRoom,
+    exitRoom,
+    startLocalMedia,
+    checkTRTCSupport,
+    findUser,
+    addOrUpdateUser,
+    removeUser,
+    tryRenderRemoteVideo,
+    stopRemoteVideo,
+    setVideoRef,
     installEventHandlers,
-    uninstallEventHandlers
+    uninstallEventHandlers,
+    cleanupAllResources,
+    checkAndRenderAllVideos,
+    forceRenderAllVideos,
+    cleanupInvalidUsers,
+    isUserValid,
+    startUserConnectionMonitoring,
+    stopUserConnectionMonitoring,
+    MAIN_STREAM_TYPE
   };
 }
 

package/es/components/iho-chat/src/utils/index.d.ts

@@ -22,3 +22,4 @@ export declare function getDetail(item: AnyObject, isShowSize?: boolean): string
 export declare function showAudioAndVideoRecord(chatMessageType: string): "语音通话" | "视频通话";
 export declare function formatJsonstr(obj: AnyObject | string, type: string): any;
 export declare function removeImgBySrc(htmlString: string, targetSrc: string): string;
+export declare function ensureLeadingSlashIfRelative(str?: string): string;

package/es/components/iho-chat/src/utils/index.js

@@ -308,5 +308,11 @@ function removeImgBySrc(htmlString, targetSrc) {
 function escapeRegExp(str) {
   return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 }
+function ensureLeadingSlashIfRelative(str = "") {
+  if (!/^[a-z]+:\/\//i.test(str) && !str.startsWith("/")) {
+    return "/" + str;
+  }
+  return str;
+}
 
-export { $message, base64ToFile, downloadFile, formatJsonstr, formatSeconds, formatTime, getAVTime, getDetail, getFileType, getForwardTitle, getRoleName, isAudioOrVideoMessage, isDoctorRole, isGroup, listSort, removeImgBySrc, showAudioAndVideoRecord, simplifyMessage, transformMessage };
+export { $message, base64ToFile, downloadFile, ensureLeadingSlashIfRelative, formatJsonstr, formatSeconds, formatTime, getAVTime, getDetail, getFileType, getForwardTitle, getRoleName, isAudioOrVideoMessage, isDoctorRole, isGroup, listSort, removeImgBySrc, showAudioAndVideoRecord, simplifyMessage, transformMessage };