streaming-html5/src/examples/whip-mute-api/index.html at epic/OTTER · red5pro/streaming-html5 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
<!-- Copyright © 2015 Infrared5, Inc. All rights reserved.

The accompanying code comprising examples for use solely in conjunction with Red5 Pro (the "Example Code")
is  licensed  to  you  by  Infrared5  Inc.  in  consideration  of  your  agreement  to  the  following
license terms  and  conditions.  Access,  use,  modification,  or  redistribution  of  the  accompanying
code  constitutes your acceptance of the following license terms and conditions.

Permission is hereby granted, free of charge, to you to use the Example Code and associated documentation
files (collectively, the "Software") without restriction, including without limitation the rights to use,
copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit
persons to whom the Software is furnished to do so, subject to the following conditions:

The Software shall be used solely in conjunction with Red5 Pro. Red5 Pro is licensed under a separate end
user  license  agreement  (the  "EULA"),  which  must  be  executed  with  Infrared5,  Inc.
An  example  of  the EULA can be found on our website at: https://account.red5.net/assets/LICENSE.txt.

The above copyright notice and this license shall be included in all copies or portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,  INCLUDING  BUT
NOT  LIMITED  TO  THE  WARRANTIES  OF  MERCHANTABILITY, FITNESS  FOR  A  PARTICULAR  PURPOSE  AND
NONINFRINGEMENT.   IN  NO  EVENT  SHALL INFRARED5, INC. BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
WHETHER IN  AN  ACTION  OF  CONTRACT,  TORT  OR  OTHERWISE,  ARISING  FROM,  OUT  OF  OR  IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -->

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>WHIP Mute API — WebRTC Testbed</title>
    <link rel="stylesheet" href="/style/main.css" />
    <link rel="stylesheet" href="/style/pages/example.css" />
    <link rel="stylesheet" href="/style/pages/whip-mute-api.css" />
    <script src="/libs/red5pro/red5pro-sdk.min.js"></script>
  </head>
  <body>
    <r5-header></r5-header>

    <main class="page">
      <nav class="breadcrumb"><a href="/">WebRTC Testbed</a> &rsaquo; WHIP Mute API</nav>

      <h1 class="page__heading">WHIP Mute API</h1>
      <p class="page__description">
        WHIPClient publish with publish mode and settings. After publishing, mute or unmute the live
        audio and video tracks using the WHIPClient mute API. Configure host and stream name in
        Settings.
      </p>

      <div class="whip-mute-api-layout">
        <section class="media-panel">
          <div class="media-panel__header">
            <h2 class="section-title">Publisher</h2>
            <span class="status status--idle" id="publish-status">Publisher Idle</span>
          </div>

          <p class="connection-info" id="connection-info">Endpoint not configured</p>
          <r5-publisher-stats id="publisher-stats"></r5-publisher-stats>
          <div class="video-preview">
            <video id="publisher-video" autoplay playsinline muted controls></video>
            <div class="video-preview__overlay" id="video-preview-overlay" aria-hidden="true">
              <span
                class="video-preview__indicator video-preview__indicator--audio is-off is-hidden"
                id="video-audio-indicator"
                title="Microphone off"
              >
                <svg
                  class="video-preview__icon video-preview__icon--on"
                  viewBox="0 0 24 24"
                  aria-hidden="true"
                >
                  <path
                    fill="currentColor"
                    d="M12 14a3 3 0 0 0 3-3V6a3 3 0 1 0-6 0v5a3 3 0 0 0 3 3Zm5-3a5 5 0 0 1-10 0H5a7 7 0 0 0 6 6.92V21h2v-3.08A7 7 0 0 0 19 11h-2Z"
                  />
                </svg>
                <svg
                  class="video-preview__icon video-preview__icon--off"
                  viewBox="0 0 24 24"
                  aria-hidden="true"
                >
                  <path
                    fill="currentColor"
                    d="M12 14a3 3 0 0 0 3-3V6a3 3 0 1 0-6 0v5a3 3 0 0 0 3 3Zm5-3a5 5 0 0 1-10 0H5a7 7 0 0 0 6 6.92V21h2v-3.08A7 7 0 0 0 19 11h-2Z"
                  />
                  <path
                    stroke="currentColor"
                    stroke-width="2"
                    stroke-linecap="round"
                    d="M4 4l16 16"
                  />
                </svg>
              </span>
              <span
                class="video-preview__indicator video-preview__indicator--video is-off is-hidden"
                id="video-video-indicator"
                title="Camera off"
              >
                <svg
                  class="video-preview__icon video-preview__icon--on"
                  viewBox="0 0 24 24"
                  aria-hidden="true"
                >
                  <path
                    fill="currentColor"
                    d="M17 10.5V7a2 2 0 0 0-2-2H5A2 2 0 0 0 3 7v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-3.5l4 3v-9l-4 3Z"
                  />
                </svg>
                <svg
                  class="video-preview__icon video-preview__icon--off"
                  viewBox="0 0 24 24"
                  aria-hidden="true"
                >
                  <path
                    fill="currentColor"
                    d="M17 10.5V7a2 2 0 0 0-2-2H5A2 2 0 0 0 3 7v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-3.5l4 3v-9l-4 3Z"
                  />
                  <path
                    stroke="currentColor"
                    stroke-width="2"
                    stroke-linecap="round"
                    d="M4 4l16 16"
                  />
                </svg>
              </span>
            </div>
          </div>

          <div class="publish-config-section" id="publish-config-section">
            <r5-publish-mode id="publish-mode"></r5-publish-mode>
            <r5-publish-settings
              id="publish-settings"
              video-target="publisher-video"
            ></r5-publish-settings>
          </div>

          <section class="mute-controls-section is-hidden" id="mute-controls-section">
            <h3 class="mute-controls-section__title">Mute Controls</h3>
            <p class="mute-controls-section__description">
              Toggle audio and video transmission on the live publish session without stopping
              publish.
            </p>
            <div class="mute-controls-section__actions">
              <button
                type="button"
                class="btn btn--secondary mute-controls-section__btn"
                id="mute-audio-btn"
              >
                Mute Audio
              </button>
              <button
                type="button"
                class="btn btn--secondary mute-controls-section__btn"
                id="mute-video-btn"
              >
                Mute Video
              </button>
            </div>
          </section>

          <div class="controls-tray">
            <div class="controls-tray__actions">
              <button class="btn btn--primary" id="publish-btn">Start Publish</button>
              <button class="btn btn--danger" id="unpublish-btn" disabled>Stop Publish</button>
            </div>
            <r5-subscriber-link
              id="open-subscriber-link"
              href="../whep-mute-api/index.html"
              disabled
            ></r5-subscriber-link>
          </div>
        </section>
      </div>

      <div class="log-panel">
        <div class="log-panel__header">
          <h2 class="log-panel__title">Log</h2>
          <button type="button" class="btn btn--ghost log-panel__clear" id="log-clear-btn">
            Clear
          </button>
        </div>
        <div class="log" id="log"></div>
      </div>
    </main>

    <script type="module" src="./index.ts"></script>
  </body>
</html>