src/page/test/publishMute/index.html

<!doctype html>
{{> license}}
<html>
  <head>
    {{> meta title='WebRTC Publish Mute Test'}}
    {{> header-scripts}}
    {{> header-stylesheets}}
    <style>
      .control-container {
        display: flex;
        flex-direction: row;
        background-color: #dbdbdb;
        padding: 20px;
        justify-content: center;
      }
      .control-container > button:nth-child(even) {
        margin-left: 20px;
      }
      .hidden-post {
        display: none;
      }
      @media (max-width:510px) {
        .control-container {
          flex-direction: column;
        }
        .control-container > button:nth-child(even) {
          margin-left: 0px;
          margin-top: 20px;
        }
      }
    </style>
  </head>
  <body>
    {{> top-bar }}
    <div id="app">
      {{> settings-link}}
      {{> test-info testTitle='Publish Mute Test (WebRTC)'}}
      <div class="stream-section">
        {{> status-field-publisher}}
        {{> statistics-field packets_field='Packets Sent'}}
        <div class="centered">
          <video id="red5pro-publisher" class="red5pro-publisher"
                 controls autoplay playsinline muted>
          </video>
        </div>
        <div class="centered">
          <!-- Moving Mute over to client side, which will POST mute to server and shut off sending packets. -->
          <p class="control-container hidden-post">
            <button id="mute-audio-button" class="ui-button">Mute Audio (Server)</button>
            <button id="mute-video-button" class="ui-button">Mute Video (Server)</button>
          </p>
          <p class="control-container">
            <button id="mute-audio2-button" class="ui-button">Mute Audio (Client)</button>
            <button id="mute-video2-button" class="ui-button">Mute Video (Client)</button>
          </p>
        </div>
      </div>
    </div>
    {{> footer}}
    {{> body-scripts}}
    <script src="index.js"></script>
  </body>
</html>