1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
|
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Janus WebRTC Server (multistream): SIP Gateway Demo</title>
<script type="text/javascript" src="javascript/webrtc-adapter/adapter.min.js" ></script>
<script type="text/javascript" src="javascript/jquery/jquery.min.js" ></script>
<script type="text/javascript" src="javascript/jquery-blockui/jquery.blockUI.js" ></script>
<script type="text/javascript" src="javascript/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="javascript/bootbox/bootbox.min.js"></script>
<script type="text/javascript" src="javascript/spin.js/spin.min.js"></script>
<script type="text/javascript" src="javascript/blueimp-md5/md5.min.js"></script>
<script type="text/javascript" src="javascript/toastr/toastr.min.js"></script>
<script type="text/javascript" src="settings.js" ></script>
<script type="text/javascript" src="javascript/janus-gateway/janus.min.js" ></script>
<script type="text/javascript" src="siptest.js"></script>
<script>
$(function() {
$(".navbar-static-top").load("navbar.html", function() {
$(".navbar-static-top li.dropdown").addClass("active");
$(".navbar-static-top a[href='siptest.html']").parent().addClass("active");
});
$(".footer").load("footer.html");
});
</script>
<link rel="stylesheet" href="javascript/bootswatch/cerulean/bootstrap.min.css" type="text/css"/>
<link rel="stylesheet" href="css/demo.css" type="text/css"/>
<link rel="stylesheet" href="fonts/font-awesome/css/font-awesome.min.css" type="text/css"/>
<link rel="stylesheet" href="javascript/toastr/toastr.min.css" type="text/css"/>
</head>
<body>
<nav class="navbar navbar-default navbar-static-top">
</nav>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="page-header">
<h1>Plugin Demo: SIP Gateway
<button class="btn btn-default" autocomplete="off" id="start">Start</button>
</h1>
</div>
<div class="container" id="details">
<div class="row">
<div class="col-md-12">
<h3>Demo details</h3>
<p>This demo shows how you can make use of the SIP plugin to interact with a SIP
Proxy (e.g., Kamailio or OpenSIPS) or PBX (e.g., Asterisk or FreeSwitch) in order to
place or receive calls to and from other SIP clients. Specifically, it uses the
Sofia-based SIP plugin. Notice the plugin only exchange SIP messages from within the
plugin itself: no SIP is done in JavaScript, except for references to SIP URIs.</p>
<p>When started, the demo will allow you to insert a minimum set of information
required to REGISTER the web page as a SIP client at a SIP Proxy or PBX you specify.
This will allow you to call SIP URIs, or receive calls through the SIP Server itself.
During a call, you'll also be able to interact with the PBX via DTMF tones, e.g.,
to drive an Interactive Voice Response (IVR) menu that you're being presented with.</p>
<div class="alert alert-info"><b>Note well!</b> Please notice that, while audio support
has been tested extensively, video hasn't as much, and as such may not work as expected.
</div>
<p>Press the <code>Start</code> button above to launch the demo.</p>
</div>
</div>
</div>
<div class="container hide" id="sipcall">
<div class="row">
<div class="col-md-12">
<div class="col-md-6 container hide" id="login">
<div class="input-group margin-bottom-sm">
<span class="input-group-addon"><i class="fa fa-cloud-upload fa-fw"></i></span>
<input class="form-control" type="text" placeholder="SIP Registrar (e.g., sip:host:port)" autocomplete="off" id="server" onkeypress="return checkEnter(this, event);" />
</div>
<div class="input-group margin-bottom-sm">
<span class="input-group-addon"><i class="fa fa-user fa-fw"></i></span>
<input class="form-control" type="text" placeholder="SIP Identity (e.g., sip:goofy@example.com)" autocomplete="off" id="username" onkeypress="return checkEnter(this, event);" />
</div>
<div class="input-group margin-bottom-sm">
<span class="input-group-addon"><i class="fa fa-user-plus fa-fw"></i></span>
<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);" />
</div>
<div class="input-group margin-bottom-sm">
<span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>
<input class="form-control" type="password" placeholder="Secret (e.g., mysupersecretpassword)" autocomplete="off" id="password" onkeypress="return checkEnter(this, event);" />
</div>
<div class="input-group margin-bottom-sm">
<span class="input-group-addon"><i class="fa fa-quote-right fa-fw"></i></span>
<input class="form-control" type="text" placeholder="Display name (e.g., Alice Smith)" autocomplete="off" id="displayname" onkeypress="return checkEnter(this, event);" />
</div>
<div class="btn-group btn-group-sm" style="width: 100%">
<button class="btn btn-primary" autocomplete="off" id="register" style="width: 30%">Register</button>
<div class="btn-group btn-group-sm" style="width: 70%">
<button autocomplete="off" id="registerset" class="btn btn-default dropdown-toggle" data-toggle="dropdown" style="width: 100%">
Registration approach<span class="caret"></span>
</button>
<ul id="registerlist" class="dropdown-menu" role="menu">
<li><a href='#' id='secret'>Register using plain secret</a></li>
<li><a href='#' id='ha1secret'>Register using HA1 secret</a></li>
<li><a href='#' id='guest'>Register as a guest (no secret)</a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-6 container hide" id="phone">
<div class="input-group margin-bottom-sm">
<span class="input-group-addon"><i class="fa fa-phone fa-fw"></i></span>
<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);" />
</div>
<button class="btn btn-success margin-bottom-sm" autocomplete="off" id="call">Call</button> <input autocomplete="off" id="dovideo" type="checkbox" />Use Video
</div>
</div>
</div>
<div id="videos" class="hide">
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">You</h3>
</div>
<div class="panel-body" id="videoleft"></div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Remote UA</h3>
</div>
<div class="panel-body" id="videoright"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<hr>
<div class="footer">
</div>
</div>
</body>
</html>
|
