webrtcapi.html 17.2 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;
        overflow: hidden;
    }

    /* 侧边栏样式 */
    #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%;
        left: -24px;
        transform: translateY(-50%);
        width: 48px;
        height: 48px;
        background-color: #4285f4;
        color: white;
        border: none;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 100;
        font-size: 20px;
        box-shadow: 0 3px 8px rgba(0,0,0,0.2);
        transition: all 0.3s ease;
    }

    #sidebar-toggle {
        left: 0;
    }

    /* 收缩状态下的切换按钮位置调整 */
    #sidebar.collapsed #sidebar-toggle {
        left: 0;
        background-color: #4285f4;
    }

    /* 主内容区域样式 */
    #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>

<!-- 侧边栏 -->
<div id="sidebar">
    <button id="sidebar-toggle">≪</button>
    <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 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() {
            // 侧边栏切换功能
            $('#sidebar-toggle').click(function() {
                $('#sidebar').toggleClass('collapsed');

                // 切换按钮图标
                if ($('#sidebar').hasClass('collapsed')) {
                    $(this).html('≫');
                } else {
                    $(this).html('≪');
                }
            });

            // 展开侧边栏按钮功能
            $('#expand-sidebar').click(function() {
                $('#sidebar').removeClass('collapsed');
                $('#sidebar-toggle').html('≪');
            });
      // 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;
          ws = new WebSocket("ws://127.0.0.1:10002");
          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>