Spaces:

mistpe
/

meet

Running

File size: 34,342 Bytes
<!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;
        }
        
        /* 屏幕共享布局 */
        .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>
        // 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');
        
        // 状态变量
        let currentRoom = null;
        let localStream = null;
        let screenStream = null;
        let peerConnections = {};
        let dataChannels = {};
        let localAudioEnabled = true;
        let localVideoEnabled = true;
        
        // 模拟服务器功能 (实际应用中应该使用真实的信令服务器)
        const mockServer = {
            connections: {},
            
            connect(roomId, userId) {
                if (!this.connections[roomId]) {
                    this.connections[roomId] = {};
                }
                this.connections[roomId][userId] = {
                    onOffer: null,
                    onAnswer: null,
                    onIceCandidate: null,
                    sendOffer: (targetId, offer) => {
                        const target = this.connections[roomId][targetId];
                        if (target && target.onOffer) {
                            setTimeout(() => {
                                target.onOffer(userId, offer);
                            }, 100);
                        }
                    },
                    sendAnswer: (targetId, answer) => {
                        const target = this.connections[roomId][targetId];
                        if (target && target.onAnswer) {
                            setTimeout(() => {
                                target.onAnswer(userId, answer);
                            }, 100);
                        }
                    },
                    sendIceCandidate: (targetId, candidate) => {
                        const target = this.connections[roomId][targetId];
                        if (target && target.onIceCandidate) {
                            setTimeout(() => {
                                target.onIceCandidate(userId, candidate);
                            }, 100);
                        }
                    },
                    sendMessage: (targetId, message) => {
                        const target = this.connections[roomId][targetId];
                        if (target && target.onMessage) {
                            setTimeout(() => {
                                target.onMessage(userId, message);
                            }, 100);
                        }
                    },
                    onMessage: null
                };
                
                return {
                    userId,
                    peers: Object.keys(this.connections[roomId]).filter(id => id !== userId)
                };
            },
            
            disconnect(roomId, userId) {
                if (this.connections[roomId]) {
                    delete this.connections[roomId][userId];
                    if (Object.keys(this.connections[roomId]).length === 0) {
                        delete this.connections[roomId];
                    }
                }
            }
        };
        
        // 生成随机 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 + ' (你)';
                
                videoContainer.appendChild(video);
                videoContainer.appendChild(userName);
                
                videoGrid.appendChild(videoContainer);
                
                return true;
            } catch (error) {
                console.error('无法获取媒体流', error);
                alert('无法访问摄像头或麦克风，请确保它们已连接并授予访问权限。');
                return false;
            }
        }
        
        // 加入会议
        async function joinMeeting() {
            const displayName = displayNameInput.value.trim();
            let roomId = roomIdInput.value.trim();
            
            if (!displayName) {
                alert('请输入您的姓名');
                return;
            }
            
            if (!roomId) {
                alert('请输入会议 ID');
                return;
            }
            
            // 初始化本地媒体流
            const success = await initLocalStream();
            if (!success) return;
            
            // 连接到"服务器"
            const userId = generateId();
            const { peers } = mockServer.connect(roomId, userId);
            
            currentRoom = {
                id: roomId,
                userId,
                displayName
            };
            
            // 显示会议 ID
            currentRoomIdSpan.textContent = roomId;
            
            // 为每个已存在的对等端创建连接
            for (const peerId of peers) {
                createPeerConnection(peerId);
            }
            
            // 设置信令回调
            const connection = mockServer.connections[roomId][userId];
            
            connection.onOffer = async (peerId, offer) => {
                const pc = peerConnections[peerId] || createPeerConnection(peerId);
                
                try {
                    await pc.setRemoteDescription(new RTCSessionDescription(offer));
                    
                    const answer = await pc.createAnswer();
                    await pc.setLocalDescription(answer);
                    
                    connection.sendAnswer(peerId, answer);
                } catch (error) {
                    console.error('处理提议时出错', error);
                }
            };
            
            connection.onAnswer = async (peerId, answer) => {
                const pc = peerConnections[peerId];
                if (pc) {
                    try {
                        await pc.setRemoteDescription(new RTCSessionDescription(answer));
                    } catch (error) {
                        console.error('处理应答时出错', error);
                    }
                }
            };
            
            connection.onIceCandidate = (peerId, candidate) => {
                const pc = peerConnections[peerId];
                if (pc) {
                    try {
                        pc.addIceCandidate(new RTCIceCandidate(candidate));
                    } catch (error) {
                        console.error('添加 ICE 候选时出错', error);
                    }
                }
            };
            
            connection.onMessage = (peerId, message) => {
                displayMessage(peerId, message);
            };
            
            // 切换到会议界面
            joinForm.classList.add('hidden');
            meetingContainer.classList.remove('hidden');
        }
        
        // 创建 WebRTC 对等连接
        function createPeerConnection(peerId) {
            const pc = new RTCPeerConnection({
                iceServers: [
                    { urls: 'stun:stun.l.google.com:19302' },
                    { urls: 'stun:stun1.l.google.com:19302' }
                ]
            });
            
            peerConnections[peerId] = pc;
            
            // 添加本地流到连接
            localStream.getTracks().forEach(track => {
                pc.addTrack(track, localStream);
            });
            
            // 创建数据通道
            const dataChannel = pc.createDataChannel(`chat-${peerId}`);
            
            dataChannel.onopen = () => {
                console.log(`与 ${peerId} 的数据通道已打开`);
                dataChannels[peerId] = dataChannel;
            };
            
            dataChannel.onclose = () => {
                console.log(`与 ${peerId} 的数据通道已关闭`);
                delete dataChannels[peerId];
            };
            
            // 处理 ICE 候选
            pc.onicecandidate = (event) => {
                if (event.candidate) {
                    const connection = mockServer.connections[currentRoom.id][currentRoom.userId];
                    connection.sendIceCandidate(peerId, event.candidate);
                }
            };
            
            // 处理远程流
            pc.ontrack = (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.autoplay = true;
                    video.playsInline = true;
                    
                    const userName = document.createElement('div');
                    userName.className = 'user-name';
                    userName.textContent = '参会者'; // 实际应用中应该从信令服务器获取名称
                    
                    videoContainer.appendChild(video);
                    videoContainer.appendChild(userName);
                    
                    videoGrid.appendChild(videoContainer);
                    
                    // 添加到参会者列表
                    const participant = document.createElement('li');
                    participant.className = 'participant';
                    participant.id = `participant-${peerId}`;
                    
                    const participantInfo = document.createElement('div');
                    participantInfo.className = 'participant-info';
                    participantInfo.textContent = '参会者';
                    
                    participant.appendChild(participantInfo);
                    participantsList.appendChild(participant);
                } else {
                    // 更新现有视频元素
                    const video = existingContainer.querySelector('video');
                    if (video.srcObject !== stream) {
                        video.srcObject = stream;
                    }
                }
            };
            
            // 处理数据通道的接收
            pc.ondatachannel = (event) => {
                const receiveChannel = event.channel;
                
                receiveChannel.onmessage = (messageEvent) => {
                    displayMessage(peerId, JSON.parse(messageEvent.data));
                };
                
                receiveChannel.onopen = () => {
                    console.log(`接收到来自 ${peerId} 的数据通道`);
                    dataChannels[peerId] = receiveChannel;
                };
                
                receiveChannel.onclose = () => {
                    console.log(`来自 ${peerId} 的数据通道已关闭`);
                    delete dataChannels[peerId];
                };
            };
            
            // 创建并发送提议
            pc.createOffer()
                .then(offer => pc.setLocalDescription(offer))
                .then(() => {
                    const connection = mockServer.connections[currentRoom.id][currentRoom.userId];
                    connection.sendOffer(peerId, pc.localDescription);
                })
                .catch(error => {
                    console.error('创建提议时出错', error);
                });
            
            return pc;
        }
        
        // 切换麦克风
        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);
            }
        }
        
        // 切换摄像头
        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) {
                    localVideoContainer.style.backgroundColor = localVideoEnabled ? '#222' : '#444';
                }
            }
        }
        
        // 切换屏幕共享
        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() {
            // 关闭所有对等连接
            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;
            }
            
            // 从"服务器"断开连接
            if (currentRoom) {
                mockServer.disconnect(currentRoom.id, currentRoom.userId);
                currentRoom = null;
            }
            
            // 清空视频网格
            videoGrid.innerHTML = '';
            
            // 清空参会者列表
            participantsList.innerHTML = '';
            
            // 清空聊天消息
            messages.innerHTML = '';
            
            // 切换回登录界面
            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,
                    timestamp: new Date().toISOString()
                };
                
                // 显示自己的消息
                displayMessage(currentRoom.userId, message);
                
                // 发送消息给所有对等端
                Object.keys(dataChannels).forEach(peerId => {
                    const channel = dataChannels[peerId];
                    if (channel.readyState === 'open') {
                        channel.send(JSON.stringify(message));
                    }
                });
                
                // 清空输入框
                messageInput.value = '';
            }
        }
        
        // 显示聊天消息
        function displayMessage(senderId, message) {
            const messageElement = document.createElement('div');
            messageElement.className = `message ${senderId === currentRoom?.userId ? 'sent' : 'received'}`;
            
            const senderElement = document.createElement('div');
            senderElement.className = 'sender';
            senderElement.textContent = message.sender;
            
            const textElement = document.createElement('div');
            textElement.textContent = message.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', () => {
            roomIdInput.value = generateId();
            joinMeeting();
        });
        
        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();
            }
        });
        
        // 阻止表单提交刷新页面
        document.addEventListener('submit', (event) => {
            event.preventDefault();
        });
    </script>
    
    <!-- Font Awesome 图标 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/js/all.min.js"></script>
</body>
</html>