Statistics
| Branch: | Revision:

janus-gateway / html / echotest.html @ 70e8fc9c

History | View | Annotate | Download (6.1 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: Echo Test</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="janus.js" ></script>
15
<script type="text/javascript" src="echotest.js"></script>
16
<script>
17
        $(function() {
18
                $(".navbar-static-top").load("navbar.html", function() {
19
                        $(".navbar-static-top li.dropdown").addClass("active");
20
                        $(".navbar-static-top a[href='echotest.html']").parent().addClass("active");
21
                });
22
                $(".footer").load("footer.html");
23
        });
24
</script>
25
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.7/cerulean/bootstrap.min.css" type="text/css"/>
26
<link rel="stylesheet" href="css/demo.css" type="text/css"/>
27
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.2/css/font-awesome.min.css" type="text/css"/>
28
</head>
29
<body>
30

    
31
<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>
32

    
33
<nav class="navbar navbar-default navbar-static-top">
34
</nav>
35

    
36
<div class="container">
37
        <div class="row">
38
                <div class="col-md-12">
39
                        <div class="page-header">
40
                                <h1>Plugin Demo: Echo Test
41
                                        <button class="btn btn-default" autocomplete="off" id="start">Start</button>
42
                                </h1>
43
                        </div>
44
                        <div class="container" id="details">
45
                                <div class="row">
46
                                        <div class="col-md-12">
47
                                                <h3>Demo details</h3>
48
                                                <p>This Echo Test demo just blindly sends you back whatever you
49
                                                send to it. You're basically attached to yourself, and so your audio
50
                                                and video you send to the gateway are echoed back to you. The same
51
                                                is done for RTCP packets as well, with the information properly updated.</p>
52
                                                <p>The demo also provides a few controls to manipulate the media
53
                                                before you send them. You can mute audio and video, for instance,
54
                                                which will tell the gateway to drop the frames and not echo them
55
                                                back to you. You can also try and cap the bitrate: such control
56
                                                will tell the gateway to manipulate the RTCP REMB packets passing
57
                                                through, in order to simulate a bandwidth limitation.</p>
58
                                                <p>Finally, this demo also includes Data Channels: whatever you
59
                                                write in the text box under your local video, will be sent via
60
                                                Data Channels to the plugins, modified by adding a fixed prefix,
61
                                                and sent back to you in the text area below the remote video.</p>
62
                                                <div class="alert alert-info">This demo, as all the others, for the
63
                                                sake of simplicity accesses the default devices you have available on
64
                                                your machine. If you're interested in a demo that shows you how you
65
                                                can select specific devices with <code>janus.js</code>, open the
66
                                                <a class="alert-link" href="devicetest.html">Devices</a> demo instead.</div>
67
                                                <p>Press the <code>Start</code> button above to launch the demo.</p>
68
                                        </div>
69
                                </div>
70
                        </div>
71
                        <div class="container hide" id="videos">
72
                                <div class="row">
73
                                        <div class="col-md-6">
74
                                                <div class="panel panel-default">
75
                                                        <div class="panel-heading">
76
                                                                <h3 class="panel-title">Local Stream
77
                                                                        <div class="btn-group btn-group-xs pull-right hide">
78
                                                                                <button class="btn btn-danger" autocomplete="off" id="toggleaudio">Disable audio</button>
79
                                                                                <button class="btn btn-danger" autocomplete="off" id="togglevideo">Disable video</button>
80
                                                                                <div class="btn-group btn-group-xs">
81
                                                                                        <button id="bitrateset" autocomplete="off" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
82
                                                                                                Bandwidth<span class="caret"></span>
83
                                                                                        </button>
84
                                                                                        <ul id="bitrate" class="dropdown-menu" role="menu">
85
                                                                                                <li><a href="#" id="0">No limit</a></li>
86
                                                                                                <li><a href="#" id="128">Cap to 128kbit</a></li>
87
                                                                                                <li><a href="#" id="256">Cap to 256kbit</a></li>
88
                                                                                                <li><a href="#" id="512">Cap to 512kbit</a></li>
89
                                                                                                <li><a href="#" id="1024">Cap to 1mbit</a></li>
90
                                                                                                <li><a href="#" id="1500">Cap to 1.5mbit</a></li>
91
                                                                                                <li><a href="#" id="2000">Cap to 2mbit</a></li>
92
                                                                                        </ul>
93
                                                                                </div>
94
                                                                        </div>
95
                                                                </h3>
96
                                                        </div>
97
                                                        <div class="panel-body" id="videoleft"></div>
98
                                                </div>
99
                                                <div class="input-group margin-bottom-sm">
100
                                                        <span class="input-group-addon"><i class="fa fa-cloud-upload fa-fw"></i></span>
101
                                                        <input class="form-control" type="text" placeholder="Write a DataChannel message" autocomplete="off" id="datasend" onkeypress="return checkEnter(event);" disabled></input>
102
                                                </div>
103
                                        </div>
104
                                        <div class="col-md-6">
105
                                                <div class="panel panel-default">
106
                                                        <div class="panel-heading">
107
                                                                <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>
108
                                                        </div>
109
                                                        <div class="panel-body" id="videoright"></div>
110
                                                </div>
111
                                                <div class="input-group margin-bottom-sm">
112
                                                        <span class="input-group-addon"><i class="fa fa-cloud-download fa-fw"></i></span>
113
                                                        <input class="form-control" type="text" id="datarecv" disabled></input>
114
                                                </div>
115
                                        </div>
116
                                </div>
117
                        </div>
118
                </div>
119
        </div>
120

    
121
        <hr>
122
        <div class="footer">
123
        </div>
124
</div>
125

    
126
</body>
127
</html>