Upload 3 files

app.py

@@ -0,0 +1,285 @@
+from flask import Flask, render_template, request, jsonify
+from flask_socketio import SocketIO, emit, join_room, leave_room
+import os
+import uuid
+from datetime import datetime
+import logging
+
+# 配置日志
+logging.basicConfig(level=logging.INFO)
+logger = logging.getLogger(__name__)
+
+app = Flask(__name__)
+app.config['SECRET_KEY'] = os.urandom(24)
+socketio = SocketIO(app, cors_allowed_origins="*")
+
+# 内存中存储活跃的房间和参与者
+active_rooms = {}  # {room_id: {'created_at': timestamp, 'participants': {user_id: user_data}}}
+
+@app.route('/')
+def index():
+    """提供主页"""
+    return render_template('index.html')
+
+@app.route('/api/room', methods=['POST'])
+def create_room():
+    """创建新房间"""
+    room_id = str(uuid.uuid4())[:8]  # 生成短的唯一ID
+    active_rooms[room_id] = {
+        'created_at': datetime.now().isoformat(),
+        'participants': {}
+    }
+    logger.info(f"创建房间: {room_id}")
+    return jsonify({'roomId': room_id})
+
+@app.route('/api/room/<room_id>', methods=['GET'])
+def check_room(room_id):
+    """检查房间是否存在"""
+    if room_id in active_rooms:
+        return jsonify({
+            'exists': True,
+            'participantCount': len(active_rooms[room_id]['participants'])
+        })
+    return jsonify({'exists': False})
+
+# Socket.IO 事件处理器
+@socketio.on('connect')
+def handle_connect():
+    """处理客户端连接"""
+    logger.info(f"客户端连接: {request.sid}")
+    emit('connected', {'sid': request.sid})
+
+@socketio.on('disconnect')
+def handle_disconnect():
+    """处理客户端断开连接"""
+    logger.info(f"客户端断开连接: {request.sid}")
+    # 找到并从任何房间中移除用户
+    for room_id, room_data in list(active_rooms.items()):
+        for user_id, user_data in list(room_data['participants'].items()):
+            if user_data.get('sid') == request.sid:
+                # 通知房间中的其他人
+                emit('user_disconnected', {'userId': user_id}, room=room_id)
+                # 从房间中移除用户
+                del room_data['participants'][user_id]
+                logger.info(f"用户 {user_id} 已从房间 {room_id} 移除")
+                # 清理空房间
+                if not room_data['participants']:
+                    del active_rooms[room_id]
+                    logger.info(f"房间 {room_id} 已删除 (空)")
+                break
+
+@socketio.on('join')
+def handle_join(data):
+    """处理用户加入房间"""
+    room_id = data.get('roomId')
+    display_name = data.get('displayName')
+    user_id = data.get('userId', str(uuid.uuid4())[:8])
+    
+    if not room_id or not display_name:
+        emit('error', {'message': '房间ID和显示名称是必需的'})
+        return
+    
+    # 检查房间是否存在
+    if room_id not in active_rooms:
+        active_rooms[room_id] = {
+            'created_at': datetime.now().isoformat(),
+            'participants': {}
+        }
+        logger.info(f"在加入时创建房间: {room_id}")
+    
+    # 将用户添加到房间
+    active_rooms[room_id]['participants'][user_id] = {
+        'displayName': display_name,
+        'sid': request.sid,
+        'joinedAt': datetime.now().isoformat()
+    }
+    
+    # 加入Socket.IO房间
+    join_room(room_id)
+    
+    # 获取现有参与者列表发送给新用户
+    participants = []
+    for pid, pdata in active_rooms[room_id]['participants'].items():
+        if pid != user_id:  # 不包括正在加入的用户
+            participants.append({
+                'userId': pid,
+                'displayName': pdata['displayName']
+            })
+    
+    # 通知加入的用户
+    emit('joined', {
+        'roomId': room_id,
+        'userId': user_id,
+        'participants': participants
+    })
+    
+    # 通知其他参与者有新用户加入
+    emit('user_joined', {
+        'userId': user_id,
+        'displayName': display_name
+    }, room=room_id, include_self=False)
+    
+    logger.info(f"用户 {user_id} ({display_name}) 加入房间 {room_id}")
+
+@socketio.on('leave')
+def handle_leave(data):
+    """处理用户离开房间"""
+    room_id = data.get('roomId')
+    user_id = data.get('userId')
+    
+    if not room_id or not user_id:
+        emit('error', {'message': '房间ID和用户ID是必需的'})
+        return
+    
+    if room_id in active_rooms and user_id in active_rooms[room_id]['participants']:
+        # 从房间数据中移除用户
+        del active_rooms[room_id]['participants'][user_id]
+        
+        # 清理空房间
+        if not active_rooms[room_id]['participants']:
+            del active_rooms[room_id]
+            logger.info(f"房间 {room_id} 已删除 (空)")
+        else:
+            # 通知其他人用户已离开
+            emit('user_left', {'userId': user_id}, room=room_id)
+        
+        # 离开Socket.IO房间
+        leave_room(room_id)
+        logger.info(f"用户 {user_id} 离开房间 {room_id}")
+        
+        emit('left', {'roomId': room_id, 'userId': user_id})
+
+# WebRTC信令事件
+@socketio.on('offer')
+def handle_offer(data):
+    """处理offer信令"""
+    room_id = data.get('roomId')
+    target_id = data.get('targetId')
+    from_id = data.get('fromId')
+    offer = data.get('offer')
+    
+    if not all([room_id, target_id, from_id, offer]):
+        emit('error', {'message': 'offer缺少必要数据'})
+        return
+    
+    # 查找目标用户的socket ID
+    if (room_id in active_rooms and 
+        target_id in active_rooms[room_id]['participants']):
+        target_sid = active_rooms[room_id]['participants'][target_id]['sid']
+        
+        # 将offer发送给目标用户
+        emit('offer', {
+            'fromId': from_id,
+            'offer': offer
+        }, room=target_sid)
+        logger.debug(f"已转发来自 {from_id} 的offer到 {target_id}")
+
+@socketio.on('answer')
+def handle_answer(data):
+    """处理answer信令"""
+    room_id = data.get('roomId')
+    target_id = data.get('targetId')
+    from_id = data.get('fromId')
+    answer = data.get('answer')
+    
+    if not all([room_id, target_id, from_id, answer]):
+        emit('error', {'message': 'answer缺少必要数据'})
+        return
+    
+    # 查找目标用户的socket ID
+    if (room_id in active_rooms and 
+        target_id in active_rooms[room_id]['participants']):
+        target_sid = active_rooms[room_id]['participants'][target_id]['sid']
+        
+        # 将answer发送给目标用户
+        emit('answer', {
+            'fromId': from_id,
+            'answer': answer
+        }, room=target_sid)
+        logger.debug(f"已转发来自 {from_id} 的answer到 {target_id}")
+
+@socketio.on('ice_candidate')
+def handle_ice_candidate(data):
+    """处理ICE候选者信令"""
+    room_id = data.get('roomId')
+    target_id = data.get('targetId')
+    from_id = data.get('fromId')
+    candidate = data.get('candidate')
+    
+    if not all([room_id, target_id, from_id, candidate]):
+        emit('error', {'message': 'ICE候选者缺少必要数据'})
+        return
+    
+    # 查找目标用户的socket ID
+    if (room_id in active_rooms and 
+        target_id in active_rooms[room_id]['participants']):
+        target_sid = active_rooms[room_id]['participants'][target_id]['sid']
+        
+        # 将ICE候选者发送给目标用户
+        emit('ice_candidate', {
+            'fromId': from_id,
+            'candidate': candidate
+        }, room=target_sid)
+        logger.debug(f"已转发来自 {from_id} 的ICE候选者到 {target_id}")
+
+@socketio.on('chat_message')
+def handle_chat_message(data):
+    """处理聊天消息"""
+    room_id = data.get('roomId')
+    from_id = data.get('fromId')
+    message = data.get('message')
+    
+    if not all([room_id, from_id, message]):
+        emit('error', {'message': '聊天消息缺少必要数据'})
+        return
+    
+    # 获取发送者的显示名称
+    if (room_id in active_rooms and 
+        from_id in active_rooms[room_id]['participants']):
+        from_name = active_rooms[room_id]['participants'][from_id]['displayName']
+        
+        # 向房间中的所有用户广播消息
+        emit('chat_message', {
+            'fromId': from_id,
+            'fromName': from_name,
+            'message': message,
+            'timestamp': datetime.now().isoformat()
+        }, room=room_id)
+        logger.debug(f"已广播来自 {from_id} 的聊天消息到房间 {room_id}")
+
+@socketio.on('media_state_change')
+def handle_media_state_change(data):
+    """处理媒体状态变化"""
+    room_id = data.get('roomId')
+    user_id = data.get('userId')
+    audio_enabled = data.get('audioEnabled')
+    video_enabled = data.get('videoEnabled')
+    
+    if not all([room_id, user_id]) or audio_enabled is None or video_enabled is None:
+        emit('error', {'message': '媒体状态变化缺少必要数据'})
+        return
+    
+    # 向房间中的所有用户广播媒体状态变化
+    emit('media_state_change', {
+        'userId': user_id,
+        'audioEnabled': audio_enabled,
+        'videoEnabled': video_enabled
+    }, room=room_id)
+    logger.debug(f"已广播房间 {room_id} 中用户 {user_id} 的媒体状态变化")
+
+# if __name__ == '__main__':
+#     # 确保templates目录存在
+#     os.makedirs('templates', exist_ok=True)
+    
+#     port = int(os.environ.get('PORT', 5000))
+#     logger.info(f"在端口 {port} 上启动服务器")
+#     socketio.run(app, host='0.0.0.0', port=port, debug=True)
+
+if __name__ == '__main__':
+    # 确保templates目录存在
+    os.makedirs('templates', exist_ok=True)
+    
+    # 修改端口为7860
+    port = 7860
+    logger.info(f"在端口 {port} 上启动服务器")
+    socketio.run(app, host='0.0.0.0', port=port, debug=True)

requirements.txt

@@ -0,0 +1,5 @@
+flask
+flask-socketio
+python-engineio
+python-socketio
+eventlet

templates/index.html

@@ -0,0 +1,1143 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>视频会议系统</title>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.4.1/socket.io.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/webrtc-adapter/8.1.1/adapter.min.js"></script>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: 'Arial', sans-serif;
+        }
+        
+        body {
+            background-color: #f0f2f5;
+            color: #333;
+        }
+        
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 20px;
+        }
+        
+        header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 15px 0;
+            border-bottom: 1px solid #ddd;
+            margin-bottom: 20px;
+        }
+        
+        .logo {
+            font-size: 24px;
+            font-weight: bold;
+            color: #0066cc;
+        }
+        
+        .controls {
+            display: flex;
+            gap: 10px;
+        }
+        
+        button {
+            padding: 8px 16px;
+            background-color: #0066cc;
+            color: white;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            font-size: 14px;
+            transition: background-color 0.3s;
+        }
+        
+        button:hover {
+            background-color: #0055aa;
+        }
+        
+        button.red {
+            background-color: #cc0000;
+        }
+        
+        button.red:hover {
+            background-color: #aa0000;
+        }
+        
+        .disabled {
+            background-color: #888;
+            cursor: not-allowed;
+        }
+        
+        .disabled:hover {
+            background-color: #888;
+        }
+        
+        .meeting-container {
+            display: grid;
+            grid-template-columns: 1fr 300px;
+            gap: 20px;
+            height: calc(100vh - 150px);
+        }
+        
+        .video-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+            grid-auto-rows: 1fr;
+            gap: 15px;
+            height: 100%;
+            overflow: auto;
+        }
+        
+        .video-container {
+            background-color: #222;
+            border-radius: 8px;
+            overflow: hidden;
+            position: relative;
+        }
+        
+        .video-container video {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+        
+        .user-name {
+            position: absolute;
+            bottom: 10px;
+            left: 10px;
+            color: white;
+            background-color: rgba(0, 0, 0, 0.5);
+            padding: 4px 8px;
+            border-radius: 4px;
+            font-size: 14px;
+        }
+        
+        .mic-status {
+            position: absolute;
+            top: 10px;
+            right: 10px;
+            color: white;
+            padding: 4px;
+            border-radius: 50%;
+        }
+        
+        .sidebar {
+            background-color: white;
+            border-radius: 8px;
+            display: flex;
+            flex-direction: column;
+            height: 100%;
+        }
+        
+        .tabs {
+            display: flex;
+            border-bottom: 1px solid #ddd;
+        }
+        
+        .tab {
+            padding: 10px 15px;
+            cursor: pointer;
+        }
+        
+        .tab.active {
+            color: #0066cc;
+            border-bottom: 2px solid #0066cc;
+        }
+        
+        .tab-content {
+            flex-grow: 1;
+            overflow: auto;
+            padding: 15px;
+        }
+        
+        .participants-list {
+            list-style: none;
+        }
+        
+        .participant {
+            display: flex;
+            align-items: center;
+            padding: 8px 0;
+            border-bottom: 1px solid #eee;
+        }
+        
+        .participant-info {
+            flex-grow: 1;
+        }
+        
+        .chat-container {
+            display: flex;
+            flex-direction: column;
+            height: 100%;
+        }
+        
+        .messages {
+            flex-grow: 1;
+            overflow: auto;
+            padding: 10px;
+        }
+        
+        .message {
+            margin-bottom: 10px;
+            padding: 8px 12px;
+            border-radius: 6px;
+            max-width: 80%;
+        }
+        
+        .message.received {
+            background-color: #f1f1f1;
+            align-self: flex-start;
+        }
+        
+        .message.sent {
+            background-color: #dcf8c6;
+            align-self: flex-end;
+        }
+        
+        .sender {
+            font-size: 12px;
+            color: #555;
+            margin-bottom: 2px;
+        }
+        
+        .chat-input {
+            display: flex;
+            padding: 10px;
+            border-top: 1px solid #ddd;
+        }
+        
+        .chat-input input {
+            flex-grow: 1;
+            padding: 8px 12px;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            margin-right: 10px;
+            outline: none;
+        }
+        
+        .join-form {
+            max-width: 400px;
+            margin: 100px auto;
+            background-color: white;
+            padding: 30px;
+            border-radius: 8px;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+        }
+        
+        .form-group {
+            margin-bottom: 20px;
+        }
+        
+        label {
+            display: block;
+            margin-bottom: 8px;
+            font-weight: bold;
+        }
+        
+        input[type="text"],
+        input[type="password"] {
+            width: 100%;
+            padding: 10px;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            font-size: 16px;
+        }
+        
+        .button-group {
+            display: flex;
+            justify-content: space-between;
+        }
+        
+        .hidden {
+            display: none;
+        }
+        
+        .video-off:after {
+            content: "视频已关闭";
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            color: white;
+            font-size: 16px;
+        }
+        
+        /* 屏幕共享布局 */
+        .screen-share {
+            grid-column: span 2;
+            height: 100%;
+            background-color: #222;
+            border-radius: 8px;
+            overflow: hidden;
+            position: relative;
+        }
+        
+        .screen-share video {
+            width: 100%;
+            height: 100%;
+            object-fit: contain;
+        }
+        
+        .screen-share-label {
+            position: absolute;
+            top: 10px;
+            left: 10px;
+            color: white;
+            background-color: rgba(0, 0, 0, 0.5);
+            padding: 4px 8px;
+            border-radius: 4px;
+            font-size: 14px;
+        }
+        
+        /* 响应式设计 */
+        @media (max-width: 768px) {
+            .meeting-container {
+                grid-template-columns: 1fr;
+            }
+            
+            .sidebar {
+                margin-top: 20px;
+                height: 300px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <!-- 登录表单 -->
+    <div class="join-form" id="joinForm">
+        <h2 style="text-align: center; margin-bottom: 20px;">加入会议</h2>
+        <div class="form-group">
+            <label for="displayName">您的姓名</label>
+            <input type="text" id="displayName" placeholder="请输入您的姓名">
+        </div>
+        <div class="form-group">
+            <label for="roomId">会议 ID</label>
+            <input type="text" id="roomId" placeholder="请输入会议 ID 或创建新会议">
+        </div>
+        <div class="button-group">
+            <button id="createMeeting">创建会议</button>
+            <button id="joinMeeting">加入会议</button>
+        </div>
+    </div>
+    
+    <!-- 会议主界面 (默认隐藏) -->
+    <div class="container hidden" id="meetingContainer">
+        <header>
+            <div class="logo">视频会议</div>
+            <div class="meeting-info">
+                会议 ID: <span id="currentRoomId"></span>
+                <button id="copyRoomId">复制</button>
+            </div>
+            <div class="controls">
+                <button id="toggleAudio"><i class="fas fa-microphone"></i> 麦克风</button>
+                <button id="toggleVideo"><i class="fas fa-video"></i> 摄像头</button>
+                <button id="toggleScreen"><i class="fas fa-desktop"></i> 屏幕共享</button>
+                <button id="leaveCall" class="red"><i class="fas fa-phone-slash"></i> 离开会议</button>
+            </div>
+        </header>
+        
+        <div class="meeting-container">
+            <div class="video-grid" id="videoGrid">
+                <!-- 视频将在这里动态添加 -->
+            </div>
+            
+            <div class="sidebar">
+                <div class="tabs">
+                    <div class="tab active" data-tab="participants">参会者</div>
+                    <div class="tab" data-tab="chat">聊天</div>
+                </div>
+                
+                <div class="tab-content" id="participantsTab">
+                    <ul class="participants-list" id="participantsList">
+                        <!-- 参会者将在这里动态添加 -->
+                    </ul>
+                </div>
+                
+                <div class="tab-content hidden" id="chatTab">
+                    <div class="chat-container">
+                        <div class="messages" id="messages">
+                            <!-- 消息将在这里动态添加 -->
+                        </div>
+                        <div class="chat-input">
+                            <input type="text" id="messageInput" placeholder="输入消息...">
+                            <button id="sendMessage">发送</button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        // RTCPeerConnection 配置
+        const rtcConfig = {
+            iceServers: [
+                { urls: 'stun:stun.l.google.com:19302' },
+                { urls: 'stun:stun1.l.google.com:19302' },
+                { urls: 'stun:stun2.l.google.com:19302' },
+                { urls: 'stun:stun3.l.google.com:19302' }
+            ]
+        };
+
+        // 全局变量
+        let socket;
+        let localStream;
+        let screenStream;
+        let peerConnections = {};
+        let dataChannels = {};
+        let currentRoom = null;
+        let localAudioEnabled = true;
+        let localVideoEnabled = true;
+
+        // DOM 元素
+        const joinForm = document.getElementById('joinForm');
+        const meetingContainer = document.getElementById('meetingContainer');
+        const displayNameInput = document.getElementById('displayName');
+        const roomIdInput = document.getElementById('roomId');
+        const createMeetingBtn = document.getElementById('createMeeting');
+        const joinMeetingBtn = document.getElementById('joinMeeting');
+        const currentRoomIdSpan = document.getElementById('currentRoomId');
+        const copyRoomIdBtn = document.getElementById('copyRoomId');
+        const toggleAudioBtn = document.getElementById('toggleAudio');
+        const toggleVideoBtn = document.getElementById('toggleVideo');
+        const toggleScreenBtn = document.getElementById('toggleScreen');
+        const leaveCallBtn = document.getElementById('leaveCall');
+        const videoGrid = document.getElementById('videoGrid');
+        const tabs = document.querySelectorAll('.tab');
+        const tabContents = document.querySelectorAll('.tab-content');
+        const participantsList = document.getElementById('participantsList');
+        const messages = document.getElementById('messages');
+        const messageInput = document.getElementById('messageInput');
+        const sendMessageBtn = document.getElementById('sendMessage');
+
+        // 连接到信令服务器
+        function connectSocket() {
+            socket = io();
+            
+            // Socket 事件处理
+            socket.on('connected', (data) => {
+                console.log('已连接到信令服务器', data);
+            });
+            
+            socket.on('error', (error) => {
+                console.error('Socket 错误:', error);
+                alert(`错误: ${error.message}`);
+            });
+            
+            socket.on('joined', handleJoinedRoom);
+            socket.on('user_joined', handleUserJoined);
+            socket.on('user_left', handleUserLeft);
+            socket.on('user_disconnected', handleUserLeft);
+            socket.on('offer', handleOffer);
+            socket.on('answer', handleAnswer);
+            socket.on('ice_candidate', handleIceCandidate);
+            socket.on('chat_message', handleChatMessage);
+            socket.on('media_state_change', handleMediaStateChange);
+        }
+
+        // 生成随机 ID
+        function generateId() {
+            return Math.random().toString(36).substr(2, 9);
+        }
+
+        // 初始化媒体流
+        async function initLocalStream() {
+            try {
+                localStream = await navigator.mediaDevices.getUserMedia({
+                    audio: true,
+                    video: true
+                });
+                
+                // 创建本地视频元素
+                const videoContainer = document.createElement('div');
+                videoContainer.className = 'video-container';
+                videoContainer.id = 'local-video-container';
+                
+                const video = document.createElement('video');
+                video.srcObject = localStream;
+                video.autoplay = true;
+                video.muted = true; // 避免回声
+                video.playsInline = true;
+                
+                const userName = document.createElement('div');
+                userName.className = 'user-name';
+                userName.textContent = displayNameInput.value + ' (你)';
+                
+                const micStatus = document.createElement('div');
+                micStatus.className = 'mic-status';
+                micStatus.innerHTML = '<i class="fas fa-microphone"></i>';
+                
+                videoContainer.appendChild(video);
+                videoContainer.appendChild(userName);
+                videoContainer.appendChild(micStatus);
+                
+                videoGrid.appendChild(videoContainer);
+                
+                return true;
+            } catch (error) {
+                console.error('无法获取媒体流', error);
+                alert('无法访问摄像头或麦克风，请确保它们已连接并授予访问权限。');
+                return false;
+            }
+        }
+
+        // 创建新会议
+        async function createMeeting() {
+            try {
+                const response = await fetch('/api/room', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' }
+                });
+                
+                const data = await response.json();
+                roomIdInput.value = data.roomId;
+                joinMeeting();
+            } catch (error) {
+                console.error('创建会议时出错:', error);
+                alert('无法创建新会议。请重试。');
+            }
+        }
+
+        // 加入会议
+        async function joinMeeting() {
+            const displayName = displayNameInput.value.trim();
+            const roomId = roomIdInput.value.trim();
+            
+            if (!displayName) {
+                alert('请输入您的姓名');
+                return;
+            }
+            
+            if (!roomId) {
+                alert('请输入会议 ID');
+                return;
+            }
+            
+            try {
+                // 检查房间是否存在
+                const response = await fetch(`/api/room/${roomId}`);
+                const roomData = await response.json();
+                
+                if (!roomData.exists) {
+                    const createRoom = confirm('此会议 ID 不存在。您想创建它吗？');
+                    if (!createRoom) return;
+                }
+                
+                // 连接到socket（如果尚未连接）
+                if (!socket) {
+                    connectSocket();
+                }
+                
+                // 初始化本地媒体流
+                const success = await initLocalStream();
+                if (!success) return;
+                
+                // 生成用户 ID
+                const userId = generateId();
+                
+                // 加入房间
+                socket.emit('join', {
+                    roomId: roomId,
+                    userId: userId,
+                    displayName: displayName
+                });
+                
+                currentRoom = {
+                    id: roomId,
+                    userId: userId,
+                    displayName: displayName
+                };
+                
+                // 显示房间 ID
+                currentRoomIdSpan.textContent = roomId;
+                
+                // 切换到会议界面
+                joinForm.classList.add('hidden');
+                meetingContainer.classList.remove('hidden');
+            } catch (error) {
+                console.error('加入会议时出错:', error);
+                alert('无法加入会议。请重试。');
+            }
+        }
+
+        // 成功加入房间后的处理
+        function handleJoinedRoom(data) {
+            console.log('已加入房间:', data);
+            
+            // 初始化与现有参与者的连接
+            data.participants.forEach(participant => {
+                createPeerConnection(participant.userId, participant.displayName, true);
+            });
+        }
+
+        // 处理新用户加入
+        function handleUserJoined(data) {
+            console.log('用户加入:', data);
+            createPeerConnection(data.userId, data.displayName, false);
+            
+            // 添加到参与者列表
+            addParticipantToList(data.userId, data.displayName);
+        }
+
+        // 处理用户离开
+        function handleUserLeft(data) {
+            console.log('用户离开:', data);
+            removeParticipant(data.userId);
+        }
+
+        // 创建WebRTC对等连接
+        function createPeerConnection(peerId, peerName, isInitiator) {
+            console.log(`创建${isInitiator ? '发起方' : '接收方'}对等连接，用于 ${peerName} (${peerId})`);
+            
+            // 创建RTCPeerConnection
+            const pc = new RTCPeerConnection(rtcConfig);
+            peerConnections[peerId] = pc;
+            
+            // 将本地流轨道添加到连接
+            localStream.getTracks().forEach(track => {
+                pc.addTrack(track, localStream);
+            });
+            
+            // 处理ICE候选者
+            pc.onicecandidate = (event) => {
+                if (event.candidate) {
+                    socket.emit('ice_candidate', {
+                        roomId: currentRoom.id,
+                        fromId: currentRoom.userId,
+                        targetId: peerId,
+                        candidate: event.candidate
+                    });
+                }
+            };
+            
+            // 处理连接状态变化
+            pc.onconnectionstatechange = () => {
+                console.log(`与 ${peerId} 的连接状态: ${pc.connectionState}`);
+            };
+            
+            // 处理ICE连接状态变化
+            pc.oniceconnectionstatechange = () => {
+                console.log(`与 ${peerId} 的ICE连接状态: ${pc.iceConnectionState}`);
+                if (pc.iceConnectionState === 'failed' || pc.iceConnectionState === 'disconnected') {
+                    // 如果连接失败，则重启ICE
+                    pc.restartIce();
+                }
+            };
+            
+            // 处理远程轨道
+            pc.ontrack = (event) => {
+                console.log('收到远程轨道:', event);
+                const stream = event.streams[0];
+                
+                // 检查是否已存在此对等方的视频元素
+                const existingContainer = document.getElementById(`peer-${peerId}-container`);
+                
+                if (!existingContainer) {
+                    // 创建新的视频容器
+                    const videoContainer = document.createElement('div');
+                    videoContainer.className = 'video-container';
+                    videoContainer.id = `peer-${peerId}-container`;
+                    
+                    const video = document.createElement('video');
+                    video.srcObject = stream;
+                    video.id = `peer-${peerId}-video`;
+                    video.autoplay = true;
+                    video.playsInline = true;
+                    
+                    const userName = document.createElement('div');
+                    userName.className = 'user-name';
+                    userName.textContent = peerName || '参与者';
+                    
+                    const micStatus = document.createElement('div');
+                    micStatus.className = 'mic-status';
+                    micStatus.innerHTML = '<i class="fas fa-microphone"></i>';
+                    micStatus.id = `peer-${peerId}-mic`;
+                    
+                    videoContainer.appendChild(video);
+                    videoContainer.appendChild(userName);
+                    videoContainer.appendChild(micStatus);
+                    
+                    videoGrid.appendChild(videoContainer);
+                    
+                    // 如果尚未添加，则添加到参与者列表
+                    addParticipantToList(peerId, peerName || '参与者');
+                } else {
+                    // 更新现有视频元素
+                    const video = document.getElementById(`peer-${peerId}-video`);
+                    if (video.srcObject !== stream) {
+                        video.srcObject = stream;
+                    }
+                }
+            };
+            
+            // 创建数据通道（用于聊天）
+            if (isInitiator) {
+                const dataChannel = pc.createDataChannel(`chat-${peerId}`);
+                setupDataChannel(dataChannel, peerId);
+            } else {
+                pc.ondatachannel = (event) => {
+                    setupDataChannel(event.channel, peerId);
+                };
+            }
+            
+            // 如果我们是发起方，创建并发送offer
+            if (isInitiator) {
+                pc.createOffer()
+                    .then(offer => pc.setLocalDescription(offer))
+                    .then(() => {
+                        socket.emit('offer', {
+                            roomId: currentRoom.id,
+                            fromId: currentRoom.userId,
+                            targetId: peerId,
+                            offer: pc.localDescription
+                        });
+                    })
+                    .catch(error => {
+                        console.error('创建offer时出错:', error);
+                    });
+            }
+            
+            return pc;
+        }
+
+        // 设置数据通道
+        function setupDataChannel(channel, peerId) {
+            channel.onopen = () => {
+                console.log(`与 ${peerId} 的数据通道已打开`);
+                dataChannels[peerId] = channel;
+            };
+            
+            channel.onclose = () => {
+                console.log(`与 ${peerId} 的数据通道已关闭`);
+                delete dataChannels[peerId];
+            };
+            
+            channel.onmessage = (event) => {
+                try {
+                    const message = JSON.parse(event.data);
+                    displayMessage(peerId, message.sender, message.text);
+                } catch (error) {
+                    console.error('解析消息时出错:', error);
+                }
+            };
+        }
+
+        // 处理接收到的offer
+        function handleOffer(data) {
+            console.log('收到来自以下用户的offer:', data.fromId);
+            
+            const pc = peerConnections[data.fromId] || createPeerConnection(data.fromId, null, false);
+            
+            pc.setRemoteDescription(new RTCSessionDescription(data.offer))
+                .then(() => pc.createAnswer())
+                .then(answer => pc.setLocalDescription(answer))
+                .then(() => {
+                    socket.emit('answer', {
+                        roomId: currentRoom.id,
+                        fromId: currentRoom.userId,
+                        targetId: data.fromId,
+                        answer: pc.localDescription
+                    });
+                })
+                .catch(error => {
+                    console.error('处理offer时出错:', error);
+                });
+        }
+
+        // 处理接收到的answer
+        function handleAnswer(data) {
+            console.log('收到来自以下用户的answer:', data.fromId);
+            
+            const pc = peerConnections[data.fromId];
+            if (pc) {
+                pc.setRemoteDescription(new RTCSessionDescription(data.answer))
+                    .catch(error => {
+                        console.error('处理answer时出错:', error);
+                    });
+            }
+        }
+
+        // 处理接收到的ICE候选者
+        function handleIceCandidate(data) {
+            console.log('收到来自以下用户的ICE候选者:', data.fromId);
+            
+            const pc = peerConnections[data.fromId];
+            if (pc) {
+                pc.addIceCandidate(new RTCIceCandidate(data.candidate))
+                    .catch(error => {
+                        console.error('添加ICE候选者时出错:', error);
+                    });
+            }
+        }
+
+        // 处理接收到的聊天消息
+        function handleChatMessage(data) {
+            displayMessage(data.fromId, data.fromName, data.message);
+        }
+
+        // 处理媒体状态变化
+        function handleMediaStateChange(data) {
+            const micIcon = document.getElementById(`peer-${data.userId}-mic`);
+            if (micIcon) {
+                micIcon.innerHTML = data.audioEnabled ? 
+                    '<i class="fas fa-microphone"></i>' : 
+                    '<i class="fas fa-microphone-slash"></i>';
+            }
+            
+            const videoContainer = document.getElementById(`peer-${data.userId}-container`);
+            if (videoContainer) {
+                if (!data.videoEnabled) {
+                    videoContainer.classList.add('video-off');
+                } else {
+                    videoContainer.classList.remove('video-off');
+                }
+            }
+        }
+
+        // 将参与者添加到列表
+        function addParticipantToList(userId, displayName) {
+            if (document.getElementById(`participant-${userId}`)) {
+                return; // 已在列表中
+            }
+            
+            const participant = document.createElement('li');
+            participant.className = 'participant';
+            participant.id = `participant-${userId}`;
+            
+            const participantInfo = document.createElement('div');
+            participantInfo.className = 'participant-info';
+            participantInfo.textContent = displayName;
+            
+            participant.appendChild(participantInfo);
+            participantsList.appendChild(participant);
+        }
+
+        // 移除参与者
+        function removeParticipant(userId) {
+            // 移除对等连接
+            const pc = peerConnections[userId];
+            if (pc) {
+                pc.close();
+                delete peerConnections[userId];
+            }
+            
+            // 移除数据通道
+            delete dataChannels[userId];
+            
+            // 移除视频元素
+            const videoContainer = document.getElementById(`peer-${userId}-container`);
+            if (videoContainer) {
+                videoContainer.remove();
+            }
+            
+            // 从参与者列表中移除
+            const participant = document.getElementById(`participant-${userId}`);
+            if (participant) {
+                participant.remove();
+            }
+        }
+
+        // 切换音频
+        function toggleAudio() {
+            const audioTracks = localStream.getAudioTracks();
+            
+            if (audioTracks.length > 0) {
+                const track = audioTracks[0];
+                track.enabled = !track.enabled;
+                localAudioEnabled = track.enabled;
+                
+                toggleAudioBtn.innerHTML = localAudioEnabled ? 
+                    '<i class="fas fa-microphone"></i> 麦克风' : 
+                    '<i class="fas fa-microphone-slash"></i> 麦克风 (已关闭)';
+                
+                toggleAudioBtn.classList.toggle('disabled', !localAudioEnabled);
+                
+                // 更新麦克风状态在UI中
+                const micStatus = document.querySelector('#local-video-container .mic-status');
+                if (micStatus) {
+                    micStatus.innerHTML = localAudioEnabled ? 
+                        '<i class="fas fa-microphone"></i>' : 
+                        '<i class="fas fa-microphone-slash"></i>';
+                }
+                
+                // 通知其他参与者
+                if (socket && currentRoom) {
+                    socket.emit('media_state_change', {
+                        roomId: currentRoom.id,
+                        userId: currentRoom.userId,
+                        audioEnabled: localAudioEnabled,
+                        videoEnabled: localVideoEnabled
+                    });
+                }
+            }
+        }
+
+        // 切换视频
+        function toggleVideo() {
+            const videoTracks = localStream.getVideoTracks();
+            
+            if (videoTracks.length > 0) {
+                const track = videoTracks[0];
+                track.enabled = !track.enabled;
+                localVideoEnabled = track.enabled;
+                
+                toggleVideoBtn.innerHTML = localVideoEnabled ? 
+                    '<i class="fas fa-video"></i> 摄像头' : 
+                    '<i class="fas fa-video-slash"></i> 摄像头 (已关闭)';
+                
+                toggleVideoBtn.classList.toggle('disabled', !localVideoEnabled);
+                
+                // 更新视频容器样式
+                const localVideoContainer = document.getElementById('local-video-container');
+                if (localVideoContainer) {
+                    if (!localVideoEnabled) {
+                        localVideoContainer.classList.add('video-off');
+                    } else {
+                        localVideoContainer.classList.remove('video-off');
+                    }
+                }
+                
+                // 通知其他参与者
+                if (socket && currentRoom) {
+                    socket.emit('media_state_change', {
+                        roomId: currentRoom.id,
+                        userId: currentRoom.userId,
+                        audioEnabled: localAudioEnabled,
+                        videoEnabled: localVideoEnabled
+                    });
+                }
+            }
+        }
+
+        // 切换屏幕共享
+       async function toggleScreen() {
+           if (!screenStream) {
+               try {
+                   screenStream = await navigator.mediaDevices.getDisplayMedia({
+                       video: true
+                   });
+                   
+                   // 在所有对等连接中替换视频轨道
+                   const videoTrack = screenStream.getVideoTracks()[0];
+                   
+                   Object.values(peerConnections).forEach(pc => {
+                       const senders = pc.getSenders();
+                       const sender = senders.find(s => s.track && s.track.kind === 'video');
+                       if (sender) {
+                           sender.replaceTrack(videoTrack);
+                       }
+                   });
+                   
+                   // 更新本地视频
+                   const localVideo = document.querySelector('#local-video-container video');
+                   if (localVideo) {
+                       localVideo.srcObject = screenStream;
+                   }
+                   
+                   toggleScreenBtn.innerHTML = '<i class="fas fa-desktop"></i> 停止共享';
+                   toggleScreenBtn.classList.add('red');
+                   
+                   // 处理屏幕共享结束
+                   videoTrack.onended = () => {
+                       stopScreenSharing();
+                   };
+               } catch (error) {
+                   console.error('无法共享屏幕', error);
+                   alert('无法共享屏幕，请确保您已授予权限。');
+               }
+           } else {
+               stopScreenSharing();
+           }
+       }
+
+       // 停止屏幕共享
+       function stopScreenSharing() {
+           if (screenStream) {
+               screenStream.getTracks().forEach(track => track.stop());
+               screenStream = null;
+               
+               // 恢复摄像头视频
+               const videoTrack = localStream.getVideoTracks()[0];
+               if (videoTrack) {
+                   Object.values(peerConnections).forEach(pc => {
+                       const senders = pc.getSenders();
+                       const sender = senders.find(s => s.track && s.track.kind === 'video');
+                       if (sender) {
+                           sender.replaceTrack(videoTrack);
+                       }
+                   });
+                   
+                   // 更新本地视频
+                   const localVideo = document.querySelector('#local-video-container video');
+                   if (localVideo) {
+                       localVideo.srcObject = localStream;
+                   }
+               }
+               
+               toggleScreenBtn.innerHTML = '<i class="fas fa-desktop"></i> 屏幕共享';
+               toggleScreenBtn.classList.remove('red');
+           }
+       }
+
+       // 离开会议
+       function leaveCall() {
+           if (socket && currentRoom) {
+               socket.emit('leave', {
+                   roomId: currentRoom.id,
+                   userId: currentRoom.userId
+               });
+           }
+           
+           // 关闭所有对等连接
+           Object.values(peerConnections).forEach(pc => pc.close());
+           peerConnections = {};
+           
+           // 关闭本地媒体流
+           if (localStream) {
+               localStream.getTracks().forEach(track => track.stop());
+               localStream = null;
+           }
+           
+           // 关闭屏幕共享流
+           if (screenStream) {
+               screenStream.getTracks().forEach(track => track.stop());
+               screenStream = null;
+           }
+           
+           // 清空视频网格
+           videoGrid.innerHTML = '';
+           
+           // 清空参与者列表
+           participantsList.innerHTML = '';
+           
+           // 清空聊天消息
+           messages.innerHTML = '';
+           
+           // 重置当前房间
+           currentRoom = null;
+           
+           // 切换回登录界面
+           meetingContainer.classList.add('hidden');
+           joinForm.classList.remove('hidden');
+           
+           // 重置按钮状态
+           toggleAudioBtn.innerHTML = '<i class="fas fa-microphone"></i> 麦克风';
+           toggleAudioBtn.classList.remove('disabled');
+           
+           toggleVideoBtn.innerHTML = '<i class="fas fa-video"></i> 摄像头';
+           toggleVideoBtn.classList.remove('disabled');
+           
+           toggleScreenBtn.innerHTML = '<i class="fas fa-desktop"></i> 屏幕共享';
+           toggleScreenBtn.classList.remove('red');
+       }
+
+       // 发送聊天消息
+       function sendMessage() {
+           const messageText = messageInput.value.trim();
+           
+           if (messageText && currentRoom) {
+               const message = {
+                   text: messageText,
+                   sender: currentRoom.displayName
+               };
+               
+               // 显示自己的消息
+               displayMessage(currentRoom.userId, currentRoom.displayName, messageText);
+               
+               // 发送消息到服务器
+               socket.emit('chat_message', {
+                   roomId: currentRoom.id,
+                   fromId: currentRoom.userId,
+                   message: messageText
+               });
+               
+               // 清空输入框
+               messageInput.value = '';
+           }
+       }
+
+       // 显示聊天消息
+       function displayMessage(senderId, senderName, text) {
+           const isMe = senderId === currentRoom?.userId;
+           
+           const messageElement = document.createElement('div');
+           messageElement.className = `message ${isMe ? 'sent' : 'received'}`;
+           
+           const senderElement = document.createElement('div');
+           senderElement.className = 'sender';
+           senderElement.textContent = isMe ? '你' : senderName;
+           
+           const textElement = document.createElement('div');
+           textElement.textContent = text;
+           
+           messageElement.appendChild(senderElement);
+           messageElement.appendChild(textElement);
+           
+           messages.appendChild(messageElement);
+           messages.scrollTop = messages.scrollHeight;
+       }
+
+       // 复制会议 ID
+       function copyRoomId() {
+           const roomId = currentRoomIdSpan.textContent;
+           navigator.clipboard.writeText(roomId)
+               .then(() => {
+                   alert('会议 ID 已复制到剪贴板');
+               })
+               .catch(err => {
+                   console.error('无法复制会议 ID', err);
+                   alert('无法复制会议 ID，请手动选择并复制');
+               });
+       }
+
+       // 切换标签页
+       function switchTab(tabName) {
+           tabs.forEach(tab => {
+               tab.classList.toggle('active', tab.dataset.tab === tabName);
+           });
+           
+           tabContents.forEach(content => {
+               content.classList.toggle('hidden', content.id !== `${tabName}Tab`);
+           });
+       }
+
+       // 事件监听
+       createMeetingBtn.addEventListener('click', createMeeting);
+       joinMeetingBtn.addEventListener('click', joinMeeting);
+       toggleAudioBtn.addEventListener('click', toggleAudio);
+       toggleVideoBtn.addEventListener('click', toggleVideo);
+       toggleScreenBtn.addEventListener('click', toggleScreen);
+       leaveCallBtn.addEventListener('click', leaveCall);
+       copyRoomIdBtn.addEventListener('click', copyRoomId);
+       
+       tabs.forEach(tab => {
+           tab.addEventListener('click', () => {
+               switchTab(tab.dataset.tab);
+           });
+       });
+       
+       sendMessageBtn.addEventListener('click', sendMessage);
+       
+       messageInput.addEventListener('keypress', (event) => {
+           if (event.key === 'Enter') {
+               sendMessage();
+           }
+       });
+       
+       // 确保在页面卸载前清理资源
+       window.addEventListener('beforeunload', () => {
+           if (currentRoom) {
+               leaveCall();
+           }
+       });
+   </script>
+   
+   <!-- Font Awesome 图标 -->
+   <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/js/all.min.js"></script>
+</body>
+</html>