/usr/share/janus/demos/vp9svctest.html is in janus-demos 0.2.6-1build2.
This file is owned by root:root, with mode 0o644.
The actual contents of the file can be viewed below.
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 | <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Janus WebRTC Gateway: VP9-SVC Video Room Demo</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/webrtc-adapter/5.0.1/adapter.min.js" ></script>
<script type="text/javascript" src="javascript/jquery/jquery.min.js" ></script>
<script type="text/javascript" src="javascript/jquery-blockui/jquery.blockUI.js" ></script>
<script type="text/javascript" src="javascript/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.1.0/bootbox.min.js"></script>
<script type="text/javascript" src="javascript/spin.js/spin.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.3/toastr.min.js"></script>
<script type="text/javascript" src="janus.js" ></script>
<script type="text/javascript" src="vp9svctest.js"></script>
<script>
$(function() {
$(".navbar-static-top").load("navbar.html", function() {
$(".navbar-static-top li.dropdown").addClass("active");
$(".navbar-static-top a[href='vp9svctest.html']").parent().addClass("active");
});
$(".footer").load("footer.html");
});
</script>
<link rel="stylesheet" href="javascript/bootswatch/cerulean/bootstrap.min.css" type="text/css"/>
<link rel="stylesheet" href="css/demo.css" type="text/css"/>
<link rel="stylesheet" href="fonts/font-awesome/css/font-awesome.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.3/toastr.css"/>
</head>
<body>
<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>
<nav class="navbar navbar-default navbar-static-top">
</nav>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="page-header">
<h1>Plugin Demo: VP9-SVC Video Room
<button class="btn btn-default" autocomplete="off" id="start">Start</button>
</h1>
</div>
<div class="container" id="details">
<div class="row">
<div class="col-md-12">
<h3>Demo details</h3>
<p>This is basically a clone of the plain <a href="videoroomtest.hmtl">Video Room</a>
demo, but with a key difference: it forces VP9 on all publishers, and supports
the VP9 SVC layer selection (if you don't know what this means, check our
<a target="_blank" href="http://www.meetecho.com/blog/availability-of-chrome-interoperable-vp9-svc-in-janus-a-meetecho-cosmo-collaboration/">blog post</a>).
As such, it will allow viewers to select which layer, spatial or temporal, to receive
from the publishers, in order to receive more or less data according to what they
can/want to get. Notice that this is fundamentally different from the concept of
simulcasting, and so must not be confused with the VP8 simulcasting some of the
plugins (including the VideoRoom itself) support: with simulcasting, different
streams with a different resolution/bitrate are sent at the same time; with SVC,
you have a single stream with multiple layers, which makes it more efficient,
especially because it consumes much less bandwidth.</p>
<p>Notice that this only works if the publishers joining the room will use a recent
Chrome version that has been started with the following flag:</p>
<p><div class="alert alert-info"><code>--force-fieldtrials=WebRTC-SupportVP9SVC/EnabledByFlag_2SL3TL/</code></div></p>
<p>If you join with a Chrome that doesn't have that option set, or with
another browser, you'll be able to select a layer, but all request to set
a custom layer on your video will fail, meaning you'll act as a plain VP9 client.
If you ask for a layer from a publisher that doesn't support VP9 SVC either,
then your request will be ignored as well.</p>
<p>In case some publishers do support the VP9 SVC features, selecting a different
layer from them should result in variations of the video quality, and a notable
difference in the bandwidth used to receive their video as well.</p>
<p>Press the <code>Start</code> button above to launch the demo.</p>
</div>
</div>
</div>
<div class="container hide" id="videojoin">
<div class="row">
<span class="label label-info" id="you"></span>
<div class="col-md-12" id="controls">
<div class="input-group margin-bottom-md hide" id="registernow">
<span class="input-group-addon">@</span>
<input autocomplete="off" class="form-control" autocomplete="off" type="text" placeholder="Choose a display name" id="username" onkeypress="return checkEnter(this, event);"></input>
<span class="input-group-btn">
<button class="btn btn-success" autocomplete="off" id="register">Join the room</button>
</span>
</div>
</div>
</div>
</div>
<div class="container hide" id="videos">
<div class="row">
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Local Video <span class="label label-primary hide" id="publisher"></span>
<div class="btn-group btn-group-xs pull-right hide">
<div class="btn-group btn-group-xs">
<button id="bitrateset" autocomplete="off" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Bandwidth<span class="caret"></span>
</button>
<ul id="bitrate" class="dropdown-menu" role="menu">
<li><a href="#" id="0">No limit</a></li>
<li><a href="#" id="128">Cap to 128kbit</a></li>
<li><a href="#" id="256">Cap to 256kbit</a></li>
<li><a href="#" id="512">Cap to 512kbit</a></li>
<li><a href="#" id="1024">Cap to 1mbit</a></li>
<li><a href="#" id="1500">Cap to 1.5mbit</a></li>
<li><a href="#" id="2000">Cap to 2mbit</a></li>
</ul>
</div>
</div>
</h3>
</div>
<div class="panel-body" id="videolocal"></div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Remote Video #1 <span class="label label-info hide" id="remote1"></span></h3>
</div>
<div class="panel-body relative" id="videoremote1"></div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Remote Video #2 <span class="label label-info hide" id="remote2"></span></h3>
</div>
<div class="panel-body relative" id="videoremote2"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Remote Video #3 <span class="label label-info hide" id="remote3"></span></h3>
</div>
<div class="panel-body relative" id="videoremote3"></div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Remote Video #4 <span class="label label-info hide" id="remote4"></span></h3>
</div>
<div class="panel-body relative" id="videoremote4"></div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Remote Video #5 <span class="label label-info hide" id="remote5"></span></h3>
</div>
<div class="panel-body relative" id="videoremote5"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<hr>
<div class="footer">
</div>
</div>
</body>
</html>
|