Statistics
| Branch: | Revision:

janus-gateway / html / vp9svctest.html @ 242e4f31

History | View | Annotate | Download (11.2 KB)

1
<!DOCTYPE html>
2
<html xmlns="http://www.w3.org/1999/xhtml">
3
<head>
4
<meta charset="utf-8">
5
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
6
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
7
<title>Janus WebRTC Gateway: VP9-SVC Video Room Demo</title>
8
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/webrtc-adapter/3.4.3/adapter.min.js" ></script>
9
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js" ></script>
10
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.blockUI/2.70/jquery.blockUI.min.js" ></script>
11
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.2/js/bootstrap.min.js"></script>
12
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.1.0/bootbox.min.js"></script>
13
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/spin.js/2.3.2/spin.min.js"></script>
14
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.3/toastr.min.js"></script>
15
<script type="text/javascript" src="janus.js" ></script>
16
<script type="text/javascript" src="vp9svctest.js"></script>
17
<script>
18
        $(function() {
19
                $(".navbar-static-top").load("navbar.html", function() {
20
                        $(".navbar-static-top li.dropdown").addClass("active");
21
                        $(".navbar-static-top a[href='vp9svctest.html']").parent().addClass("active");
22
                });
23
                $(".footer").load("footer.html");
24
        });
25
</script>
26
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.7/cerulean/bootstrap.min.css" type="text/css"/>
27
<link rel="stylesheet" href="css/demo.css" type="text/css"/>
28
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.2/css/font-awesome.min.css"/>
29
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.3/toastr.css"/>
30
</head>
31
<body>
32

    
33
<a href="https://github.com/meetecho/janus-gateway"><img style="position: absolute; top: 0; left: 0; border: 0; z-index: 1001;" src="https://s3.amazonaws.com/github/ribbons/forkme_left_darkblue_121621.png" alt="Fork me on GitHub"></a>
34

    
35
<nav class="navbar navbar-default navbar-static-top">
36
</nav>
37

    
38
<div class="container">
39
        <div class="row">
40
                <div class="col-md-12">
41
                        <div class="page-header">
42
                                <h1>Plugin Demo: VP9-SVC Video Room
43
                                        <button class="btn btn-default" autocomplete="off" id="start">Start</button>
44
                                </h1>
45
                        </div>
46
                        <div class="container" id="details">
47
                                <div class="row">
48
                                        <div class="col-md-12">
49
                                                <h3>Demo details</h3>
50
                                                <p>This is basically a clone of the plain <a href="videoroomtest.hmtl">Video Room</a>
51
                                                demo, but with a key difference: it forces VP9 on all publishers, and supports
52
                                                the VP9 SVC layer selection (if you don't know what this means, check this
53
                                                <a target="_blank" href="https://webrtchacks.com/chrome-vp9-svc/">excellent blog post</a>).
54
                                                As such, it will allow viewers to select which layer, spatial or temporal, to receive
55
                                                from the publishers, in order to receive more or less data according to what they
56
                                                can/want to get.</p>
57
                                                <p>Notice that this only works if the publishers joining the room will use a recent
58
                                                Chrome version that has been started with the following flag:</p>
59
                                                <p><div class="alert alert-info"><code>--force-fieldtrials=WebRTC-SupportVP9SVC/EnabledByFlag_2SL3TL/</code></div></p>
60
                                                <p>If you join with a Chrome that doesn't have that option set, or with
61
                                                another browser, you'll be able to select a layer, but all request to set
62
                                                a custom layer on your video will fail, meaning you'll act as a plain VP9 client.
63
                                                If you ask for a layer from a publisher that doesn't support VP9 SVC either,
64
                                                then your request will be ignored as well.</p>
65
                                                <p>In case some publishers do support the VP9 SVC features, selecting a different
66
                                                layer from them should result in variations of the video quality, and a notable
67
                                                difference in the bandwidth used to receive their video as well.</p>
68
                                                <p>Press the <code>Start</code> button above to launch the demo.</p>
69
                                        </div>
70
                                </div>
71
                        </div>
72
                        <div class="container hide" id="videojoin">
73
                                <div class="row">
74
                                        <span class="label label-info" id="you"></span>
75
                                        <div class="col-md-12" id="controls">
76
                                                <div class="input-group margin-bottom-md hide" id="registernow">
77
                                                        <span class="input-group-addon">@</span>
78
                                                        <input autocomplete="off" class="form-control" autocomplete="off" type="text" placeholder="Choose a display name" id="username" onkeypress="return checkEnter(this, event);"></input>
79
                                                        <span class="input-group-btn">
80
                                                                <button class="btn btn-success" autocomplete="off" id="register">Join the room</button>
81
                                                        </span>
82
                                                </div>
83
                                        </div>
84
                                </div>
85
                        </div>
86
                        <div class="container hide" id="videos">
87
                                <div class="row">
88
                                        <div class="col-md-4">
89
                                                <div class="panel panel-default">
90
                                                        <div class="panel-heading">
91
                                                                <h3 class="panel-title">Local Video <span class="label label-primary hide" id="publisher"></span></h3>
92
                                                        </div>
93
                                                        <div class="panel-body" id="videolocal"></div>
94
                                                </div>
95
                                        </div>
96
                                        <div class="col-md-4">
97
                                                <div class="panel panel-default">
98
                                                        <div class="panel-heading">
99
                                                                <h3 class="panel-title">Remote Video #1
100
                                                                        <span class="label label-info hide" id="remote1"></span>
101
                                                                        <div id="layers1" class="btn-group-vertical btn-group-vertical-xs pull-right hide">
102
                                                                                <div class"row">
103
                                                                                        <div class="btn-group btn-group-xs" style="width: 100%">
104
                                                                                                <button id="sl1-1" type="button" class="btn btn-primary" style="width: 50%">SL 1</button>
105
                                                                                                <button id="sl1-0" type="button" class="btn btn-primary" style="width: 50%">SL 0</button>
106
                                                                                        </div>
107
                                                                                </div>
108
                                                                                <div class"row">
109
                                                                                        <div class="btn-group btn-group-xs" style="width: 100%">
110
                                                                                                <button id="tl1-2" type="button" class="btn btn-primary" style="width: 34%">TL 2</button>
111
                                                                                                <button id="tl1-1" type="button" class="btn btn-primary" style="width: 33%">TL 1</button>
112
                                                                                                <button id="tl1-0" type="button" class="btn btn-primary" style="width: 33%">TL 0</button>
113
                                                                                        </div>
114
                                                                                </div>
115
                                                                        </div>
116
                                                                </h3>
117
                                                        </div>
118
                                                        <div class="panel-body relative" id="videoremote1"></div>
119
                                                </div>
120
                                        </div>
121
                                        <div class="col-md-4">
122
                                                <div class="panel panel-default">
123
                                                        <div class="panel-heading">
124
                                                                <h3 class="panel-title">Remote Video #2
125
                                                                        <span class="label label-info hide" id="remote2"></span>
126
                                                                        <div id="layers2" class="btn-group-vertical btn-group-vertical-xs pull-right hide">
127
                                                                                <div class"row">
128
                                                                                        <div class="btn-group btn-group-xs" style="width: 100%">
129
                                                                                                <button id="sl2-1" type="button" class="btn btn-primary" style="width: 50%">SL 1</button>
130
                                                                                                <button id="sl2-0" type="button" class="btn btn-primary" style="width: 50%">SL 0</button>
131
                                                                                        </div>
132
                                                                                </div>
133
                                                                                <div class"row">
134
                                                                                        <div class="btn-group btn-group-xs" style="width: 100%">
135
                                                                                                <button id="tl2-2" type="button" class="btn btn-primary" style="width: 34%">TL 2</button>
136
                                                                                                <button id="tl2-1" type="button" class="btn btn-primary" style="width: 33%">TL 1</button>
137
                                                                                                <button id="tl2-0" type="button" class="btn btn-primary" style="width: 33%">TL 0</button>
138
                                                                                        </div>
139
                                                                                </div>
140
                                                                        </div>
141
                                                                </h3>
142
                                                        </div>
143
                                                        <div class="panel-body relative" id="videoremote2"></div>
144
                                                </div>
145
                                        </div>
146
                                </div>
147
                                <div class="row">
148
                                        <div class="col-md-4">
149
                                                <div class="panel panel-default">
150
                                                        <div class="panel-heading">
151
                                                                <h3 class="panel-title">Remote Video #3
152
                                                                        <span class="label label-info hide" id="remote3"></span>
153
                                                                        <div id="layers3" class="btn-group-vertical btn-group-vertical-xs pull-right hide">
154
                                                                                <div class"row">
155
                                                                                        <div class="btn-group btn-group-xs" style="width: 100%">
156
                                                                                                <button id="sl3-1" type="button" class="btn btn-primary" style="width: 50%">SL 1</button>
157
                                                                                                <button id="sl3-0" type="button" class="btn btn-primary" style="width: 50%">SL 0</button>
158
                                                                                        </div>
159
                                                                                </div>
160
                                                                                <div class"row">
161
                                                                                        <div class="btn-group btn-group-xs" style="width: 100%">
162
                                                                                                <button id="tl3-2" type="button" class="btn btn-primary" style="width: 34%">TL 2</button>
163
                                                                                                <button id="tl3-1" type="button" class="btn btn-primary" style="width: 33%">TL 1</button>
164
                                                                                                <button id="tl3-0" type="button" class="btn btn-primary" style="width: 33%">TL 0</button>
165
                                                                                        </div>
166
                                                                                </div>
167
                                                                        </div>
168
                                                                </h3>
169
                                                        </div>
170
                                                        <div class="panel-body relative" id="videoremote3"></div>
171
                                                </div>
172
                                        </div>
173
                                        <div class="col-md-4">
174
                                                <div class="panel panel-default">
175
                                                        <div class="panel-heading">
176
                                                                <h3 class="panel-title">Remote Video #4
177
                                                                        <span class="label label-info hide" id="remote4"></span>
178
                                                                        <div id="layers4" class="btn-group-vertical btn-group-vertical-xs pull-right hide">
179
                                                                                <div class"row">
180
                                                                                        <div class="btn-group btn-group-xs" style="width: 100%">
181
                                                                                                <button id="sl4-1" type="button" class="btn btn-primary" style="width: 50%">SL 1</button>
182
                                                                                                <button id="sl4-0" type="button" class="btn btn-primary" style="width: 50%">SL 0</button>
183
                                                                                        </div>
184
                                                                                </div>
185
                                                                                <div class"row">
186
                                                                                        <div class="btn-group btn-group-xs" style="width: 100%">
187
                                                                                                <button id="tl4-2" type="button" class="btn btn-primary" style="width: 34%">TL 2</button>
188
                                                                                                <button id="tl4-1" type="button" class="btn btn-primary" style="width: 33%">TL 1</button>
189
                                                                                                <button id="tl4-0" type="button" class="btn btn-primary" style="width: 33%">TL 0</button>
190
                                                                                        </div>
191
                                                                                </div>
192
                                                                        </div>
193
                                                                </h3>
194
                                                        </div>
195
                                                        <div class="panel-body relative" id="videoremote4"></div>
196
                                                </div>
197
                                        </div>
198
                                        <div class="col-md-4">
199
                                                <div class="panel panel-default">
200
                                                        <div class="panel-heading">
201
                                                                <h3 class="panel-title">Remote Video #5
202
                                                                        <span class="label label-info hide" id="remote5"></span>
203
                                                                        <div id="layers5" class="btn-group-vertical btn-group-vertical-xs pull-right hide">
204
                                                                                <div class"row">
205
                                                                                        <div class="btn-group btn-group-xs" style="width: 100%">
206
                                                                                                <button id="sl5-1" type="button" class="btn btn-primary" style="width: 50%">SL 1</button>
207
                                                                                                <button id="sl5-0" type="button" class="btn btn-primary" style="width: 50%">SL 0</button>
208
                                                                                        </div>
209
                                                                                </div>
210
                                                                                <div class"row">
211
                                                                                        <div class="btn-group btn-group-xs" style="width: 100%">
212
                                                                                                <button id="tl5-2" type="button" class="btn btn-primary" style="width: 34%">TL 2</button>
213
                                                                                                <button id="tl5-1" type="button" class="btn btn-primary" style="width: 33%">TL 1</button>
214
                                                                                                <button id="tl5-0" type="button" class="btn btn-primary" style="width: 33%">TL 0</button>
215
                                                                                        </div>
216
                                                                                </div>
217
                                                                        </div>
218
                                                                </h3>
219
                                                        </div>
220
                                                        <div class="panel-body relative" id="videoremote5"></div>
221
                                                </div>
222
                                        </div>
223
                                </div>
224
                        </div>
225
                </div>
226
        </div>
227

    
228
        <hr>
229
        <div class="footer">
230
        </div>
231
</div>
232

    
233
</body>
234
</html>