Statistics
| Branch: | Revision:

janus-gateway / html / admin.html @ e67b71f9

History | View | Annotate | Download (6.73 KB)

1 6cf321c6 meetecho
<!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: Admin/Monitor</title>
8
<script type="text/javascript" src="jquery.min.js" ></script>
9
<script type="text/javascript" src="js/bootstrap.js"></script>
10
<script type="text/javascript" src="js/bootbox.min.js"></script>
11
<script type="text/javascript" src="admin.js"></script>
12 6d795273 Lorenzo Miniero
<script>
13
        $(function() {
14
                $(".navbar-static-top").load("navbar.html", function() {
15
                        $(".navbar-static-top li.dropdown").addClass("active");
16
                        $(".navbar-static-top a[href='admin.html']").parent().addClass("active");
17
                });
18
                $(".footer").load("footer.html");
19
        });
20
</script>
21 6cf321c6 meetecho
<link rel="stylesheet" href="css/cerulean/bootstrap.css" type="text/css"/>
22
<link rel="stylesheet" href="css/demo.css" type="text/css"/>
23 6d795273 Lorenzo Miniero
<link rel="stylesheet" href="css/font-awesome.css" type="text/css"/>
24 6cf321c6 meetecho
</head>
25
<body>
26
        
27
<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>
28
29
<nav class="navbar navbar-default navbar-static-top">
30
</nav>
31
32
<div class="container">
33
        <div class="row">
34
                <div class="col-md-12">
35
                        <div class="page-header">
36
                                <h1>Janus WebRTC Gateway: Admin/Monitor</h1>
37
                        </div>
38 8f2849eb Lorenzo Miniero
39
                        <div>
40
                                <ul id="admintabs" class="nav nav-tabs" role="tablist">
41
                                        <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
42
                                        <li role="presentation" class="disabled"><a href="#serverinfo" aria-controls="serverinfo" role="tab" data-toggle="tab">Server Info</a></li>
43
                                        <li role="presentation" class="disabled"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
44
                                        <li role="presentation" class="disabled"><a href="#handlesinfo" aria-controls="handlesinfo" role="tab" data-toggle="tab">Handles</a></li>
45
                                        <li role="presentation" class="disabled"><a href="#tokens" aria-controls="tokens" role="tab" data-toggle="tab">Auth Tokens</a></li>
46
                                </ul>
47
48
                                <div class="tab-content" style="padding: 20px;">
49
                                        <div role="tabpanel" class="tab-pane fade in active" id="home">
50
                                                <p>This is just an example of how you can build an UI on top of the
51
                                                existing <code>Admin/Monitor</code> interface. This page will only
52
                                                work as it is if you enabled the API (which is disabled by default)
53
                                                and you're using the default values. Edit the backend settings in
54
                                                the <code>admin.js</code> JavaScript code to adapt it to your
55
                                                configuration if you changed anything.</p>
56
                                                <p>The <code>Server Info</code> tab, as the name suggests, provides
57
                                                you with a view of the information related to the Janus instance
58
                                                you're using, e.g., in terms of the features that have been enabled,
59 662cbe07 Lorenzo Miniero
                                                the modules that are available and so on. That's the same info you'd
60 8f2849eb Lorenzo Miniero
                                                get contacting the Janus API at the <code>/janus/info</code> backend.</p>
61
                                                <p>The <code>Settings</code> tab instead allows you to inspect a
62
                                                few of the current settings in Janus (e.g., debug level and so on)
63
                                                and provides you with a way to change them dynamically.</p>
64
                                                <p>The <code>Handles</code> tab allows you to browse the currently active sessions
65
                                                and handles in Janus. Selecting a specific handle will provide you
66
                                                with all the current info related to it, including plugin it is
67
                                                attached to, any plugin specific information that may be relevant,
68
                                                ICE/DTLS states, amount of data being exchanged and so on. This
69
                                                section is especially helpful when you want to debug issues with
70
                                                a PeerConnection: you can find more details in
71
                                                <a href="http://www.meetecho.com/blog/understanding-the-janus-admin-api/" target="_blank">this blog post</a>.</p>
72
                                                <p>Finally, the <code>Auth Tokens</code> tab allows you to list
73
                                                existing authentication tokens, create new ones, associate plugin
74
                                                permissions and the like. This feature will only be possible if
75
                                                you enabled the authentication token mechanism in Janus, of course.</p>
76
                                        </div>
77
                                        <div role="tabpanel" class="tab-pane fade" id="serverinfo">
78
                                                <h4>Server Info</h4>
79
                                                <div>
80
                                                        <table class="table table-striped" id="server-details">
81
                                                        </table>
82
                                                </div>
83
                                                <h4>Plugins</h4>
84
                                                <div>
85
                                                        <table class="table table-striped" id="server-plugins">
86
                                                                <tr>
87
                                                                        <th>Name</th>
88
                                                                        <th>Author</th>
89
                                                                        <th>Description</th>
90
                                                                        <th>Version</th>
91
                                                                </tr>
92
                                                        </table>
93
                                                </div>
94 662cbe07 Lorenzo Miniero
                                                <h4>Transports</h4>
95
                                                <div>
96
                                                        <table class="table table-striped" id="server-transports">
97
                                                                <tr>
98
                                                                        <th>Name</th>
99
                                                                        <th>Author</th>
100
                                                                        <th>Description</th>
101
                                                                        <th>Version</th>
102
                                                                </tr>
103
                                                        </table>
104
                                                </div>
105 8f2849eb Lorenzo Miniero
                                        </div>
106
                                        <div role="tabpanel" class="tab-pane fade" id="settings">
107
                                                <h4>Settings <i id="update-settings" class="fa fa-refresh" title="Refresh settings" style="cursor: pointer;"></i></h4>
108
                                                <div>
109
                                                        <table class="table table-striped" id="server-settings">
110
                                                        </table>
111
                                                </div>
112
                                        </div>
113
                                        <div role="tabpanel" class="tab-pane fade" id="handlesinfo">
114
                                                <div id="sessions" class="col-md-2">
115
                                                        <h4>Sessions (<span id="sessions-num">0</span>) <i id="update-sessions" class="fa fa-refresh" title="Refresh list of sessions" style="cursor: pointer;"></i></h4>
116
                                                        <div id="sessions-list" class="list-group">
117
                                                        </div>
118
                                                </div>
119
                                                <div id="handles" class="col-md-2">
120
                                                        <h4>Handles (<span id="handles-num"></span>) <i id="update-handles" class="fa fa-refresh" title="Refresh list of handles" style="cursor: pointer;"></i></h4>
121
                                                        <div id="handles-list" class="list-group">
122
                                                        </div>
123
                                                </div>
124
                                                <div id="info" class="col-md-8">
125
                                                        <h4>Handle Info <i id="update-handle" class="fa fa-refresh" title="Refresh handle info" style="cursor: pointer;"></i></h4>
126 86239cd6 Lorenzo Miniero
                                                        <div id="options" class="hide">
127
                                                                <label class="checkbox-inline">
128 4d729b1c Lorenzo Miniero
                                                                        <input id="autorefresh"type="checkbox" value="">Autorefresh
129
                                                                </label>
130 86239cd6 Lorenzo Miniero
                                                                <label class="checkbox-inline">
131
                                                                        <input id="prettify"type="checkbox" value="">Prettify
132
                                                                </label>
133 4d729b1c Lorenzo Miniero
                                                        </div>
134 86239cd6 Lorenzo Miniero
                                                        <div id="handle-info">
135 d50a71ef Lorenzo Miniero
                                                        </div>
136 8f2849eb Lorenzo Miniero
                                                </div>
137
                                        </div>
138
                                        <div role="tabpanel" class="tab-pane fade" id="tokens">
139
                                                <h4>Auth Tokens <i id="update-tokens" class="fa fa-refresh" title="Refresh tokens" style="cursor: pointer;"></i></h4>
140
                                                <div>
141
                                                        <table class="table table-striped" id="auth-tokens">
142
                                                        </table>
143
                                                </div>
144
                                        </div>
145 6cf321c6 meetecho
                                </div>
146
                        </div>
147
                </div>
148
        </div>
149
150
        <hr>
151
        <div class="footer">
152
        </div>
153
</div>
154
</body>
155
</html>