src/page/sm-test/publishStreamManagerProxyValidation/index.html

<!doctype html>
{{> license}}
<html>
  <head>
    {{> meta title='Publish Stream Manager Proxy Validation Test'}}
    {{> header-scripts}}
    {{> header-stylesheets}}
    <style>
      .validation-container {
        padding-top: 20px;
        background-color: #eee;
        text-align: center;
      }
      .validation-form {
        padding-bottom: 20px;
      }
      .param-field {
        margin: 20px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        position: relative;
        flex-direction: column;
      }
      .param-field:nth-child(n+2) {
        border-top: 1px solid #999;
        padding-top: 20px;
      }
      .param-setting {
        margin: 5px;
      }
      .param-setting > input {
        height: 1.5rem;
        font-size: 1rem;
        padding-left: 10px;
        margin-left: 10px;
      }
      .validation-subheader {
        max-width: 400px;
        margin: 0 auto 20px auto;
        text-align: center;
        line-height: 1.5em;
      }
      .add-param-btn {
        font-size: 1rem;
        background-color: #3580A2;
        color: #fff;
        position: absolute;
        right: 20px;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    {{> top-bar }}
    {{> navigation isTestPage=true }}
    <div id="app">
      {{> settings-link}}
      {{> sm-proxy-notification}}
      {{> test-info testTitle='Publish Stream Manager Proxy Validation Test'}}
      <div class="stream-section">
        <div id="validation-container" class="validation-container">
          <h2>Validation Parameters</h2>
          <p class="validation-subheader">Provide validation parameters to be used in the Stream Manager request and Origin connection requests.</p>
          <form id="validation-form" class="validation-form" action="#" method="post">
            <div id="param-field1" class="param-field">
              <p class="param-setting">
                <label for="param-name1">Param Name:</label>
                <input type="text" id="param-name1" name="param_name1">
              </p>
              <p class="param-setting">
                <label for="param-value1">Param Value:</label>
                <input type="text" id="param-value1" name="param_value1">
              </p>
              <button id="add-param-btn" class="add-param-btn" type="button">+</button>
            </div>
          </form>
          <button id="validation-submit-btn" class="ui-button">Start Publishing</button>
        </div>
        {{> status-field-publisher}}
        {{> statistics-field packets_field='Packets Sent'}}
        <div class="centered">
          <p id="address-field" class="address-field">Origin Address: N/A</p>
        </div>
        <div class="centered">
          <video id="red5pro-publisher" class="red5pro-publisher"
               controls autoplay playsinline muted>
          </video>
        </div>
      </div>
    </div>
    {{> body-scripts}}
    <script src="../../lib/red5pro-ext/red5pro-ext-stream-manager.min.js"></script>
    <script src="index.js"></script>
  </body>
</html>