forked from collecttix/ctxSip
-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Blake McSwain
committed
Sep 9, 2014
0 parents
commit 1d555a5
Showing
22 changed files
with
23,308 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
._* | ||
.DS_Store | ||
phone/scripts/config.js | ||
.codekit-cache/ | ||
config.codekit | ||
*.sublime-project | ||
*.sublime-workspace |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,21 @@ | ||
The MIT License (MIT) | ||
|
||
Copyright (c) 2014 Collecttix | ||
|
||
Permission is hereby granted, free of charge, to any person obtaining a copy | ||
of this software and associated documentation files (the "Software"), to deal | ||
in the Software without restriction, including without limitation the rights | ||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell | ||
copies of the Software, and to permit persons to whom the Software is | ||
furnished to do so, subject to the following conditions: | ||
|
||
The above copyright notice and this permission notice shall be included in | ||
all copies or substantial portions of the Software. | ||
|
||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR | ||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, | ||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE | ||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER | ||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, | ||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN | ||
THE SOFTWARE. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,72 @@ | ||
# ctxSip | ||
|
||
[Project Homepage / Demo](http://collecttix.github.io/ctxSip/) | ||
|
||
A Javascript SIP client based on [SIP.js](http://sipjs.com/). | ||
|
||
ctxSip is a Javascript based SIP client that uses WebRTC and WebSockets to connect to your SIP server. The UI is designed to be launched as a popup from within your application. Works well with [Kazoo](https://github.com/2600hz/kazoo) from [2600hz](http://2600hz.com) | ||
|
||
## Features | ||
|
||
- Audio only, Hold / Resume, Mute, multiple call support. | ||
- No plugins required, Works with WebSocket / WebRTC enabled browsers. (Firefox & Chrome, for now Safari 8 when it is released.) | ||
- Call log is saved to localStorage. | ||
- Intuitive interface makes it easy for users. | ||
- Easy to configure and integrate into your project. | ||
- MIT licensed. | ||
|
||
## Screenshots | ||
|
||
<img src="img/screenshots/1.png" width="160" height="240"> | ||
<img src="img/screenshots/2.png" width="160" height="240"> | ||
<img src="img/screenshots/3.png" width="160" height="240"> | ||
|
||
## Getting Started | ||
|
||
You will need a sip account on a server that supports SIP over websockets. This has been tested with | ||
Kamailio in front of Freeswitch. | ||
|
||
- Clone this project. | ||
- Copy `phone/scripts/config-sample.js` to `phone/scripts/config.js` | ||
- Edit `phone/scripts/config.js` to reflect your sip account. | ||
- In your application HMTL, create a document and add the following code: | ||
|
||
```html | ||
<a href="phone" id="launchPhone">Launch</a> | ||
|
||
<script> | ||
var url = '/phone', | ||
features = 'menubar=no,location=no,resizable=no,scrollbars=no,status=no,addressbar=no,width=320,height=480'; | ||
$('#launchPhone').on('click', function(event) { | ||
event.preventDefault(); | ||
// This is set when the phone is open and removed on close | ||
if (!localStorage.getItem('ctxPhone')) { | ||
window.open(url, 'ctxPhone', features); | ||
return false; | ||
} else { | ||
window.alert('Phone already open.'); | ||
} | ||
}); | ||
</script> | ||
``` | ||
|
||
SSL connections work best because they will allow the user to save the media preferences. | ||
|
||
## Versioning | ||
|
||
For transparency into our release cycle, ctxSip is maintained under [the Semantic Versioning guidelines](http://semver.org/). Sometimes we screw up, but we try. | ||
|
||
## Dependencies | ||
|
||
ctxSip uses: | ||
|
||
- [SIP.js](http://sipjs.com/) | ||
- [Bootstrap](http://getbootstrap.com/) | ||
- [FontAwesome](http://fortawesome.github.io/Font-Awesome/) | ||
- [jQuery](http://jquery.com/) | ||
- [Moment.js](http://momentjs.com/) | ||
|
||
Tested on: | ||
|
||
- [Kazoo](http://2600hz.com) |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,268 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="utf-8"> | ||
<meta http-equiv="X-UA-Compatible" content="IE=edge"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1"> | ||
<link rel="icon" type="image/gif" href="img/favicon.ico" /> | ||
|
||
<title>ctxSip - Javascript SIP client</title> | ||
|
||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> | ||
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> | ||
<style> | ||
body { | ||
margin-top : 20px; | ||
background-image : url('img/bg.jpg'); | ||
} | ||
.navbar { | ||
margin-bottom : 40px; | ||
} | ||
.content { | ||
margin-top : 40px; | ||
padding-top : 40px; | ||
background-color : #fff; | ||
box-shadow : 0px -10px 20px rgba(0,0,0,0.03); | ||
} | ||
.content img { | ||
padding : 0 30px 10px 0; | ||
} | ||
.page-header { | ||
border-bottom : 1px solid #aaa; | ||
margin-bottom : 40px; | ||
} | ||
.content > .container > .row { | ||
margin-bottom: 40px; | ||
} | ||
</style> | ||
</head> | ||
|
||
<body> | ||
|
||
<div class="container"> | ||
|
||
<div class="navbar navbar-inverse" role="navigation"> | ||
<div class="container-fluid"> | ||
<div class="navbar-header"> | ||
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse"> | ||
<span class="sr-only">Toggle navigation</span> | ||
<span class="icon-bar"></span> | ||
<span class="icon-bar"></span> | ||
<span class="icon-bar"></span> | ||
</button> | ||
<a class="navbar-brand" href="#"><i class="fa fa-fw fa-phone-square text-muted"></i> ctxPhone</a> | ||
</div> | ||
<div class="navbar-collapse collapse"> | ||
<ul class="nav navbar-nav navbar-right"> | ||
<li><a href="https://github.com/Collecttix/ctxSip"><i class="fa fa-github"></i> GitHub Project</a></li> | ||
<li><a href="https://collecttix.com"><i class="fa fa-asterisk text-success"></i> Collecttix</a></li> | ||
</ul> | ||
</div> | ||
</div> | ||
</div> | ||
|
||
<h1 class="page-header text-center"><i class="fa fa-fw fa-phone-square text-success fa-2x"></i><br> ctxPhone <small><br>A simple, open source, javascript SIP phone for web applications.</small></h1> | ||
|
||
<div class="text-center"> | ||
<p class="text-center lead">Already have a sip account? Try our demo.</p> | ||
<a href="#mdlDemo" class="btn btn-lg btn-primary" id="btnDemo" data-toggle="modal"><i class="fa fa-fw fa-phone-square"></i> Try the Demo</a> | ||
</div> | ||
</div> | ||
|
||
<div class="content"> | ||
<div class="container"> | ||
<div class="row"> | ||
<div class="col-md-4 clearfix"> | ||
<h2>Simple UI</h2> | ||
<img src="img/screenshots/1.png" class="pull-left img-responsive" width="160" height="240" alt="Simple UI"> | ||
<p class="text-left">ctxSip is a Javascript based SIP client that uses WebRTC and WebSockets to connect to your SIP server.</p> | ||
<p class="text-left">The UI is designed to be launched as a popup from within your application.</p> | ||
<p class="text-left"></p> | ||
</div> | ||
<div class="col-md-4 clearfix"> | ||
<h2>Features</h2> | ||
<img src="img/screenshots/2.png" class="pull-left img-responsive" width="160" height="240" alt="Strong Featureset"> | ||
<ul class="text-left"> | ||
<li><p>Hold / Resume, Mute, multiple call support.</p></li> | ||
<li><p>No plugins required.</p></li> | ||
<li><p>Intuitive interface makes it easy for users.</p></li> | ||
<li><p>Designed for a business environment, features are limited to what is needed.</p></li> | ||
</ul> | ||
</div> | ||
<div class="col-md-4 clearfix"> | ||
<h2>Easy to Implement</h2> | ||
<img src="img/screenshots/3.png" class="pull-left img-responsive" width="160" height="240" alt="Easy to Implement"> | ||
<ul class="text-left"> | ||
<li><p>Call logs are saved to localStorage</p></li> | ||
<li><p>Easy to configure and integrate into your project.</p></li> | ||
<li><p>Uses SIP.js, Bootstrap, jQuery, and other common tools of the trade.</p></li> | ||
</ul> | ||
</div> | ||
</div> | ||
|
||
<div class="well"> | ||
<div class="row"> | ||
<div class="col-md-3"> | ||
<h3>Browser Support</h3> | ||
<p>Standards based browsers will just work. No plugins-necessary. Support requires: WebSockets & WebRTC.</p> | ||
<p>Supported Browsers</p> | ||
<ul> | ||
<li><p>Google Chrome</p></li> | ||
<li><p>Mozilla Firefox</li> | ||
<li><p>Apple Safari 8</p></li> | ||
</ul> | ||
</div> | ||
<div class="col-md-3"> | ||
<h3>Use It</h3> | ||
<p>Get started with ctxSip.</p> | ||
<ul> | ||
<li><p>Download or clone the repo: <a href="https://collecttix.github.com/ctxPhone">https://collecttix.github.com/ctxPhone</a></p></li> | ||
<li><p>Copy <code>scripts/config-sample.js</code> to <code>scripts/config.js</code> and edit with your SIP account details.</p></li> | ||
<li><p>Launch the phone.</p></li> | ||
</ul> | ||
</div> | ||
<div class="col-md-3"> | ||
<h3>Code</h3> | ||
<ul> | ||
<li><p><a href="http://sipjs.com/">SIP.js</a> Does all the heavy lifting.</p></li> | ||
<li><p><code>/scripts/app.js</code> is where the client code resides.</p></li> | ||
<li><p>When the client is launched, the user's configuration can be in a JS variable called <code>user</code> or it will look in localStorage for a JSON encoded object <code>SIPCreds</code></p></li> | ||
</ul> | ||
</div> | ||
<div class="col-md-3"> | ||
<h3>Contribute</h3> | ||
<ul> | ||
<li><p>Have an idea or find a bug? <a href="https://github.com/collecttix/ctxSip/issues">Submit an Issue.</a></p></li> | ||
<li><p>Have a new feature? <a href="https://github.com/collecttix/ctxSip/pulls">Submit a Pull Request.</a></p></li> | ||
</ul> | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
|
||
<div class="text-center text-muted clearfix"> | ||
<p> © 2014 Collecttix</p> | ||
</div> | ||
|
||
</div> | ||
|
||
<form class="modal fade" id="mdlDemo" tabindex="-1" role="dialog" aria-labelledby="btnDemo" aria-hidden="true"> | ||
<div class="modal-dialog"> | ||
<div class="modal-content"> | ||
<div class="modal-header"> | ||
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> | ||
<h4 class="modal-title" id="myModalLabel">Enter SIP Credenitals</h4> | ||
</div> | ||
<div class="modal-body"> | ||
<p>To use our demo you will need your SIP credentials from your account. All fields are required.</p> | ||
<div class="form-group"> | ||
<label>Display Name:</label> | ||
<input type="text" name="Display" class="form-control" placeholder="i.e. Ben Franklin" required> | ||
</div> | ||
<div class="row"> | ||
<div class="col-sm-6"> | ||
<div class="form-group"> | ||
<label>Sip User:</label> | ||
<input type="text" name="User" class="form-control" placeholder="i.e. sipuser" required> | ||
</div> | ||
</div> | ||
<div class="col-sm-6"> | ||
<div class="form-group"> | ||
<label>WS URL:</label> | ||
<input type="text" name="WSServer" class="form-control" placeholder="i.e. wss://sip.example.com:5060/" required> | ||
</div> | ||
</div> | ||
</div> | ||
<div class="row"> | ||
<div class="col-sm-6"> | ||
<div class="form-group"> | ||
<label>Sip Pass:</label> | ||
<input type="password" name="Pass" class="form-control" placeholder="i.e. supaSekret!" required> | ||
</div> | ||
</div> | ||
<div class="col-sm-6"> | ||
<div class="form-group"> | ||
<label>Sip Realm:</label> | ||
<input type="text" name="Realm" class="form-control" placeholder="i.e. sip.example.com" required> | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
<div class="modal-footer"> | ||
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button> | ||
<button type="button" class="btn btn-primary" id="btnConfig">Launch Phone</button> | ||
</div> | ||
</div> | ||
</div> | ||
</form> | ||
|
||
|
||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> | ||
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> | ||
|
||
<script> | ||
|
||
$(document).ready(function() { | ||
|
||
// When the demo modal is launched, load the values from localStorage | ||
$('#mdlDemo').on('show.bs.modal', function() { | ||
|
||
var user = JSON.parse(localStorage.getItem('SIPCreds')); | ||
|
||
if (user) { | ||
$.each(user, function(k, v) { | ||
$('input[name="'+k+'"]').val(v); | ||
}); | ||
} | ||
}); | ||
|
||
// Save form to localStorage and validate | ||
$('#btnConfig').click(function(event) { | ||
|
||
var user = {}, | ||
valid = true; | ||
|
||
event.preventDefault(); | ||
|
||
// validate the form | ||
$('#mdlDemo input').each(function(i) { | ||
if ($(this).val() === '') { | ||
$(this).closest('.form-group').addClass('has-error'); | ||
valid = false; | ||
} else { | ||
$(this).closest('.form-group').removeClass('has-error'); | ||
} | ||
user[$(this).attr('name')] = $(this).val(); | ||
}); | ||
|
||
// launch the phone window. | ||
if (valid) { | ||
localStorage.setItem('SIPCreds', JSON.stringify(user)); | ||
|
||
var url = '/phone', | ||
features = 'menubar=no,location=no,resizable=no,scrollbars=no,status=no,addressbar=no,width=320,height=480'; | ||
|
||
if (!localStorage.getItem('ctxPhone')) { | ||
window.open(url, 'ctxPhone', features); | ||
$('#mdlDemo').modal('hide'); | ||
return false; | ||
} else { | ||
window.alert('Phone already open.'); | ||
} | ||
} | ||
|
||
}); | ||
}); | ||
|
||
</script> | ||
|
||
<script> | ||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ | ||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), | ||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) | ||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga'); | ||
ga('create', 'UA-47777318-2', 'auto'); | ||
ga('send', 'pageview'); | ||
</script> | ||
</body> | ||
</html> |
Oops, something went wrong.