添加内容+2

src/views/remote/videoCall/videoChat.vue

@@ -13,19 +13,19 @@
             <a-col :span="12">
                 <div class="flex items-center p-1.5 leading-7">
                     <global-icon icon="user-group" :size="16"></global-icon>
-                    <span class="text-xs ml-1 text-theme-text2">房间已有 6 人</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 icon="mic" :size="16"></global-icon>
-                    <span class="text-xs ml-1 text-theme-text2">麦克风已开启</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 icon="camera" :size="16"></global-icon>
-                    <span class="text-xs ml-1 text-theme-text2">摄像头已开启</span>
+                    <span class="text-xs ml-1 text-theme-text2">{{webrtcStates.isCameraAttached ? '摄像头已开启' : "摄像头未开启"}}</span>
                 </div>
             </a-col>
         </a-row>
@@ -57,6 +57,8 @@
 <script setup lang="ts">
 import VideoItem from './videoItem.vue'
 import ChatDetails from './chatDetails.vue'
+import {webrtcStates} from "AnyR/states/webrtcStates";
+import {chatChannelState} from "AnyR/states/chatChannelStates";
 </script>
 <style lang="less" scoped>
 .chat-list {

src/views/remote/videoCall/videoItem.vue

 <template>
-    <div class="relative h-full" :id="ps.isSelf ? 'LocalVideo' : `RemoteVideo${ps.id}`">
+  <div :id="ps.isSelf ? 'LocalVideo' : `RemoteVideo${ps.id}`" class="relative h-full">
     <div class="absolute flex justify-between items-center p-1 top-0 left-0 w-full z-10">
-            <div class="text-xs px-2 rounded-sm leading-5 bg-primary-disable text-primary">冯云</div>
+      <div class="text-xs px-2 rounded-sm leading-5 bg-primary-disable text-primary">
+        {{ userDataForThis.name }}
+      </div>
       <a-space :size="4">
         <div class="rounded-full size-6 flex-center bg-theme-bg1 cursor-pointer">
-                    <global-icon icon="writing" :size="12"></global-icon>
+          <global-icon :size="12" icon="writing"></global-icon>
         </div>
         <div class="rounded-full size-6 flex-center cursor-pointer" style="background-color: var(--color-border-1)">
-                    <global-icon icon="mic" :size="12" color="rgb(var(--success-6))"></global-icon>
+          <global-icon :size="12" color="rgb(var(--success-6))" icon="mic"></global-icon>
         </div>
       </a-space>
     </div>
-        <div class="absolute left-0 bottom-0 z-10 p-1">
+    <div v-if="isUserHost" class="absolute left-0 bottom-0 z-10 p-1">
       <div class="flex-center rounded-sm px-2 py-0.5 bg-fill-bg1">
-                <global-icon icon="user" :size="12"></global-icon>
+        <global-icon :size="12" icon="user"></global-icon>
         <span class="text-xs ml-1 text-theme-text1">主持人</span>
       </div>
     </div>
-        <div class="absolute top-0 left-0 right-0 bottom-0 flex-center flex-col">
+    <div v-if="userDataForThis.calling" class="absolute top-0 left-0 right-0 bottom-0 flex-center flex-col">
       <div class="text-base text-theme-text1">呼叫中...</div>
-            <a-button type="primary" shape="circle" status="danger">
-                <global-icon icon="phone-hangup" :size="20" color="var(--color-bg-white)"></global-icon>
+      <a-button shape="circle" status="danger" type="primary" @click="cancelCallExact">
+        <global-icon :size="20" color="var(--color-bg-white)" icon="phone-hangup"></global-icon>
       </a-button>
     </div>
   </div>
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
+import {isUserHost} from "AnyR/states/chatChannelStates";
+import {userStates} from "AnyR/states/wsStates";
+import {computed, onMounted} from "vue";
+import {useAnyR} from "AnyR/index";
+
 const ps = defineProps({
   isSelf: Boolean,
   id: String
 })
+
+const userDataForThis = computed(function () {
+  const userNow: any = userStates.value.onlineContacts.find((a: any) => a.fromID === ps.id);
+  return {
+    name: userNow.fromName || '--',
+    calling: userNow.callState !== 'calling'
+  }
+})
+
+const AnyR = useAnyR();
+
+function cancelCallExact() {
+  AnyR?.agora.cancelExactCall(ps.id);
+}
+
+onMounted(function () {
+  if (!ps.isSelf) {
+    AnyR?.agora.forceReplay(ps.id)
+  }
+})
 </script>
 <style lang="less" scoped></style>

src/views/remote/videoCall/videoTools.vue

@@ -53,11 +53,16 @@ import { isUserHost } from 'AnyR/states/chatChannelStates'
 import { ref } from 'vue'
 import { isCurrentUserMuted } from 'AnyR/states/chatChannelStates'
 import { screenShareMetaData } from 'AnyR/states/chatChannelStates'
+import {onMounted} from "vue";
 
 const ps = defineProps<{
     id: any
 }>()
 
+onMounted(function () {
+  AnyR?.agora.forceReplay(ps.id)
+})
+
 const isVoiceChatOnly = ref(false)
 
 const AnyR = useAnyR()