-
Notifications
You must be signed in to change notification settings - Fork 51
/
index.html
131 lines (131 loc) · 4.34 KB
/
index.html
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
<!doctype html>
{{> license}}
<html>
<head>
{{> meta title='Publish Stream Manager Transcode Proxy Test'}}
{{> header-scripts}}
{{> header-stylesheets}}
<style>
.quality-container {
text-align: center;
background-color: #dbdbdb;
color: #3b3b3b;
max-width: 1024px;
margin: 20px auto 0 auto;
padding: 20px;
line-height: 1.5em;
}
.quality-link {
text-decoration: underline;
}
.quality-subheader {
padding: 20px;
}
.quality-hr {
max-width: 480px;
margin: 20px auto;
}
.stream-section {
max-width: 1024px;
}
.settings-area {
background-color: #dbdbdb;
}
.settings-field {
display: flex;
align-items: center;
flex-direction: row;
}
.settings-field, .settings-field > input {
font-size: 1em;
}
.settings-field > input {
width: 40%;
padding-left: 10px;
}
.info-title {
padding: 20px 0;
}
.paddedHR {
margin: 0!important;
}
.form-container {
padding: 20px 0 0 0;
text-align: center;
}
.transcoder-form-container {
display: flex;
flex-direction: row;
justify-content: space-evenly;
padding: 20px 0;
}
@media (max-width:767px) {
.transcoder-form-container {
flex-direction: column;
}
}
@media (max-width: 510px) {
.settings-field {
flex-direction: column;
}
.settings-field.settings-collapsable > input {
width: 100%;
}
}
</style>
</head>
<body>
{{> top-bar }}
<div id="app">
{{> settings-link}}
<div class="ice-background">
<div class="test-notification">
<p>In order to properly run the Stream Manager examples, you will need to configure your environment with the autoscaling infrastructure as described in the following documentation:</p>
<p><a href="https://www.red5.net/docs/troubleshooting/auto-best-practices-and-troubleshooting/best-practices-overview/#gatsby-focus-wrapper" target="_blank">https://www.red5.net/docs/troubleshooting/auto-best-practices-and-troubleshooting/best-practices-overview/#gatsby-focus-wrapper</a></p>
<br>
<p>Additionally to use this example stream manager proxy gateway should be enabled.</p>
<br>
<p>All resolutions should have the same aspect ratio, otherwise your stream will be skewed.</p>
</div>
</div>
{{> test-info testTitle='Publish SM ABR Provision Form'}}
<div class="stream-section">
<div class="settings-area">
<div class="form-container">
<p>Use this form to post your ABR Provisions:</p>
<div class="transcoder-form-container">
{{> transcoder-form id="transcoder-high" category="High" width="1280" height="720" bitrate="2000000"}}
{{> transcoder-form id="transcoder-mid" category="Mid" width="640" height="360" bitrate="1000000"}}
{{> transcoder-form id="transcoder-low" category="Low" width="320" height="180" bitrate="500000"}}
</div>
<p style="margin-bottom: 1rem!important;">
<button id="submit-button" class="ui-button">Submit</button>
</p>
<hr class="paddedHR">
{{> status-field-publisher}}
</div>
</div>
<div id="quality-container" class="hidden quality-container">
<p class="quality-subheader">Transcoder Manifest submitted successfully!<p>
<p>
<span>Now you can visit</span>
<span><a id="provision-link" target="_blank" class="quality-link">URL HERE</a></span>
<span>to view your Provision.</span>
<hr class="quality-hr" />
<div id="stream-listing">
<p class="quality-subheader">
Start the following streams with your Media Encoder:
</p>
</div>
<hr class="quality-hr" />
<div>
<p>Then visit the accompanying <a href="../subscribeStreamManagerProxyTranscoder" class="quality-link">Subscriber</a>!</p>
</div>
</div>
</div>
{{> footer}}
{{> body-scripts}}
{{> sm-scripts}}
<script src="index.js"></script>
</body>
</html>