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
|
<!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 Server (multistream): Echo Test</title>
<script type="text/javascript" src="javascript/webrtc-adapter/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="javascript/bootbox/bootbox.min.js"></script>
<script type="text/javascript" src="javascript/spin.js/spin.min.js"></script>
<script type="text/javascript" src="javascript/toastr/toastr.min.js"></script>
<script type="text/javascript" src="settings.js" ></script>
<script type="text/javascript" src="javascript/janus-gateway/janus.min.js" ></script>
<script type="text/javascript" src="echotest.js"></script>
<script>
$(function() {
$(".navbar-static-top").load("navbar.html", function() {
$(".navbar-static-top li.dropdown").addClass("active");
$(".navbar-static-top a[href='echotest.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" type="text/css"/>
<link rel="stylesheet" href="javascript/toastr/toastr.min.css" type="text/css"/>
</head>
<body>
<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: Echo Test
<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 Echo Test demo just blindly sends you back whatever you
send to it. You're basically attached to yourself, and so your audio
and video you send to Janus are echoed back to you. The same
is done for RTCP packets as well, with the information properly updated.</p>
<p>The demo also provides a few controls to manipulate the media
before you send them. You can mute audio and video, for instance,
which will tell the server to drop the frames and not echo them
back to you. You can also try and cap the bitrate: such control
will tell the server to manipulate the RTCP REMB packets passing
through, in order to simulate a bandwidth limitation. In case
you're interested in testing simulcasting, add the <code>?simulcast=true</code>
query string to the url of this page and reload it: buttons will appear
to allow you to try and switch between lower and higher quality
versions of the video you're capturing: notice that you may have
to increase the bandwidth indicator to have the higher quality
versions appear, as the browser will not encode them otherwise.</p>
<p>Finally, this demo also includes Data Channels: whatever you
write in the text box under your local video, will be sent via
Data Channels to the plugins, modified by adding a fixed prefix,
and sent back to you in the text area below the remote video.</p>
<div class="alert alert-info">This demo, as all the others, for the
sake of simplicity accesses the default devices you have available on
your machine. If you're interested in a demo that shows you how you
can select specific devices with <code>janus.js</code>, open the
<a class="alert-link" href="devicetest.html">Devices</a> demo instead.</div>
<div class="alert alert-info">The <b>Lua</b> and <b>Duktape</b> plugins, when
installed out of the box, come with a script that mimics the default EchoTest
<b>C</b> plugin: this means that you can use this demo page to talk to them
as well, so long as you tell the page code to connect to the respective plugin.
To talk to the <b>Lua</b> plugin instead of the stock EchoTest plugin,
add the <code>?plugin=lua</code> query string to the url of this page;
to talk to the <b>Duktape</b> plugin instead, use <code>?plugin=duktape</code>.
Since they both share pretty much the same syntax as the stock
EchoTest plugin, most if not all features should work just the same way.</div>
<p>Press the <code>Start</code> button above to launch the demo.</p>
</div>
</div>
</div>
<div class="container hide" id="videos">
<div class="row">
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Local Stream
<div class="btn-group btn-group-xs pull-right hide">
<button class="btn btn-danger" autocomplete="off" id="toggleaudio">Disable audio</button>
<button class="btn btn-danger" autocomplete="off" id="togglevideo">Disable video</button>
<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="videoleft"></div>
</div>
<div class="input-group margin-bottom-sm">
<span class="input-group-addon"><i class="fa fa-cloud-upload fa-fw"></i></span>
<input class="form-control" type="text" placeholder="Write a DataChannel message" autocomplete="off" id="datasend" onkeypress="return checkEnter(event);" disabled />
</div>
</div>
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Remote Stream <span class="label label-primary hide" id="curres"></span> <span class="label label-info hide" id="curbitrate"></span></h3>
</div>
<div class="panel-body" id="videoright"></div>
</div>
<div class="input-group margin-bottom-sm">
<span class="input-group-addon"><i class="fa fa-cloud-download fa-fw"></i></span>
<input class="form-control" type="text" id="datarecv" disabled />
</div>
</div>
</div>
</div>
</div>
</div>
<hr>
<div class="footer">
</div>
</div>
</body>
</html>
|
