Statistics
| Branch: | Revision:

janus-gateway / html / sipretest.html @ 38109c95

History | View | Annotate | Download (7.84 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 (libre)</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/toastr.js/2.1.3/toastr.min.js"></script>
15
<script type="text/javascript" src="janus.js" ></script>
16
<script type="text/javascript" src="sipretest.js"></script>
17
<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
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.7/cerulean/bootstrap.min.css" type="text/css"/>
27
<link rel="stylesheet" href="css/demo.css" type="text/css"/>
28
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.2/css/font-awesome.min.css" type="text/css"/>
29
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.3/toastr.css"/>
30
</head>
31
<body>
32

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

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

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

    
141
        <hr>
142
        <div class="footer">
143
        </div>
144
</div>
145

    
146
</body>
147
</html>