眼镜端修复+4

src/utils/convertURL.ts

+export function convertURL(string: string) {
+    return string.replace(/^http:\/\/\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}:\d{1,5}/, 'https://ifar.test.com:440')
+}
\ No newline at end of file

src/views/remote/videoCall/videoChat.vue

@@ -13,29 +13,36 @@
             <a-col :span="12">
                 <div class="flex items-center p-1.5 leading-7">
                     <global-icon :size="16" icon="user-group"></global-icon>
-                    <span class="text-xs ml-1 text-theme-text2">房间已有 {{ chatChannelState.currentChatters.length }} 人</span>
+                    <span class="text-xs ml-1 text-theme-text2">房间已有 {{ chatChannelState.currentChatters.length
+                        }} 人</span>
                 </div>
             </a-col>
             <a-col :span="12">
                 <div class="flex items-center p-1.5 leading-7">
                     <global-icon :size="16" icon="mic"></global-icon>
-                    <span class="text-xs ml-1 text-theme-text2">{{ webrtcStates.isMicroAttached ? '麦克风已开启' : '麦克风未开启' }}</span>
+                    <span
+                        class="text-xs ml-1 text-theme-text2">{{ webrtcStates.isMicroAttached ? '麦克风已开启' : '麦克风未开启'
+                        }}</span>
                 </div>
             </a-col>
             <a-col :span="12">
                 <div class="flex items-center p-1.5 leading-7">
                     <global-icon :size="16" icon="camera"></global-icon>
-                    <span class="text-xs ml-1 text-theme-text2">{{ webrtcStates.isCameraAttached ? '摄像头已开启' : '摄像头未开启' }}</span>
+                    <span
+                        class="text-xs ml-1 text-theme-text2">{{ webrtcStates.isCameraAttached ? '摄像头已开启' : '摄像头未开启'
+                        }}</span>
                 </div>
             </a-col>
         </a-row>
-        <div class="chat-list p-4 my-4 flex-auto overflow-y-auto mb-0" ref="scrollContainer">
-            <chat-details v-for="q in mapChatMessageQueue" :key="q.record_id" :data="q.data" :is-self="q.isSelf" :type="q.type"></chat-details>
+        <div ref="scrollContainer" class="chat-list p-4 my-4 flex-auto overflow-y-auto mb-0">
+            <chat-details v-for="q in mapChatMessageQueue" :key="q.record_id" :data="q.data" :is-self="q.isSelf"
+                          :type="q.type"></chat-details>
         </div>
         <div class="px-4 py-2">
             <a-space size="medium">
                 <a-tooltip content="发送图片">
-                    <a-upload :custom-request="(option) => uploadMuFile(option, 'image')" :show-file-list="false" accept="image/*">
+                    <a-upload :custom-request="(option) => uploadMuFile(option, 'image')" :show-file-list="false"
+                              accept="image/*">
                         <template #upload-button>
                             <div class="flex-center px-3 py-1 rounded cursor-pointer bg-fill-bg1">
                                 <global-icon :size="15" icon="image"></global-icon>
@@ -44,7 +51,8 @@
                     </a-upload>
                 </a-tooltip>
                 <a-tooltip content="发送pdf">
-                    <a-upload :custom-request="(option) => uploadMuFile(option, 'pdf')" :show-file-list="false" accept=".pdf">
+                    <a-upload :custom-request="(option) => uploadMuFile(option, 'pdf')" :show-file-list="false"
+                              accept=".pdf">
                         <template #upload-button>
                             <div class="flex-center px-3 py-1 rounded cursor-pointer bg-fill-bg1">
                                 <global-icon :size="15" icon="pdf"></global-icon>
@@ -53,7 +61,8 @@
                     </a-upload>
                 </a-tooltip>
                 <a-tooltip content="发送视频">
-                    <a-upload :custom-request="(option) => uploadMuFile(option, 'video')" :show-file-list="false" accept="video/*">
+                    <a-upload :custom-request="(option) => uploadMuFile(option, 'video')" :show-file-list="false"
+                              accept="video/*">
                         <template #upload-button>
                             <div class="flex-center px-3 py-1 rounded cursor-pointer bg-fill-bg1">
                                 <global-icon :size="15" icon="video"></global-icon>
@@ -62,7 +71,8 @@
                     </a-upload>
                 </a-tooltip>
             </a-space>
-            <a-textarea v-model="textMessage" allow-clear class="h-16 mt-2" placeholder="请输入" @keydown.enter.prevent="sendMessageText" />
+            <a-textarea v-model="textMessage" allow-clear class="h-16 mt-2" placeholder="请输入"
+                        @keydown.enter.prevent="sendMessageText" />
         </div>
     </div>
 </template>
@@ -77,6 +87,7 @@ import { Message } from '@arco-design/web-vue'
 import { userStates } from 'AnyR/states/wsStates'
 import { computed, ref } from 'vue'
 import { useAnyR } from 'AnyR/index'
+import { convertURL } from '@/utils/convertURL.ts'
 
 const textMessage = ref('')
 const AnyR = useAnyR()
@@ -131,13 +142,9 @@ const uploadMuFile = (option: any, type: string) => {
     )
 }
 
-function convertURL(string: string) {
-    return string.replace(/^http:\/\/\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}:\d{1,5}/, 'https://ifar.test.com:440')
-}
-
-const mapChatMessageQueue = computed(function () {
+const mapChatMessageQueue = computed(function() {
     console.log('mq here', chatChannelState.value.messageQueue)
-    return chatChannelState.value.messageQueue.map(function (a: any) {
+    return chatChannelState.value.messageQueue.map(function(a: any) {
         return {
             isSelf: a.uid === userStates.value.currentUserId,
             type: a.type,
@@ -146,7 +153,7 @@ const mapChatMessageQueue = computed(function () {
                 fromName: a.fromName,
                 sendTime: a.happened_time,
                 message: a.title,
-                src: convertURL(a.title?.fileUrl as string),
+                src: convertURL(a.title?.fileUrl || '' as string),
                 fileName: a.title?.fileName
             }
         }

src/views/remote/videoCall/videoItem.vue

@@ -101,7 +101,4 @@ onUnmounted(() => {
 })
 </script>
 <style lang="less" scoped>
-:deep([data-self='vc'] video), :deep(.agora_video_player) {
-    transform: none !important;
-}
 </style>

src/views/remote/videoCall/videoTools.vue

 <template>
     <div>
-        <div :id="`RemoteVideo${ps.id}`" class="relative mb-4 flex-auto bg-fill-bg1" data-self="remote-main" @mousedown.capture="handleBlinkingStart" ref="remoteVideoRef">
+        <div :id="`RemoteVideo${ps.id}`" ref="remoteVideoRef" class="relative mb-4 flex-auto bg-fill-bg1"
+             data-self="remote-main" @mousedown.capture="handleBlinkingStart">
             <n-message-provider>
                 <image-editor
                     :before-cancel="beforeEndMarkHandle"
@@ -9,7 +10,7 @@
                     :show-quit="isScreenShotByCurrentUser"
                     :start="chatChannelState.displayImageEditor"
                     :target="firstVideoToBeAttached"
-                    :url-image="chatChannelState.screenshotURL"
+                    :url-image="convertURL(chatChannelState.screenshotURL)"
                     @cancel="reallyEndMarkHandle"
                     @first-paint-done="initialPaintDone"
                     @canvas-saved="paintSaved"
@@ -28,19 +29,22 @@
             ></div>
             <template v-if="isVideoVisible">
                 <div class="absolute flex justify-between items-center p-1 t-0 l-0 w-full z-10">
-                    <div v-if="userDataForThis.userCallGroup == 1" class="text-xs px-2 rounded-sm leading-5 bg-primary-disable text-primary">
+                    <div v-if="userDataForThis.userCallGroup == 1"
+                         class="text-xs px-2 rounded-sm leading-5 bg-primary-disable text-primary">
                         {{ userDataForThis.name }}
                     </div>
-                    <div v-else class="text-xs px-2 rounded-sm leading-5" style="background-color: rgb(var(--success-1)); color: rgb(var(--success-6))">
+                    <div v-else class="text-xs px-2 rounded-sm leading-5"
+                         style="background-color: rgb(var(--success-1)); color: rgb(var(--success-6))">
                         {{ userDataForThis.name }}
                     </div>
                     <div class="rounded-full size-6 flex-center" style="background-color: var(--color-border-1)">
-                        <global-icon v-if="!isCenterUserMuted" :size="12" color="rgb(var(--success-6))" :icon="'mic'"></global-icon>
-                        <global-icon v-else :size="12" :icon="'mic-off'"></global-icon>
+                        <global-icon v-if="!isCenterUserMuted" :icon="'mic'" :size="12"
+                                     color="rgb(var(--success-6))"></global-icon>
+                        <global-icon v-else :icon="'mic-off'" :size="12"></global-icon>
                     </div>
                 </div>
             </template>
-            <div class="absolute w-full h-full flex-center" v-else>
+            <div v-else class="absolute w-full h-full flex-center">
                 <video-loader></video-loader>
             </div>
         </div>
@@ -54,7 +58,7 @@
                 <span class="mt-1" style="color: rgb(var(--danger-5))">结束会议</span>
             </div>
             <div class="w-[120px] h-[72px] item" @click="toggleMute">
-                <global-icon :size="21" :icon="isCurrentUserMuted ? 'mic-off' : 'mic'"></global-icon>
+                <global-icon :icon="isCurrentUserMuted ? 'mic-off' : 'mic'" :size="21"></global-icon>
                 <span class="mt-1 color-text-2">{{ isCurrentUserMuted ? '取消静音' : '静音' }}</span>
             </div>
             <div class="w-[120px] h-[72px] item" @click="toggleVoiceChatOnly">
@@ -68,12 +72,16 @@
             <div class="w-[120px] h-[72px] item" @click="toggleScreenShare">
                 <global-icon :size="21" icon="shared-screen"></global-icon>
                 <span class="mt-1 color-text-2">
-                    {{ screenShareMetaData.byOther ? '他人正在共享' : screenShareMetaData.byCurrentUser ? '取消屏幕共享' : '屏幕共享' }}
+                    {{ screenShareMetaData.byOther ? '他人正在共享' : screenShareMetaData.byCurrentUser ? '取消屏幕共享' : '屏幕共享'
+                    }}
                 </span>
             </div>
             <div class="w-[120px] h-[72px] item" @click="toggleRecording">
-                <global-icon :size="21" :icon="!chatChannelState.recordingData.id ? 'record' : 'record-stop'"></global-icon>
-                <span class="mt-1 color-text-2">{{ !chatChannelState.recordingData.id ? '开始录制' : chatChannelState.recordingData.id === userStates.currentUserId ? '结束录制' : '他人正在录制' }}</span>
+                <global-icon :icon="!chatChannelState.recordingData.id ? 'record' : 'record-stop'"
+                             :size="21"></global-icon>
+                <span
+                    class="mt-1 color-text-2">{{ !chatChannelState.recordingData.id ? '开始录制' : chatChannelState.recordingData.id === userStates.currentUserId ? '结束录制' : '他人正在录制'
+                    }}</span>
             </div>
             <div v-if="isUserHost" class="w-[120px] h-[72px] item" @click="allMute">
                 <global-icon :size="21" icon="mic-off"></global-icon>
@@ -90,13 +98,22 @@
 <script lang="ts" setup>
 import { useAnyR } from 'AnyR/index'
 import { NMessageProvider } from 'naive-ui'
-import { allOtherChattersIdSet, chatChannelState, isCurrentUserMuted, isScreenShotByCurrentUser, isUserHost, screenShareMetaData, screenshotRecord } from 'AnyR/states/chatChannelStates'
+import {
+    allOtherChattersIdSet,
+    chatChannelState,
+    isCurrentUserMuted,
+    isScreenShotByCurrentUser,
+    isUserHost,
+    screenShareMetaData,
+    screenshotRecord
+} from 'AnyR/states/chatChannelStates'
 import { onMounted, onUpdated, ref } from 'vue'
 import { userStates } from 'AnyR/states/wsStates'
 import ImageEditor from 'AnyR/widgets/ImageEditor/imageEditor.vue'
 import { Message, Modal } from '@arco-design/web-vue'
 import { alova } from '@/api/alova-instance.ts'
 import VideoLoader from './videoLoader.vue'
+import { convertURL } from '@/utils/convertURL.ts'
 
 const ps = defineProps<{
     id: any
@@ -123,12 +140,12 @@ async function toggleRecording() {
     }
 }
 
-const isCenterUserMuted = computed(function () {
+const isCenterUserMuted = computed(function() {
     return chatChannelState.value.mutedUserIdSet.includes(ps.id)
 })
 
 const firstVideoToBeAttached = ref('[data-self="remote-main"] video')
-const recordListener = function (records: any) {
+const recordListener = function(records: any) {
     AnyR?.agora.continueMark(records)
 }
 
@@ -183,7 +200,7 @@ function paintSaved(blob: any) {
 
 async function beforeEndMarkHandle() {
     if (isScreenShotByCurrentUser.value) {
-        return new Promise(function (resolve) {
+        return new Promise(function(resolve) {
             Modal.warning({
                 title: '退出确认',
                 content: '你是截图发起者，退出后将会要求其他用户一同退出，确认？',
@@ -233,7 +250,7 @@ function handleBlinkingStart($e: PointerEvent) {
     })
 }
 
-const userDataForThis = computed(function () {
+const userDataForThis = computed(function() {
     const userNow: any = userStates.value.onlineContacts.find((a: any) => a.fromID === ps.id)
     return {
         name: userNow?.fromName || '--',
@@ -249,12 +266,12 @@ const checkVideoExists = () => {
     isVideoVisible.value = video ? true : false
 }
 const observer = new MutationObserver(checkVideoExists)
-onMounted(function () {
+onMounted(function() {
     AnyR?.agora.forceReplay(ps.id)
     observer.observe(remoteVideoRef.value, { childList: true, subtree: true })
 })
 
-onUpdated(function () {
+onUpdated(function() {
     AnyR?.agora.forceReplay(ps.id)
 })
 
@@ -276,7 +293,8 @@ function toggleScreenShare() {
         AnyR?.agora.screenShareHandle()
     }
     AnyR?.agora.screenShareHandle()
-    AnyR?.agora.agoraApp.toggleScreenShare(!screenShareMetaData.value.byCurrentUser, endHandle, endHandle, () => {})
+    AnyR?.agora.agoraApp.toggleScreenShare(!screenShareMetaData.value.byCurrentUser, endHandle, endHandle, () => {
+    })
 }
 
 function allMute() {
@@ -298,7 +316,7 @@ function hangupCall() {
 </script>
 <style lang="less" scoped>
 .item {
-    @apply flex-center flex-col rounded cursor-pointer;
+@apply flex-center flex-col rounded cursor-pointer;
 
     &:hover {
         background-color: var(--color-fill-2);
@@ -324,6 +342,7 @@ function hangupCall() {
         opacity: 1;
     }
 }
+
 :deep([data-self='remote-main'] video) {
     transform: none !important;
 }