添加未通话时的播放视频
	
		
			
	
		
	
	
		
	
		
			All checks were successful
		
		
	
	
		
			
				
	
				Gitea Actions Demo / Explore-Gitea-Actions (push) Successful in 3m3s
				
			
		
		
	
	
				
					
				
			
		
			All checks were successful
		
		
	
	Gitea Actions Demo / Explore-Gitea-Actions (push) Successful in 3m3s
				
			This commit is contained in:
		
							parent
							
								
									d293077833
								
							
						
					
					
						commit
						fb104034ab
					
				
							
								
								
									
										51
									
								
								src/index.js
									
									
									
									
									
								
							
							
						
						
									
										51
									
								
								src/index.js
									
									
									
									
									
								
							| @ -28,6 +28,9 @@ class WebRTCChat { | |||||||
|         this.videoStreams = new Map(); // 存储不同视频的MediaStream
 |         this.videoStreams = new Map(); // 存储不同视频的MediaStream
 | ||||||
|         this.currentVideoStream = null; |         this.currentVideoStream = null; | ||||||
|          |          | ||||||
|  |         // 添加通话状态标识
 | ||||||
|  |         this.isCallActive = false; | ||||||
|  | 
 | ||||||
|         // 添加视频相关属性
 |         // 添加视频相关属性
 | ||||||
|         this.videoSender = null; // WebRTC视频发送器
 |         this.videoSender = null; // WebRTC视频发送器
 | ||||||
|         this.currentVideoStream = null; // 当前视频流
 |         this.currentVideoStream = null; // 当前视频流
 | ||||||
| @ -67,6 +70,9 @@ class WebRTCChat { | |||||||
|         this.loadDefaultVideo(); |         this.loadDefaultVideo(); | ||||||
|         this.bindEvents(); |         this.bindEvents(); | ||||||
|          |          | ||||||
|  |         // 在未开始通话状态下播放欢迎视频
 | ||||||
|  |         this.playWelcomeVideo(); | ||||||
|  | 
 | ||||||
|         // 在初始化完成后预加载常用视频
 |         // 在初始化完成后预加载常用视频
 | ||||||
|         setTimeout(() => { |         setTimeout(() => { | ||||||
|             this.logMessage('开始预加载常用视频...', 'info'); |             this.logMessage('开始预加载常用视频...', 'info'); | ||||||
| @ -78,6 +84,33 @@ class WebRTCChat { | |||||||
|         window.webrtcApp = this; |         window.webrtcApp = this; | ||||||
|     } |     } | ||||||
|      |      | ||||||
|  |     // 添加新方法:播放欢迎视频
 | ||||||
|  |     async playWelcomeVideo() { | ||||||
|  |         try { | ||||||
|  |             // 确保页面元素已加载
 | ||||||
|  |             if (!this.recordedVideo) { | ||||||
|  |                 setTimeout(() => this.playWelcomeVideo(), 100); | ||||||
|  |                 return; | ||||||
|  |             } | ||||||
|  |              | ||||||
|  |             const welcomeVideoFile = '8-5-qc-i.mp4'; | ||||||
|  |             this.logMessage(`开始播放欢迎视频: ${welcomeVideoFile}`, 'info'); | ||||||
|  |              | ||||||
|  |             // 直接设置video元素的src,不通过WebRTC
 | ||||||
|  |             this.recordedVideo.src = `/videos/${welcomeVideoFile}`; | ||||||
|  |             this.recordedVideo.loop = true; | ||||||
|  |             this.recordedVideo.muted = true; | ||||||
|  |             this.recordedVideo.autoplay = true; | ||||||
|  |              | ||||||
|  |             // 开始播放
 | ||||||
|  |             await this.recordedVideo.play(); | ||||||
|  |             this.logMessage('欢迎视频播放成功', 'success'); | ||||||
|  |              | ||||||
|  |         } catch (error) { | ||||||
|  |             this.logMessage(`播放欢迎视频失败: ${error.message}`, 'error'); | ||||||
|  |         } | ||||||
|  |     } | ||||||
|  | 
 | ||||||
|     initializeElements() { |     initializeElements() { | ||||||
|         // 视频元素
 |         // 视频元素
 | ||||||
|         this.localVideo = document.getElementById('localVideo'); |         this.localVideo = document.getElementById('localVideo'); | ||||||
| @ -815,6 +848,9 @@ class WebRTCChat { | |||||||
| 
 | 
 | ||||||
|     async startCall() { |     async startCall() { | ||||||
|         try { |         try { | ||||||
|  |             // 设置通话状态为激活
 | ||||||
|  |             this.isCallActive = true; | ||||||
|  |              | ||||||
|             // 切换到通话中图标
 |             // 切换到通话中图标
 | ||||||
|             this.switchToCallingIcon(); |             this.switchToCallingIcon(); | ||||||
|              |              | ||||||
| @ -848,17 +884,21 @@ class WebRTCChat { | |||||||
|             // 通知服务器通话开始
 |             // 通知服务器通话开始
 | ||||||
|             this.socket.emit('call-started'); |             this.socket.emit('call-started'); | ||||||
|              |              | ||||||
|             // 开始播放当前场景的默认视频
 |             // 开始播放当前场景的默认视频(替换欢迎视频)
 | ||||||
|             await this.startDefaultVideoStream(); |             await this.startDefaultVideoStream(); | ||||||
|              |              | ||||||
|         } catch (error) { |         } catch (error) { | ||||||
|             // 如果出错,恢复到默认图标
 |             // 如果出错,恢复通话状态
 | ||||||
|  |             this.isCallActive = false; | ||||||
|             this.switchToDefaultIcon(); |             this.switchToDefaultIcon(); | ||||||
|             this.logMessage('无法访问麦克风: ' + error.message, 'error'); |             this.logMessage('无法访问麦克风: ' + error.message, 'error'); | ||||||
|         } |         } | ||||||
|     } |     } | ||||||
| 
 | 
 | ||||||
|     stopCall() { |     stopCall() { | ||||||
|  |         // 设置通话状态为非激活
 | ||||||
|  |         this.isCallActive = false; | ||||||
|  |          | ||||||
|         // 恢复到默认图标
 |         // 恢复到默认图标
 | ||||||
|         this.switchToDefaultIcon(); |         this.switchToDefaultIcon(); | ||||||
|          |          | ||||||
| @ -889,6 +929,13 @@ class WebRTCChat { | |||||||
|             this.peerConnection = null; |             this.peerConnection = null; | ||||||
|         } |         } | ||||||
|          |          | ||||||
|  |         // 通话结束后重新播放欢迎视频
 | ||||||
|  |         setTimeout(() => { | ||||||
|  |             if (!this.isCallActive) { | ||||||
|  |                 this.playWelcomeVideo(); | ||||||
|  |             } | ||||||
|  |         }, 1000); | ||||||
|  |          | ||||||
|         // 直接刷新页面清除所有缓存
 |         // 直接刷新页面清除所有缓存
 | ||||||
|         console.log('通话已结束,正在刷新页面清除缓存...'); |         console.log('通话已结束,正在刷新页面清除缓存...'); | ||||||
|         window.location.reload(); |         window.location.reload(); | ||||||
|  | |||||||
							
								
								
									
										
											BIN
										
									
								
								videos/8-5-qc-i.mp4
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										
											BIN
										
									
								
								videos/8-5-qc-i.mp4
									
									
									
									
									
										Normal file
									
								
							
										
											Binary file not shown.
										
									
								
							
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user
	 Song367
						Song367