diff --git a/src/index.html b/src/index.html
index d2a3976..df81ae5 100644
--- a/src/index.html
+++ b/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 @@
+
+
+
diff --git a/src/index.js b/src/index.js
index 02f560b..200226e 100644
--- a/src/index.js
+++ b/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();