dashboard.html 36.8 KB

Raw Blame History Permalink

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>livetalking数字人交互平台</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <style>
        :root {
            --primary-color: #4361ee;
            --secondary-color: #3f37c9;
            --accent-color: #4895ef;
            --background-color: #f8f9fa;
            --card-bg: #ffffff;
            --text-color: #212529;
            --border-radius: 10px;
            --box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: var(--background-color);
            color: var(--text-color);
            min-height: 100vh;
            padding-top: 20px;
        }

        .dashboard-container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 20px;
        }

        .card {
            background-color: var(--card-bg);
            border-radius: var(--border-radius);
            box-shadow: var(--box-shadow);
            border: none;
            margin-bottom: 20px;
            overflow: hidden;
        }

        .card-header {
            background-color: var(--primary-color);
            color: white;
            font-weight: 600;
            padding: 15px 20px;
            border-bottom: none;
        }

        .video-container {
            position: relative;
            width: 100%;
            background-color: #000;
            border-radius: var(--border-radius);
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        video {
            max-width: 100%;
            max-height: 100%;
            display: block;
            border-radius: var(--border-radius);
        }

        .controls-container {
            padding: 20px;
        }

        .btn-primary {
            background-color: var(--primary-color);
            border-color: var(--primary-color);
        }

        .btn-primary:hover {
            background-color: var(--secondary-color);
            border-color: var(--secondary-color);
        }

        .btn-outline-primary {
            color: var(--primary-color);
            border-color: var(--primary-color);
        }

        .btn-outline-primary:hover {
            background-color: var(--primary-color);
            color: white;
        }

        .form-control {
            border-radius: var(--border-radius);
            padding: 10px 15px;
            border: 1px solid #ced4da;
        }

        .form-control:focus {
            border-color: var(--accent-color);
            box-shadow: 0 0 0 0.25rem rgba(67, 97, 238, 0.25);
        }

        .status-indicator {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            display: inline-block;
            margin-right: 5px;
        }

        .status-connected {
            background-color: #28a745;
        }

        .status-disconnected {
            background-color: #dc3545;
        }

        .status-connecting {
            background-color: #ffc107;
        }

        .asr-container {
            height: 300px;
            overflow-y: auto;
            padding: 15px;
            background-color: #f8f9fa;
            border-radius: var(--border-radius);
            border: 1px solid #ced4da;
        }

        .asr-text {
            margin-bottom: 10px;
            padding: 10px;
            background-color: white;
            border-radius: var(--border-radius);
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }

        .user-message {
            background-color: #e3f2fd;
            border-left: 4px solid var(--primary-color);
        }

        .system-message {
            background-color: #f1f8e9;
            border-left: 4px solid #8bc34a;
        }

        .recording-indicator {
            position: absolute;
            top: 15px;
            right: 15px;
            background-color: rgba(220, 53, 69, 0.8);
            color: white;
            padding: 5px 10px;
            border-radius: 20px;
            font-size: 0.8rem;
            display: none;
        }

        .recording-indicator.active {
            display: flex;
            align-items: center;
        }

        .recording-indicator .blink {
            width: 10px;
            height: 10px;
            background-color: #fff;
            border-radius: 50%;
            margin-right: 5px;
            animation: blink 1s infinite;
        }

        @keyframes blink {
            0% { opacity: 1; }
            50% { opacity: 0.3; }
            100% { opacity: 1; }
        }

        .mode-switch {
            margin-bottom: 20px;
        }

        .nav-tabs .nav-link {
            color: var(--text-color);
            border: none;
            padding: 10px 20px;
            border-radius: var(--border-radius) var(--border-radius) 0 0;
        }

        .nav-tabs .nav-link.active {
            color: var(--primary-color);
            background-color: var(--card-bg);
            border-bottom: 3px solid var(--primary-color);
            font-weight: 600;
        }

        .tab-content {
            padding: 20px;
            background-color: var(--card-bg);
            border-radius: 0 0 var(--border-radius) var(--border-radius);
        }

        .settings-panel {
            padding: 15px;
            background-color: #f8f9fa;
            border-radius: var(--border-radius);
            margin-top: 15px;
        }

        .footer {
            text-align: center;
            margin-top: 30px;
            padding: 20px 0;
            color: #6c757d;
            font-size: 0.9rem;
        }

        .voice-record-btn {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background-color: var(--primary-color);
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            transition: all 0.2s ease;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
            margin: 0 auto;
        }

        .voice-record-btn:hover {
            background-color: var(--secondary-color);
            transform: scale(1.05);
        }

        .voice-record-btn:active {
            background-color: #dc3545;
            transform: scale(0.95);
        }

        .voice-record-btn i {
            font-size: 24px;
        }

        .voice-record-label {
            text-align: center;
            margin-top: 10px;
            font-size: 14px;
            color: #6c757d;
        }

        .video-size-control {
            margin-top: 15px;
        }

        .recording-pulse {
            animation: pulse 1.5s infinite;
        }

        @keyframes pulse {
            0% {
                box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7);
            }
            70% {
                box-shadow: 0 0 0 15px rgba(220, 53, 69, 0);
            }
            100% {
                box-shadow: 0 0 0 0 rgba(220, 53, 69, 0);
            }
        }
    </style>
</head>
<body>
    <div class="dashboard-container">
        <div class="row">
            <div class="col-12">
                <h1 class="text-center mb-4">livetalking数字人交互平台</h1>
            </div>
        </div>
        <input type="hidden" id="username" value="User">

        <div class="row">
            <!-- 视频区域 -->
            <div class="col-lg-8">
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <div>
                            <span class="status-indicator status-disconnected" id="connection-status"></span>
                            <span id="status-text">未连接</span>
                        </div>
                    </div>
                    <div class="card-body p-0">
                        <div class="video-container">
                            <video id="video" autoplay playsinline></video>
                            <div class="recording-indicator" id="recording-indicator">
                                <div class="blink"></div>
                                <span>录制中</span>
                            </div>
                        </div>

                        <div class="controls-container">
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <button class="btn btn-primary w-100" id="start">
                                        <i class="bi bi-play-fill"></i> 开始连接
                                    </button>
                                    <button class="btn btn-danger w-100" id="stop" style="display: none;">
                                        <i class="bi bi-stop-fill"></i> 停止连接
                                    </button>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <div class="d-flex">
                                        <button class="btn btn-outline-primary flex-grow-1 me-2" id="btn_start_record">
                                            <i class="bi bi-record-fill"></i> 开始录制
                                        </button>
                                        <button class="btn btn-outline-danger flex-grow-1" id="btn_stop_record" disabled>
                                            <i class="bi bi-stop-fill"></i> 停止录制
                                        </button>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-12">
                                    <div class="video-size-control">
                                        <label for="video-size-slider" class="form-label">视频大小调节: <span id="video-size-value">100%</span></label>
                                        <input type="range" class="form-range" id="video-size-slider" min="50" max="150" value="100">
                                    </div>
                                </div>
                            </div>

                            <div class="settings-panel mt-3">
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="form-check form-switch mb-3">
                                            <input class="form-check-input" type="checkbox" id="use-stun">
                                            <label class="form-check-label" for="use-stun">使用STUN服务器</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 右侧交互 -->
            <div class="col-lg-4">
                <div class="card">
                    <div class="card-header">
                        <ul class="nav nav-tabs card-header-tabs" id="interaction-tabs" role="tablist">
                            <li class="nav-item" role="presentation">
                                <button class="nav-link active" id="chat-tab" data-bs-toggle="tab" data-bs-target="#chat" type="button" role="tab" aria-controls="chat" aria-selected="true">对话模式</button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="tts-tab" data-bs-toggle="tab" data-bs-target="#tts" type="button" role="tab" aria-controls="tts" aria-selected="false">朗读模式</button>
                            </li>
                        </ul>
                    </div>
                    <div class="card-body">
                        <div class="tab-content" id="interaction-tabs-content">
                            <!-- 对话模式 -->
                            <div class="tab-pane fade show active" id="chat" role="tabpanel" aria-labelledby="chat-tab">
                                <div class="asr-container mb-3" id="chat-messages">
                                    <div class="asr-text system-message">
                                        系统: 欢迎使用livetalking，请点击"开始连接"按钮开始对话。
                                    </div>
                                </div>

                                <form id="chat-form">
                                    <div class="input-group mb-3">
                                        <textarea class="form-control" id="chat-message" rows="3" placeholder="输入您想对数字人说的话..."></textarea>
                                        <button class="btn btn-primary" type="submit">
                                            <i class="bi bi-send"></i> 发送
                                        </button>
                                    </div>
                                </form>

                                <!-- 按住说话按钮 -->
                                <div class="voice-record-btn" id="voice-record-btn">
                                    <i class="bi bi-mic-fill"></i>
                                </div>
                                <div class="voice-record-label">按住说话，松开发送</div>
                            </div>

                            <!-- 朗读模式 -->
                            <div class="tab-pane fade" id="tts" role="tabpanel" aria-labelledby="tts-tab">
                                <form id="echo-form">
                                    <div class="mb-3">
                                        <label for="message" class="form-label">输入要朗读的文本</label>
                                        <textarea class="form-control" id="message" rows="6" placeholder="输入您想让数字人朗读的文字..."></textarea>
                                    </div>
                                    <button type="submit" class="btn btn-primary w-100">
                                        <i class="bi bi-volume-up"></i> 朗读文本
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="footer">
            <p>Made with ❤️ by Marstaos | Frontend & Performance Optimization</p>
        </div>
    </div>

    <!-- 隐藏的会话ID -->
    <input type="hidden" id="sessionid" value="0">


    <script src="client.js"></script>
    <script src="srs.sdk.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#video-size-slider').on('input', function() {
                const value = $(this).val();
                $('#video-size-value').text(value + '%');
                $('#video').css('width', value + '%');
            });
            function updateConnectionStatus(status) {
                const statusIndicator = $('#connection-status');
                const statusText = $('#status-text');

                statusIndicator.removeClass('status-connected status-disconnected status-connecting');

                switch(status) {
                    case 'connected':
                        statusIndicator.addClass('status-connected');
                        statusText.text('已连接');
                        break;
                    case 'connecting':
                        statusIndicator.addClass('status-connecting');
                        statusText.text('连接中...');
                        break;
                    case 'disconnected':
                    default:
                        statusIndicator.addClass('status-disconnected');
                        statusText.text('未连接');
                        break;
                }
            }

            var ws;
            var reconnectInterval = 5000; // 初始重连间隔为5秒
            var reconnectAttempts = 0;
            var maxReconnectInterval = 60000; // 最大重连间隔为60秒
            var isReconnecting = false; // 标记是否正在重连中

            function generateUsername() {
                var username = 'User';
                // + Math.floor(Math.random() * 10000)
                return username;
            }

            function setUsername() {
                var storedUsername = localStorage.getItem('username');
                if (!storedUsername) {
                    storedUsername = generateUsername();
                    localStorage.setItem('username', storedUsername);
                }
                $('#username').val(storedUsername); // Use the username as the session ID
            }

            setUsername();
            function connectWebSocket() {
                var host = window.location.hostname;
                ws = new WebSocket("ws://127.0.0.1:10002");
                ws.onopen = function() {
                    console.log('Connected to WebSocket on port 10002');
                    reconnectAttempts = 0; // 重置重连次数
                    reconnectInterval = 5000; // 重置重连间隔
                    updateConnectionStatus('connected');

                    // 在连接成功后发送 {"Username": "User"}
                    var loginMessage = JSON.stringify({ "Username": $('#username').val() });
                    ws.send(loginMessage);
                    loginMessage = JSON.stringify({ "Output": "1" });
                    ws.send(loginMessage);
                };


                function addMessage(text, type = "right") {
                    const chatOverlay = document.getElementById("chatOverlay");
                    const messageDiv = document.createElement("div");
                    messageDiv.classList.add("message", type);

                    const avatar = document.createElement("img");
                    avatar.classList.add("avatar");
                    avatar.src = type === "right" ? "images/avatar-right.png" : "images/avatar-left.png";

                    const textContainer = document.createElement("div");
                    textContainer.classList.add("text-container");

                    const textElement = document.createElement("div");
                    textElement.classList.add("text");
                    textElement.textContent = text;

                    const timeElement = document.createElement("div");
                    timeElement.classList.add("time");
                    timeElement.textContent = new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });

                    textContainer.appendChild(textElement);
                    textContainer.appendChild(timeElement);

                    messageDiv.appendChild(avatar);
                    messageDiv.appendChild(textContainer);

                    chatOverlay.appendChild(messageDiv);

                    // 自动滚动到底部
                    chatOverlay.scrollTop = chatOverlay.scrollHeight;
                }

                ws.onmessage = function(e) {
                    console.log('WebSocket原始消息(dashboard.html):', e.data);
                    var messageData = JSON.parse(e.data);

                    if (messageData.Data && messageData.Data.Key) {
                        if(messageData.Data.Key == "audio"){
                            var value = messageData.Data.HttpValue;
                            console.log('Value:', value);
                            fetch('/humanaudio', {
                                body: JSON.stringify({
                                    file_url: value,
                                    sessionid:parseInt(document.getElementById('sessionid').value),
                                }),
                                headers: {
                                    'Content-Type': 'application/json'
                                },
                                method: 'POST'
                            });
                        }else if (messageData.Data.Key == "text") {
                            var reply = messageData.Data.Value;
                            addMessage(reply, "left");
                        }
                    }

                };

                ws.onclose = function(e) {
                    console.log('WebSocket connection closed');
                    attemptReconnect();
                };

                ws.onerror = function(e) {
                    console.error('WebSocket error:', e);
                    ws.close(); // 关闭连接并尝试重连
                };
            }

            function attemptReconnect() {
                if (isReconnecting) return; // 防止多次重连

                isReconnecting = true;
                reconnectAttempts++;

                // 使用指数退避算法计算下一次重连间隔
                var currentInterval = Math.min(reconnectInterval * Math.pow(1.5, reconnectAttempts - 1), maxReconnectInterval);

                console.log('Attempting to reconnect... (Attempt ' + reconnectAttempts + ', 间隔: ' + currentInterval/1000 + '秒)');
                updateConnectionStatus('connecting');

                if(document.getElementById('is_open') && parseInt(document.getElementById('is_open').value) == 1){
                    stop()
                }

                setTimeout(function() {
                    isReconnecting = false;
                    connectWebSocket();
                }, currentInterval);
            }

            // 初始化 WebSocket 连接
            connectWebSocket();

            // 添加页面可见性变化监听，当页面从隐藏变为可见时尝试重连
            document.addEventListener('visibilitychange', function() {
                if (document.visibilityState === 'visible') {
                    // 页面变为可见状态，检查WebSocket连接
                    if (!ws || ws.readyState === WebSocket.CLOSED || ws.readyState === WebSocket.CLOSING) {
                        console.log('页面可见，检测到WebSocket未连接，尝试重连...');
                        updateConnectionStatus('connecting');
                        // 重置重连计数和间隔，立即尝试重连
                        reconnectAttempts = 0;
                        reconnectInterval = 5000;
                        connectWebSocket();
                    }
                }
            });

            // 添加聊天消息
            function addChatMessage(message, type = 'user') {
                const messagesContainer = $('#chat-messages');
                const messageClass = type === 'user' ? 'user-message' : 'system-message';
                const sender = type === 'user' ? '您' : '数字人';

                const messageElement = $(`
                    <div class="asr-text ${messageClass}">
                        ${sender}: ${message}
                    </div>
                `);

                messagesContainer.append(messageElement);
                messagesContainer.scrollTop(messagesContainer[0].scrollHeight);
            }

            // 开始/停止按钮
            $('#start').click(function() {
                updateConnectionStatus('connecting');
                start();
                $(this).hide();
                $('#stop').show();

                // 添加定时器检查视频流是否已加载
                let connectionCheckTimer = setInterval(function() {
                    const video = document.getElementById('video');
                    // 检查视频是否有数据
                    if (video.readyState >= 3 && video.videoWidth > 0) {
                        updateConnectionStatus('connected');
                        clearInterval(connectionCheckTimer);
                    }
                }, 2000); // 每2秒检查一次

                // 60秒后如果还是连接中状态，就停止检查
                setTimeout(function() {
                    if (connectionCheckTimer) {
                        clearInterval(connectionCheckTimer);
                    }
                }, 60000);
            });

            $('#stop').click(function() {
                stop();
                $(this).hide();
                $('#start').show();
                updateConnectionStatus('disconnected');
            });

            // 录制功能
            $('#btn_start_record').click(function() {
                console.log('Starting recording...');
                fetch('/record', {
                    body: JSON.stringify({
                        type: 'start_record',
                        sessionid: parseInt(document.getElementById('sessionid').value),
                    }),
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    method: 'POST'
                }).then(function(response) {
                    if (response.ok) {
                        console.log('Recording started.');
                        $('#btn_start_record').prop('disabled', true);
                        $('#btn_stop_record').prop('disabled', false);
                        $('#recording-indicator').addClass('active');
                    } else {
                        console.error('Failed to start recording.');
                    }
                }).catch(function(error) {
                    console.error('Error:', error);
                });
            });

            $('#btn_stop_record').click(function() {
                console.log('Stopping recording...');
                fetch('/record', {
                    body: JSON.stringify({
                        type: 'end_record',
                        sessionid: parseInt(document.getElementById('sessionid').value),
                    }),
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    method: 'POST'
                }).then(function(response) {
                    if (response.ok) {
                        console.log('Recording stopped.');
                        $('#btn_start_record').prop('disabled', false);
                        $('#btn_stop_record').prop('disabled', true);
                        $('#recording-indicator').removeClass('active');
                    } else {
                        console.error('Failed to stop recording.');
                    }
                }).catch(function(error) {
                    console.error('Error:', error);
                });
            });

            $('#echo-form').on('submit', function(e) {
                e.preventDefault();
                var message = $('#message').val();
                if (!message.trim()) return;

                console.log('Sending echo message:', message);

                fetch('/human', {
                    body: JSON.stringify({
                        text: message,
                        type: 'echo',
                        interrupt: true,
                        sessionid: parseInt(document.getElementById('sessionid').value),
                    }),
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    method: 'POST'
                });

                $('#message').val('');
                addChatMessage(`已发送朗读请求: "${message}"`, 'system');
            });

            // 聊天模式表单提交
            $('#chat-form').on('submit', function(e) {
                e.preventDefault();
                var message = $('#chat-message').val();
                if (!message.trim()) return;

                console.log('Sending chat message:', message);

                // fetch('/human', {
                //     body: JSON.stringify({
                //         text: message,
                //         type: 'chat',
                //         interrupt: true,
                //         sessionid: parseInt(document.getElementById('sessionid').value),
                //     }),
                //     headers: {
                //         'Content-Type': 'application/json'
                //     },
                //     method: 'POST'
                // });

                var payload = {
                    "model": "fay-streaming",
                    "messages": [
                        {
                            "role": $('#username').val(),
                            "content": message
                        }
                    ],
                    "observation": ""
                };

                fetch('http://127.0.0.1:5000/v1/chat/completions', {
                    body: JSON.stringify(payload),
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    method: 'POST'
                }).then(function(response) {
                    if (response.ok) {
                        console.log('Message sent to API.');
                    } else {
                        console.error('Failed to send message to API.');
                    }
                }).catch(function(error) {
                    console.error('Error:', error);
                });

                addChatMessage(message, 'user');
                $('#chat-message').val('');
            });

            // 按住说话功能
            let mediaRecorder;
            let audioChunks = [];
            let isRecording = false;
            let recognition;

            // 检查浏览器是否支持语音识别
            const isSpeechRecognitionSupported = 'webkitSpeechRecognition' in window || 'SpeechRecognition' in window;

            if (isSpeechRecognitionSupported) {
                recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
                recognition.continuous = true;
                recognition.interimResults = true;
                recognition.lang = 'zh-CN';

                recognition.onresult = function(event) {
                    let interimTranscript = '';
                    let finalTranscript = '';

                    for (let i = event.resultIndex; i < event.results.length; ++i) {
                        if (event.results[i].isFinal) {
                            finalTranscript += event.results[i][0].transcript;
                        } else {
                            interimTranscript += event.results[i][0].transcript;
                            $('#chat-message').val(interimTranscript);
                        }
                    }

                    if (finalTranscript) {
                        $('#chat-message').val(finalTranscript);
                    }
                };

                recognition.onerror = function(event) {
                    console.error('语音识别错误:', event.error);
                };
            }

            // 按住说话按钮事件
            $('#voice-record-btn').on('mousedown touchstart', function(e) {
                e.preventDefault();
                startRecording();
            }).on('mouseup mouseleave touchend', function() {
                if (isRecording) {
                    stopRecording();
                }
            });

            // 开始录音
            function startRecording() {
                if (isRecording) return;

                navigator.mediaDevices.getUserMedia({ audio: true })
                    .then(function(stream) {
                        audioChunks = [];
                        mediaRecorder = new MediaRecorder(stream);

                        mediaRecorder.ondataavailable = function(e) {
                            if (e.data.size > 0) {
                                audioChunks.push(e.data);
                            }
                        };

                        mediaRecorder.start();
                        isRecording = true;

                        $('#voice-record-btn').addClass('recording-pulse');
                        $('#voice-record-btn').css('background-color', '#dc3545');

                        if (recognition) {
                            recognition.start();
                        }
                    })
                    .catch(function(error) {
                        console.error('无法访问麦克风:', error);
                        alert('无法访问麦克风，请检查浏览器权限设置。');
                    });
            }

            function stopRecording() {
                if (!isRecording) return;

                mediaRecorder.stop();
                isRecording = false;

                // 停止所有音轨
                mediaRecorder.stream.getTracks().forEach(track => track.stop());

                // 视觉反馈恢复
                $('#voice-record-btn').removeClass('recording-pulse');
                $('#voice-record-btn').css('background-color', '');

                // 停止语音识别
                if (recognition) {
                    recognition.stop();
                }

                // 获取识别的文本并发送
                setTimeout(function() {
                    const recognizedText = $('#chat-message').val().trim();
                    if (recognizedText) {
                        // 发送识别的文本
                        fetch('/human', {
                            body: JSON.stringify({
                                text: recognizedText,
                                type: 'chat',
                                interrupt: true,
                                sessionid: parseInt(document.getElementById('sessionid').value),
                            }),
                            headers: {
                                'Content-Type': 'application/json'
                            },
                            method: 'POST'
                        });

                        addChatMessage(recognizedText, 'user');
                        $('#chat-message').val('');
                    }
                }, 500);
            }

            // WebRTC 相关功能
            if (typeof window.onWebRTCConnected === 'function') {
                const originalOnConnected = window.onWebRTCConnected;
                window.onWebRTCConnected = function() {
                    updateConnectionStatus('connected');
                    if (originalOnConnected) originalOnConnected();
                };
            } else {
                window.onWebRTCConnected = function() {
                    updateConnectionStatus('connected');
                };
            }

            // 当连接断开时更新状态
            if (typeof window.onWebRTCDisconnected === 'function') {
                const originalOnDisconnected = window.onWebRTCDisconnected;
                window.onWebRTCDisconnected = function() {
                    updateConnectionStatus('disconnected');
                    if (originalOnDisconnected) originalOnDisconnected();
                };
            } else {
                window.onWebRTCDisconnected = function() {
                    updateConnectionStatus('disconnected');
                };
            }

            // SRS WebRTC播放功能
            var sdk = null; // 全局处理器，用于在重新发布时进行清理

            function startPlay() {
                // 关闭之前的连接
                if (sdk) {
                    sdk.close();
                }

                sdk = new SrsRtcWhipWhepAsync();
                $('#video').prop('srcObject', sdk.stream);

                var host = window.location.hostname;
                var url = "http://" + host + ":1985/rtc/v1/whep/?app=live&stream=livestream";

                sdk.play(url).then(function(session) {
                    console.log('WebRTC播放已启动，会话ID:', session.sessionid);
                }).catch(function(reason) {
                    sdk.close();
                    console.error('WebRTC播放失败:', reason);
                });
            }
        });
    </script>
</body>
</html>