webrtcapi.html 24.5 KB

Raw Blame History Permalink

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <title>WebRTC 数字人</title>
    <style>
    body {
        margin: 0;
        padding: 0;
        font-family: Arial, sans-serif;
        display: flex;
        height: 100vh;
    }

    /* 侧边栏样式 */
    #sidebar {
        width: 300px;
        background-color: #f8f9fa;
        padding: 20px;
        box-shadow: 0 0 15px rgba(0,0,0,0.1);
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        gap: 15px;
        transition: all 0.4s ease;
        position: relative;
        border-radius: 0 10px 10px 0;
        z-index: 50;
    }

    /* 收缩状态的侧边栏 */
    #sidebar.collapsed {
        width: 0;
        padding: 0;
        margin-left: -15px;
        opacity: 0.95;
    }

    /* 收缩状态下隐藏内容 */
    #sidebar.collapsed > div {
        display: none;
    }

    /* 切换按钮样式 */
    #sidebar-toggle {
        position: fixed;
        top: 50%;
        transform: translateY(-50%);
        /* left is managed by JavaScript */
        width: 48px;
        height: 48px;
        background-color: #4285f4; /* Original color */
        color: white;
        border: none; /* Original border */
        border-radius: 50%;
        display: flex !important; /* Ensure it's displayed as flex */
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 1002 !important; /* Higher than media's 1000, and ensure it applies */
        font-size: 20px;
        box-shadow: 0 3px 8px rgba(0,0,0,0.2);
        transition: left 0.3s ease, background-color 0.3s ease, transform 0.3s ease;
        opacity: 1 !important; /* Ensure opacity */
        visibility: visible !important; /* Ensure visibility */
    }

    /* 主内容区域样式 */
    #main-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-color: #f0f0f0;
        overflow: visible; /* 修改为visible以防止内容被裁剪 */
        transition: all 0.4s ease;
        position: relative;
        padding: 10px;
        box-sizing: border-box;
        min-height: 100vh; /* 确保至少有足够的高度 */
    }


    /* 按钮样式 */
    button {
        padding: 8px 16px;
        margin: 5px 0;
        cursor: pointer;
        border: none;
        border-radius: 4px;
        background-color: #4285f4;
        color: white;
        font-weight: bold;
    }

    button:hover {
        background-color: #3367d6;
    }

    button:disabled {
        background-color: #cccccc;
        cursor: not-allowed;
    }

    /* 表单样式 */
    .form-group {
        margin-bottom: 15px;
        width: 100%;
    }

    .form-control {
        width: 100%;
        padding: 8px;
        border: 1px solid #ddd;
        border-radius: 4px;
        box-sizing: border-box;
    }

    /* 媒体区域样式 */
    #media {
        width: 100%;
        max-width: 1080px;
        height: 100%;
        max-height: 90vh; /* 限制最大高度为视口高度的90% */
        position: relative;
        overflow: hidden;
        background-color: #000;
        margin: 0 auto; /* 居中显示 */
        box-sizing: border-box; /* 确保padding不会增加宽度 */
        aspect-ratio: 9/16; /* 设置宽高比为9:16（竖屏） */
        display: block !important; /* 确保始终显示 */
        z-index: 20; /* 提高z-index确保可见 */
    }

    #media h2 {
        position: absolute;
        top: 10px;
        left: 10px;
        color: white;
        margin: 0;
        z-index: 10;
        background-color: rgba(0,0,0,0.5);
        padding: 5px 10px;
        border-radius: 4px;
    }

    video {
        width: 100%;
        height: 100%;
        object-fit: contain; /* 保持视频比例 */
        position: absolute;
        top: 0;
        left: 0;
        max-width: 100%; /* 确保不超出容器 */
        max-height: 100%; /* 确保不超出容器 */
    }

    /* 确保侧边栏收缩时视频元素本身也可见 */
    #sidebar.collapsed ~ #main-content #video,
    #sidebar.collapsed + #main-content #video {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    /* NEW: Fullscreen media when sidebar is collapsed */
    #sidebar.collapsed ~ #main-content #media {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        max-width: none;
        max-height: none;
        aspect-ratio: unset;
        z-index: 1000; /* Ensure it's above other elements like the toggle button */
        margin: 0; /* Reset margin */
        padding: 0; /* Reset padding */
        border-radius: 0; /* Remove any border-radius */
    }

    /* Optional: Adjust main content padding when sidebar is collapsed */
    #sidebar.collapsed ~ #main-content {
       padding: 0; /* Remove padding as #media takes full screen */
       background-color: #000; /* Match media background */
    }


    .option {
        display: flex;
        align-items: center;
        margin-bottom: 8px;
    }

    .section-title {
        font-weight: bold;
        margin-bottom: 12px;
        border-bottom: 1px solid #e0e0e0;
        padding-bottom: 8px;
        color: #4285f4;
        font-size: 16px;
        letter-spacing: 0.5px;
    }

    /* 美化表单控件 */
    .form-control:focus {
        outline: none;
        border-color: #4285f4;
        box-shadow: 0 0 0 2px rgba(66, 133, 244, 0.2);
    }

    /* 侧边栏内部元素样式优化 */
    #sidebar > div {
        background-color: white;
        padding: 15px;
        border-radius: 8px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }
    </style>
</head>
<body>

<!-- 侧边栏切换按钮 (Moved to be a direct child of body) -->
<button id="sidebar-toggle">≪</button>

<!-- 侧边栏 -->
<div id="sidebar">
    <div>
        <div class="section-title">连接控制</div>
        <div class="option">
            <input id="use-stun" type="checkbox"/>
            <label for="use-stun">使用 STUN 服务器</label>
        </div>
        <button id="start" onclick="start()">开始连接</button>
        <button id="stop" style="display: none" onclick="stop()">停止连接</button>
    </div>

    <div>
        <div class="section-title">录制控制</div>
        <button class="btn btn-primary" id="btn_start_record">开始录制</button>
        <button class="btn btn-primary" id="btn_stop_record" disabled>停止录制</button>
    </div>

    <div>
        <div class="section-title">文本输入</div>
        <input type="hidden" id="sessionid" value="0">
        <form class="form-inline" id="echo-form">
            <div class="form-group">
                <label for="message">输入文本</label>
                <textarea rows="3" class="form-control" id="message">test</textarea>
            </div>
            <button type="submit" class="btn btn-default">发送</button>
        </form>
    </div>

    <div>
        <div class="section-title">服务器配置</div>
        <div class="form-group">
            <label for="ws-host">WebSocket 主机</label>
            <input type="text" class="form-control" id="ws-host" placeholder="默认使用当前主机名">
        </div>
        <div class="form-group">
            <label for="ws-port">WebSocket 端口</label>
            <input type="text" class="form-control" id="ws-port" placeholder="默认: 10002">
        </div>
        <button id="save-ws-config" class="btn btn-default">保存配置</button>
        <button id="reset-ws-config" class="btn btn-default">重置配置</button>
    </div>
</div>

<!-- 主内容区域 -->
<div id="main-content">
    <input type="hidden" id="username" value="User">
    <div id="media">
        <h2>艺云展陈</h2>
        <audio id="audio" autoplay="true"></audio>
        <video id="video" autoplay="true" playsinline="true"></video>
    </div>
</div>

<script src="client.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/sockjs-client@1.5.1/dist/sockjs.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" charset="utf-8">

        $(document).ready(function() {
            var expandedSidebarLeft = '300px'; // Corresponds to #sidebar CSS width
            var collapsedSidebarLeft = '10px'; // Test: offset from edge

            // Function to update toggle button based on sidebar state
            function updateToggleButtonState() {
                var sidebarIsCollapsed = $('#sidebar').hasClass('collapsed');
                console.log('[Sidebar Toggle] Sidebar collapsed state:', sidebarIsCollapsed);
                var toggleButton = $('#sidebar-toggle');
                if (sidebarIsCollapsed) {
                    // Restore intended behavior: set left, icon, and original background color
                    // Relies on base CSS for top: 50% and transform: translateY(-50%)
                    toggleButton.html('≫').css({
                        'left': collapsedSidebarLeft, // This is '10px'
                        'background-color': '#4285f4', // Original color
                        'top': '50%', // Ensure it matches base CSS
                        'transform': 'translateY(-50%)' // Ensure it matches base CSS
                    });
                    console.log('[Sidebar Toggle] Action: Set to collapsed state. Left:', collapsedSidebarLeft, 'HTML:', toggleButton.html());
                } else {
                    // Restore intended behavior: set left, icon, and original background color
                    toggleButton.html('≪').css({
                        'left': expandedSidebarLeft,
                        'background-color': '#4285f4', // Original color
                        'top': '50%', // Ensure it matches base CSS
                        'transform': 'translateY(-50%)' // Ensure it matches base CSS
                    });
                    console.log('[Sidebar Toggle] Action: Set to expanded state. Left:', expandedSidebarLeft, 'HTML:', toggleButton.html());
                }
                // Log applied styles to be sure
                console.log('[Sidebar Toggle] Applied style attribute:', toggleButton.attr('style'));
                console.log('[Sidebar Toggle] Computed z-index:', toggleButton.css('z-index'));
                console.log('[Sidebar Toggle] Computed opacity:', toggleButton.css('opacity'));
                console.log('[Sidebar Toggle] Computed visibility:', toggleButton.css('visibility'));
                console.log('[Sidebar Toggle] Computed display:', toggleButton.css('display'));
                console.log('[Sidebar Toggle] Offset:', toggleButton.offset());
                console.log('[Sidebar Toggle] Position:', toggleButton.position());
            }

            // Initial state setup for the toggle button
            updateToggleButtonState();

            // Load saved WebSocket configuration or set defaults
            function loadWsConfig() {
                var savedWsHost = localStorage.getItem('wsHost');
                var savedWsPort = localStorage.getItem('wsPort');

                if (savedWsHost) {
                    $('#ws-host').val(savedWsHost);
                } else {
                    $('#ws-host').val('127.0.0.1'); // Default host
                }

                if (savedWsPort) {
                    $('#ws-port').val(savedWsPort);
                } else {
                    $('#ws-port').val('10002'); // Default port
                }
            }
            loadWsConfig(); // Load config on document ready

            // 侧边栏切换功能
            $('#sidebar-toggle').click(function() {
                $('#sidebar').toggleClass('collapsed');
                updateToggleButtonState();
            });

            // Note: The original '#expand-sidebar'.click handler was part of the replaced block.
            // If an element with id #expand-sidebar exists and needs to control the sidebar,
            // its click handler should be re-implemented similar to this:
            // $('#expand-sidebar').click(function() {
            //     if ($('#sidebar').hasClass('collapsed')) {
            //         $('#sidebar').removeClass('collapsed');
            //         updateToggleButtonState();
            //     }
            // });

            // Server configuration save and reset
            $('#save-ws-config').click(function() {
                var wsHost = $('#ws-host').val().trim();
                var wsPort = $('#ws-port').val().trim();

                if (!wsHost) {
                    alert('WebSocket 主机不能为空。');
                    $('#ws-host').focus();
                    return;
                }
                if (!wsPort) {
                    alert('WebSocket 端口不能为空。');
                    $('#ws-port').focus();
                    return;
                }

                localStorage.setItem('wsHost', wsHost);
                localStorage.setItem('wsPort', wsPort);

                var originalText = $(this).text();
                $(this).text('已保存!').prop('disabled', true);
                setTimeout(function() {
                    $('#save-ws-config').text(originalText).prop('disabled', false);
                }, 1500);

                console.log('WebSocket configuration saved: Host - ' + wsHost + ', Port - ' + wsPort);
                // alert('配置已保存！更改将在下次连接时生效或您可以手动重新连接。');
            });

            $('#reset-ws-config').click(function() {
                $('#ws-host').val('127.0.0.1');
                $('#ws-port').val('10002');
                // No need to explicitly remove, connectWebSocket will use defaults if inputs are changed to defaults
                // localStorage.removeItem('wsHost');
                // localStorage.removeItem('wsPort');

                var originalText = $(this).text();
                $(this).text('已重置!').prop('disabled', true);

                // Also update save button to reflect that new defaults need saving
                var saveButton = $('#save-ws-config');
                var saveButtonOriginalText = saveButton.text();
                if (saveButton.text() !== '已保存!') { // Only change if not in 'saved' state
                    saveButton.text('保存默认值');
                }

                setTimeout(function() {
                    $('#reset-ws-config').text(originalText).prop('disabled', false);
                    if (saveButton.text() === '保存默认值') {
                         saveButton.text(saveButtonOriginalText);
                    }
                }, 1500);
                console.log('WebSocket configuration reset to default values in fields.');
                // alert('配置已重置为默认值，请点击“保存配置”以应用。');
            });

      // Old WebSocket code commented out
      // var host = window.location.hostname
      // var ws = new WebSocket("ws://"+host+":8000/humanecho");
      // //document.getElementsByTagName("video")[0].setAttribute("src", aa["video"]);
      // ws.onopen = function() {
        // console.log('Connected');
      // };
      // ws.onmessage = function(e) {
        // console.log('Received: ' + e.data);
        // data = e
        // var vid = JSON.parse(data.data);
        // console.log(typeof(vid),vid)
        // //document.getElementsByTagName("video")[0].setAttribute("src", vid["video"]);

      // };
      // ws.onclose = function(e) {
        // console.log('Closed');
      // };

      $('#echo-form').on('submit', function(e) {
          e.preventDefault();
          var message = $('#message').val();
          console.log('Sending: ' + message);
          console.log('sessionid: ', document.getElementById('sessionid').value);
          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('');
      });

      $('#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);
              } 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);
              } else {
                  console.error('Failed to stop recording.');
              }
          }).catch(function(error) {
              console.error('Error:', error);
          });
      });

      // WebSocket connection to Fay digital avatar (port 10002)
      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');
        // console.log("当前存有的username:"+storedUsername);
        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;
          // 获取WebSocket服务器地址，优先使用配置值，否则使用当前主机名
          var wsHost = localStorage.getItem('wsHost') || host;
          var wsPort = localStorage.getItem('wsPort') || '10002';
          var wsProtocol = window.location.protocol === 'https:' ? 'wss://' : 'ws://';
          var wsUrl = wsProtocol + wsHost + ':' + wsPort;
          console.log('Connecting to WebSocket server:', wsUrl);
          ws = new WebSocket(wsUrl);
          ws.onopen = function() {
              console.log('Connected to WebSocket on port 10002');
              reconnectAttempts = 0; // 重置重连次数
              reconnectInterval = 5000; // 重置重连间隔
              // 在连接成功后发送 {"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原始消息(webrtcapi.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 + '秒)');

          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未连接，尝试重连...');
                  // 重置重连计数和间隔，立即尝试重连
                  reconnectAttempts = 0;
                  reconnectInterval = 5000;
                  connectWebSocket();
              }
          }
      });
    });
</script>
</body>
</html>