添加等待描述

src/index.html

@@ -119,6 +119,27 @@
             opacity: 1;
         }
 
+        /* 等待连接提示样式 */
+        .connection-waiting {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            z-index: 20;
+            color: white;
+            font-size: 18px;
+            text-align: center;
+            background: rgba(0, 0, 0, 0.7);
+            padding: 30px;
+            border-radius: 15px;
+            backdrop-filter: blur(10px);
+            transition: opacity 0.3s ease;
+        }
+        
+        .connection-waiting.show {
+            opacity: 1;
+        }
+        
         /* 加载动画 */
         .loading-spinner {
             width: 40px;
@@ -451,6 +472,12 @@
                         <div class="loading-spinner"></div>
                         <!-- <div>正在切换视频...</div> -->
                     </div>
+
+                    <!-- 等待连接提示 -->
+                    <div class="connection-waiting" id="connectionWaiting" style="display: none;">
+                        <div class="loading-spinner"></div>
+                        <div style="color: white; font-size: 18px; margin-top: 10px;">等待连接通话中...</div>
+                    </div>
                 </div>
                 
                 <div class="video-info" style="display: none;">

src/index.js

@@ -115,6 +115,9 @@ class WebRTCChat {
         this.messageLog = document.getElementById('messageLog');
         this.currentVideoName = document.getElementById('currentVideoName');
         this.videoList = document.getElementById('videoList');
+
+        // 等待连接提示元素
+        this.connectionWaiting = document.getElementById('connectionWaiting');
     }
 
     initializeSocket() {
@@ -828,8 +831,33 @@ class WebRTCChat {
         // this.stopVoiceButton.onclick = () => this.stopVoiceRecording();
     }
 
+    // 显示等待连接提示
+    showConnectionWaiting() {
+        if (this.connectionWaiting) {
+            this.connectionWaiting.style.display = 'block';
+            // 使用setTimeout确保display设置后再添加show类
+            setTimeout(() => {
+                this.connectionWaiting.classList.add('show');
+            }, 10);
+        }
+    }
+    
+    // 隐藏等待连接提示
+    hideConnectionWaiting() {
+        if (this.connectionWaiting) {
+            this.connectionWaiting.classList.remove('show');
+            // 等待动画完成后隐藏元素
+            setTimeout(() => {
+                this.connectionWaiting.style.display = 'none';
+            }, 300);
+        }
+    }
+
     async startCall() {
         try {
+
+            // 显示等待连接提示
+            this.showConnectionWaiting();
             // 切换到通话中图标
             this.switchToCallingIcon();
             
@@ -871,14 +899,21 @@ class WebRTCChat {
             // 开始播放当前场景的默认视频
             await this.startDefaultVideoStream();
 
+            // 隐藏等待连接提示
+            this.hideConnectionWaiting();
+            
         } catch (error) {
-            // 如果出错，恢复到默认图标
+            // 如果出错，隐藏等待连接提示并恢复到默认图标
+            this.hideConnectionWaiting();
             this.switchToDefaultIcon();
             this.logMessage('无法访问麦克风: ' + error.message, 'error');
         }
     }
 
     stopCall() {
+
+        // 隐藏等待连接提示
+        this.hideConnectionWaiting();
         // 恢复到默认图标
         this.switchToDefaultIcon();