Statistics
| Branch: | Revision:

janus-gateway / html / siptest.html @ 1f44763c

History | View | Annotate | Download (7.33 KB)

1 be35facb 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: SIP Gateway Demo</title>
8 2c7dab14 joshdickson40
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/webrtc-adapter/3.4.3/adapter.min.js" ></script>
9 5ca69d0d Lorenzo Miniero
<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="https://cdnjs.cloudflare.com/ajax/libs/blueimp-md5/2.6.0/js/md5.min.js"></script>
15 be35facb meetecho
<script type="text/javascript" src="janus.js" ></script>
16
<script type="text/javascript" src="siptest.js"></script>
17 6d795273 Lorenzo Miniero
<script>
18
        $(function() {
19
                $(".navbar-static-top").load("navbar.html", function() {
20
                        $(".navbar-static-top li.dropdown").addClass("active");
21
                        $(".navbar-static-top a[href='siptest.html']").parent().addClass("active");
22
                });
23
                $(".footer").load("footer.html");
24
        });
25
</script>
26 5ca69d0d Lorenzo Miniero
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.7/cerulean/bootstrap.min.css" type="text/css"/>
27 be35facb meetecho
<link rel="stylesheet" href="css/demo.css" type="text/css"/>
28 5ca69d0d Lorenzo Miniero
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.2/css/font-awesome.min.css" type="text/css"/>
29 4b12fd8e meetecho
</head>
30 be35facb meetecho
<body>
31
32 ddc1f702 meetecho
<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>
33 be35facb meetecho
34
<nav class="navbar navbar-default navbar-static-top">
35
</nav>
36
37
<div class="container">
38
        <div class="row">
39
                <div class="col-md-12">
40
                        <div class="page-header">
41
                                <h1>Plugin Demo: SIP Gateway
42 4b870f32 meetecho
                                        <button class="btn btn-default" autocomplete="off" id="start">Start</button>
43 be35facb meetecho
                                </h1>
44
                        </div>
45 cfd5c0d6 meetecho
                        <div class="container" id="details">
46
                                <div class="row">
47
                                        <div class="col-md-12">
48
                                                <h3>Demo details</h3>
49 a37dd8a2 meetecho
                                                <p>This demo shows how you can make use of the SIP plugin to interact with a
50
                                                SIP Proxy (e.g., Kamailio) or PBX (e.g., Asterisk) in order to place or
51
                                                receive calls to and from other SIP clients.</p>
52 cfd5c0d6 meetecho
                                                <p>When started, the demo will allow you to insert a minimum set of information
53 a37dd8a2 meetecho
                                                required to REGISTER the web page as a SIP client at a SIP Proxy or PBX you specify.
54
                                                This will allow you to call SIP URIs, or receive calls through the SIP Server itself.
55 cfd5c0d6 meetecho
                                                During a call, you'll also be able to interact with the PBX via DTMF tones, e.g.,
56
                                                to drive an Interactive Voice Response (IVR) menu that you're being presented with.</p>
57
                                                <div class="alert alert-info"><b>Note well!</b> This demo, as the plugin it makes use of,
58
                                                has a few issues, right now. Specifically, it has only been tested with the widespread
59
                                                Asterisk PBX (extended with our
60
                                                <a href="https://github.com/meetecho/asterisk-opus" target="_blank">Opus and VP8 support</a> patch),
61
                                                even though it should work fine with others as well. Besides, video has not been
62 a37dd8a2 meetecho
                                                tested yet and as such may not work as expected.
63 cfd5c0d6 meetecho
                                                </div>
64
                                                <p>Press the <code>Start</code> button above to launch the demo.</p>
65
                                        </div>
66
                                </div>
67
                        </div>
68 be35facb meetecho
                        <div class="container hide" id="sipcall">
69
                                <div class="row">
70
                                        <div class="col-md-12">
71
                                                <div class="col-md-6 container hide" id="login">
72
                                                        <div class="input-group margin-bottom-sm">
73
                                                                <span class="input-group-addon"><i class="fa fa-cloud-upload fa-fw"></i></span>
74 7c527257 meetecho
                                                                <input class="form-control" type="text" placeholder="SIP Proxy Server (e.g., sip:host:port)" autocomplete="off" id="server" onkeypress="return checkEnter(this, event);"></input>
75 be35facb meetecho
                                                        </div>
76
                                                        <div class="input-group margin-bottom-sm">
77
                                                                <span class="input-group-addon"><i class="fa fa-user fa-fw"></i></span>
78 7c527257 meetecho
                                                                <input class="form-control" type="text" placeholder="SIP Identity (e.g., sip:goofy@example.com)" autocomplete="off" id="username" onkeypress="return checkEnter(this, event);"></input>
79 be35facb meetecho
                                                        </div>
80
                                                        <div class="input-group margin-bottom-sm">
81 147173bd Saúl Ibarra Corretgé
                                                                <span class="input-group-addon"><i class="fa fa-user fa-fw"></i></span>
82
                                                                <input class="form-control" type="text" placeholder="Display name (e.g., Alice)" autocomplete="off" id="displayname" onkeypress="return checkEnter(this, event);"></input>
83
                                                        </div>
84
                                                        <div class="input-group margin-bottom-sm">
85 be35facb meetecho
                                                                <span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>
86 7c527257 meetecho
                                                                <input class="form-control" type="password" placeholder="Secret (e.g., mysupersecretpassword)" autocomplete="off" id="password" onkeypress="return checkEnter(this, event);"></input>
87 be35facb meetecho
                                                        </div>
88 cb1df38c meetecho
<!--
89 7c527257 meetecho
                                                        <button class="btn btn-success margin-bottom-sm" autocomplete="off" id="register">Register</button> <input autocomplete="off" id="guest" type="checkbox">Guest</input> <span class="hide label label-info" id="you"></span>
90 cb1df38c meetecho
-->
91
                                                        <div class="btn-group btn-group-sm" style="width: 100%">
92
                                                                <button class="btn btn-primary" autocomplete="off" id="register" style="width: 30%">Register</button>
93
                                                                <div class="btn-group btn-group-sm" style="width: 70%">
94
                                                                        <button autocomplete="off" id="registerset" class="btn btn-default dropdown-toggle" data-toggle="dropdown" style="width: 100%">
95
                                                                                Registration approach<span class="caret"></span>
96
                                                                        </button>
97
                                                                        <ul id="registerlist" class="dropdown-menu" role="menu">
98
                                                                                <li><a href='#' id='secret'>Register using plain secret</a></li>
99 91c39269 Saúl Ibarra Corretgé
                                                                                <li><a href='#' id='ha1secret'>Register using HA1 secret</a></li>
100 cb1df38c meetecho
                                                                                <li><a href='#' id='guest'>Register as a guest (no secret)</a></li>
101
                                                                        </ul>
102
                                                                </div>
103
                                                        </div>
104 be35facb meetecho
                                                </div>
105
                                                <div class="col-md-6 container hide" id="phone">
106
                                                        <div class="input-group margin-bottom-sm">
107
                                                                <span class="input-group-addon"><i class="fa fa-phone fa-fw"></i></span>
108 7c527257 meetecho
                                                                <input class="form-control" type="text" placeholder="SIP URI to call (e.g., sip:1000@example.com)" autocomplete="off" id="peer" onkeypress="return checkEnter(this, event);"></input>
109 be35facb meetecho
                                                        </div>
110 b556c49a Saúl Ibarra Corretgé
                                                        <button class="btn btn-success margin-bottom-sm" autocomplete="off" id="call">Call</button> <input autocomplete="off" id="dovideo" type="checkbox">Use Video</input>
111 be35facb meetecho
                                                </div>
112
                                        </div>
113
                                <div/>
114
                                <div id="videos" class="hide">
115
                                        <div class="col-md-6">
116
                                                <div class="panel panel-default">
117
                                                        <div class="panel-heading">
118 a37dd8a2 meetecho
                                                                <h3 class="panel-title">You</h3>
119 be35facb meetecho
                                                        </div>
120
                                                        <div class="panel-body" id="videoleft"></div>
121
                                                </div>
122
                                        </div>
123
                                        <div class="col-md-6">
124
                                                <div class="panel panel-default">
125
                                                        <div class="panel-heading">
126 a37dd8a2 meetecho
                                                                <h3 class="panel-title">Remote UA</h3>
127 be35facb meetecho
                                                        </div>
128
                                                        <div class="panel-body" id="videoright"></div>
129
                                                </div>
130
                                        </div>
131
                                </div>
132
                        </div>
133
                </div>
134
        </div>
135
136
        <hr>
137
        <div class="footer">
138
        </div>
139
</div>
140
141
</body>
142
</html>