Statistics
| Branch: | Revision:

janus-gateway / html / admin.html @ e67b71f9

History | View | Annotate | Download (6.73 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: 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
<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
<link rel="stylesheet" href="css/cerulean/bootstrap.css" type="text/css"/>
22
<link rel="stylesheet" href="css/demo.css" type="text/css"/>
23
<link rel="stylesheet" href="css/font-awesome.css" type="text/css"/>
24
</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

    
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
                                                the modules that are available and so on. That's the same info you'd
60
                                                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
                                                <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
                                        </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
                                                        <div id="options" class="hide">
127
                                                                <label class="checkbox-inline">
128
                                                                        <input id="autorefresh"type="checkbox" value="">Autorefresh
129
                                                                </label>
130
                                                                <label class="checkbox-inline">
131
                                                                        <input id="prettify"type="checkbox" value="">Prettify
132
                                                                </label>
133
                                                        </div>
134
                                                        <div id="handle-info">
135
                                                        </div>
136
                                                </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
                                </div>
146
                        </div>
147
                </div>
148
        </div>
149

    
150
        <hr>
151
        <div class="footer">
152
        </div>
153
</div>
154
</body>
155
</html>