UI：挂断电话按钮，切换低数据码率的视频，状态改为正在通话中

server.js

@@ -98,8 +98,8 @@ const scenes = [
   },
   {
     name: '开车',
-    defaultVideo: '8-4-kc-bd.mp4',
-    interactionVideo: '8-4-kc-sh.mp4',
+    defaultVideo: '8-5-kc-bd.mp4',
+    interactionVideo: '8-5-kc-sh.mp4',
     tag: 'driving',
     apiKey: 'bot-20250623140339-r8f8b' // 开车场景的API key
   },

src/index.html

@@ -315,7 +315,7 @@
             <!-- 音频状态显示 - 显示状态文本 -->
             <div class="audio-status">
                 <div class="status-indicator">
-                    <span id="audioStatus">未连接</span>
+                    <span id="audioStatus" style="display: none;">未连接</span>
                 </div>
             </div>
 
@@ -366,7 +366,7 @@
                         <path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z" fill="white" opacity="0.8"/>
                     </svg>
                 </button>
-                <button id="stopButton" class="btn btn-danger" disabled title="结束通话">
+                <button id="stopButton" class="btn btn-danger" disabled title="结束通话" style="display: none;">
                     <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                         <path d="M19.23 15.26l-2.54-.29c-.61-.07-1.21.14-1.64.57l-1.84 1.84c-2.83-1.44-5.15-3.75-6.59-6.59l1.85-1.85c.43-.43.64-1.03.57-1.64l-.29-2.52c-.12-1.01-.97-1.77-1.99-1.77H5.03c-1.13 0-2.07.94-2 2.07.53 8.54 7.36 15.36 15.89 15.89 1.13.07 2.07-.87 2.07-2v-1.73c.01-1.01-.75-1.86-1.76-1.98z" fill="white"/>
                         <line x1="18" y1="6" x2="6" y2="18" stroke="white" stroke-width="2"/>
@@ -392,7 +392,7 @@
 
             <!-- 隐藏的状态显示 -->
             <div class="status-section" style="display: none;">
-                <div id="connectionStatus" class="status">未连接</div>
+                <div id="connectionStatus" class="status" style="display: none;">未连接</div>
                 <div id="messageLog" class="message-log"></div>
             </div>
         </div>

src/index.js

@@ -117,12 +117,13 @@ class WebRTCChat {
         this.socket = io();
         
         this.socket.on('connect', () => {
-            this.updateStatus('已连接到服务器', 'connected');
+            this.updateStatus('正在通话中', 'connected');
             this.logMessage('已连接到服务器', 'success');
         });
 
         this.socket.on('disconnect', () => {
-            this.updateStatus('与服务器断开连接', 'disconnected');
+            // 断开连接时隐藏状态
+            this.connectionStatus.style.display = 'none';
             this.logMessage('与服务器断开连接', 'error');
         });
 
@@ -832,9 +833,9 @@ class WebRTCChat {
             this.stopButton.disabled = false;
             
             // 显示结束通话按钮
-            this.stopButton.classList.add('show');
+            this.stopButton.style.display = 'block';
             
-            this.updateAudioStatus('已连接', 'connected');
+            this.updateAudioStatus('正在通话中', 'connected');
             this.logMessage('音频通话已开始', 'success');
             
             // 确保视频映射已加载
@@ -861,6 +862,10 @@ class WebRTCChat {
         // 恢复到默认图标
         this.switchToDefaultIcon();
         
+        // 隐藏结束通话按钮
+        this.stopButton.style.display = 'none';
+        this.stopButton.disabled = true;
+        
         // 发送用户关闭连接事件到后端
         if (this.socket && this.socket.connected) {
             this.socket.emit('user-disconnect');
@@ -1185,11 +1190,18 @@ class WebRTCChat {
     updateStatus(message, type) {
         this.connectionStatus.textContent = message;
         this.connectionStatus.className = `status ${type}`;
+        // 显示状态元素（仅在连接时显示）
+        if (type === 'connected') {
+            this.connectionStatus.style.display = 'block';
+        }
     }
 
     updateAudioStatus(message, type) {
         this.audioStatus.textContent = message;
         this.audioStatus.className = `status-indicator ${type}`;
+        if (type === 'connected') {
+            this.audioStatus.style.display = 'block';
+        }
     }
 
     logMessage(message, type = 'info') {
@@ -1241,6 +1253,10 @@ class WebRTCChat {
             startButton.classList.remove('calling');
             startButton.title = '开始通话';
             startButton.disabled = false;
+            
+            // 隐藏停止按钮
+            this.stopButton.style.display = 'none';
+            this.stopButton.disabled = true;
         }
     }