Statistics
| Branch: | Revision:

janus-gateway / html / siptest.html @ d4f87512

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

    
34
<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>
35

    
36
<nav class="navbar navbar-default navbar-static-top">
37
</nav>
38

    
39
<div class="container">
40
        <div class="row">
41
                <div class="col-md-12">
42
                        <div class="page-header">
43
                                <h1>Plugin Demo: SIP Gateway
44
                                        <button class="btn btn-default" autocomplete="off" id="start">Start</button>
45
                                </h1>
46
                        </div>
47
                        <div class="container" id="details">
48
                                <div class="row">
49
                                        <div class="col-md-12">
50
                                                <h3>Demo details</h3>
51
                                                <p>This demo shows how you can make use of the SIP plugin to interact with a
52
                                                SIP Proxy (e.g., Kamailio) or PBX (e.g., Asterisk) in order to place or
53
                                                receive calls to and from other SIP clients.</p>
54
                                                <p>When started, the demo will allow you to insert a minimum set of information
55
                                                required to REGISTER the web page as a SIP client at a SIP Proxy or PBX you specify.
56
                                                This will allow you to call SIP URIs, or receive calls through the SIP Server itself.
57
                                                During a call, you'll also be able to interact with the PBX via DTMF tones, e.g.,
58
                                                to drive an Interactive Voice Response (IVR) menu that you're being presented with.</p>
59
                                                <div class="alert alert-info"><b>Note well!</b> This demo, as the plugin it makes use of,
60
                                                has a few issues, right now. Specifically, it has only been tested with the widespread
61
                                                Asterisk PBX (extended with our
62
                                                <a href="https://github.com/meetecho/asterisk-opus" target="_blank">Opus and VP8 support</a> patch),
63
                                                even though it should work fine with others as well. Besides, video has not been
64
                                                tested yet and as such may not work as expected.
65
                                                </div>
66
                                                <p>Press the <code>Start</code> button above to launch the demo.</p>
67
                                        </div>
68
                                </div>
69
                        </div>
70
                        <div class="container hide" id="sipcall">
71
                                <div class="row">
72
                                        <div class="col-md-12">
73
                                                <div class="col-md-6 container hide" id="login">
74
                                                        <div class="input-group margin-bottom-sm">
75
                                                                <span class="input-group-addon"><i class="fa fa-cloud-upload fa-fw"></i></span>
76
                                                                <input class="form-control" type="text" placeholder="SIP Registrar (e.g., sip:host:port)" autocomplete="off" id="server" onkeypress="return checkEnter(this, event);"></input>
77
                                                        </div>
78
                                                        <div class="input-group margin-bottom-sm">
79
                                                                <span class="input-group-addon"><i class="fa fa-user fa-fw"></i></span>
80
                                                                <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>
81
                                                        </div>
82
                                                        <div class="input-group margin-bottom-sm">
83
                                                                <span class="input-group-addon"><i class="fa fa-user-plus fa-fw"></i></span>
84
                                                                <input class="form-control" type="text" placeholder="Username (e.g., goofy, overrides the one in the SIP identity if provided)" autocomplete="off" id="authuser" onkeypress="return checkEnter(this, event);"></input>
85
                                                        </div>
86
                                                        <div class="input-group margin-bottom-sm">
87
                                                                <span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>
88
                                                                <input class="form-control" type="password" placeholder="Secret (e.g., mysupersecretpassword)" autocomplete="off" id="password" onkeypress="return checkEnter(this, event);"></input>
89
                                                        </div>
90
                                                        <div class="input-group margin-bottom-sm">
91
                                                                <span class="input-group-addon"><i class="fa fa-quote-right fa-fw"></i></span>
92
                                                                <input class="form-control" type="text" placeholder="Display name (e.g., Alice Smith)" autocomplete="off" id="displayname" onkeypress="return checkEnter(this, event);"></input>
93
                                                        </div>
94
                                                        <div class="btn-group btn-group-sm" style="width: 100%">
95
                                                                <button class="btn btn-primary" autocomplete="off" id="register" style="width: 30%">Register</button>
96
                                                                <div class="btn-group btn-group-sm" style="width: 70%">
97
                                                                        <button autocomplete="off" id="registerset" class="btn btn-default dropdown-toggle" data-toggle="dropdown" style="width: 100%">
98
                                                                                Registration approach<span class="caret"></span>
99
                                                                        </button>
100
                                                                        <ul id="registerlist" class="dropdown-menu" role="menu">
101
                                                                                <li><a href='#' id='secret'>Register using plain secret</a></li>
102
                                                                                <li><a href='#' id='ha1secret'>Register using HA1 secret</a></li>
103
                                                                                <li><a href='#' id='guest'>Register as a guest (no secret)</a></li>
104
                                                                        </ul>
105
                                                                </div>
106
                                                        </div>
107
                                                </div>
108
                                                <div class="col-md-6 container hide" id="phone">
109
                                                        <div class="input-group margin-bottom-sm">
110
                                                                <span class="input-group-addon"><i class="fa fa-phone fa-fw"></i></span>
111
                                                                <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>
112
                                                        </div>
113
                                                        <button class="btn btn-success margin-bottom-sm" autocomplete="off" id="call">Call</button> <input autocomplete="off" id="dovideo" type="checkbox">Use Video</input>
114
                                                </div>
115
                                        </div>
116
                                <div/>
117
                                <div id="videos" class="hide">
118
                                        <div class="col-md-6">
119
                                                <div class="panel panel-default">
120
                                                        <div class="panel-heading">
121
                                                                <h3 class="panel-title">You</h3>
122
                                                        </div>
123
                                                        <div class="panel-body" id="videoleft"></div>
124
                                                </div>
125
                                        </div>
126
                                        <div class="col-md-6">
127
                                                <div class="panel panel-default">
128
                                                        <div class="panel-heading">
129
                                                                <h3 class="panel-title">Remote UA</h3>
130
                                                        </div>
131
                                                        <div class="panel-body" id="videoright"></div>
132
                                                </div>
133
                                        </div>
134
                                </div>
135
                        </div>
136
                </div>
137
        </div>
138

    
139
        <hr>
140
        <div class="footer">
141
        </div>
142
</div>
143

    
144
</body>
145
</html>