webrtcapi.html 13 KB

Raw Blame History Permalink

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <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;
    }

    .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">
    <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="http://cdn.sockjs.org/sockjs-0.3.4.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">
        var ws;
        var reconnectInterval = 5000;
        var maxReconnectAttempts = 10;
        var reconnectAttempts = 0;
        $(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;
      var maxReconnectAttempts = 10;
      var reconnectAttempts = 0;

      function connectWebSocket() {
        var host = window.location.hostname;
            ws = new WebSocket("ws://" + host + ":10002");

            ws.onopen = function() {
                console.log('Connected to WebSocket on port 10002');
                reconnectAttempts = 0;

                var loginMessage = JSON.stringify({ "Username": "User" });
                ws.send(loginMessage);
                loginMessage = JSON.stringify({ "Output": "1" });
                ws.send(loginMessage);
            };

            ws.onmessage = function(e) {
                var messageData = JSON.parse(e.data);

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

            };

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

            ws.onerror = function(e) {
                console.error('WebSocket error:', e);
                ws.close();
            };
      }

      function attemptReconnect() {
            if (reconnectAttempts < maxReconnectAttempts) {
                reconnectAttempts++;
                console.log('Attempting to reconnect... (Attempt ' + reconnectAttempts + ')');
                setTimeout(function() {
                    connectWebSocket();
                }, reconnectInterval);
            } else {
                console.error('Maximum reconnection attempts reached. Could not reconnect to WebSocket.');
            }
      }

      // Initialize WebSocket connection when document is ready
      connectWebSocket();
    });
</script>
</body>
</html>