SIP.js homepage app demo

Demo of video chat, text chat, and data transfer using SIP.js and WebRTC.

by bsorrentino

HTML

<script src="http://sipjs.com/download/sip-0.7.0.min.js"></script>

<div id="content-video-audio">
  <h2>In-browser Video Chat is Now a Breeze</h2>
  <h4 class="intro">Here's a demo. Start a video chat between Alice and Bob.</h4>
  <div class="two-column-boxes">
    <div class="column-box">
      <div class="demo-window">
        <div class="demo-view">
          <video id="video-of-bob" muted="muted"></video>
        </div>
        <div class="left">
          <h4>Alice's View</h4>
          <h5>Demo user one</h5>
        </div>
        <button id="alice-video-button" class="right" type="button">video</button>
        <div class="clearfix"></div>
      </div>
    </div>
    <div class="column-box">
      <div class="demo-window">
        <div class="demo-view">
          <video id="video-of-alice" muted="muted"></video>
        </div>
        <div class="left">
          <h4>Bob's View</h4>
          <h5>Demo user two</h5>
        </div>
        <button id="bob-video-button" class="right" type="button">video</button>
        <div class="clearfix"></div>
      </div>
    </div>
    <div class="clearfix"></div>
  </div>
</div>
<div id="content-message">
  <h2>Real-Time Messaging with a Dozen Lines of Code</h2>
  <h4 class="intro">Check it out. Instant message between Alice and Bob.</h4>
  <div class="two-column-boxes">
    <div class="column-box">
      <div class="demo-window">
        <div class="demo-view">
          <div id="alice-message-display" class="message-display">
            <p class="message"><span class="message-from">Bob:</span> <span class="message-body placeholder">No messages yet</span></p>
          </div>
          <textarea id="alice-message-input" class="message-input" placeholder="Enter your message to Bob here!"></textarea>
        </div>
        <div class="left">
          <h4>Alice's View</h4>
          <h5>Demo user one</h5>
        </div>
        <button id="alice-message-button" class="right" type="button">send message</button>
     ...

CSS

.file-chooser-hack {
    position: relative;
    display: inline-block;
    height: auto;
    width: auto;
}
.file-chooser-hack > input.file-choose-button {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
}
.file-chooser-hack:hover > button.file-choose-button.dark-gray-bg {
    background-color: rgb(85,91,93);
}
.file-chooser-hack:hover > button.file-choose-button.dark-gray-bg {
    background-color: rgb(85,91,93);
}

JavaScript

// sipjs_demos.js
//
// Even though both "Alice" and "Bob" are running on the same computer,
// this demo behaves as if the dialog was an SIP call over a network.

var URL = window.URL || window.webkitURL;

function getCookie(key) {
    var re = new RegExp("(?:(?:^|.*;\s*) ?" + key + "\s*\=\s*([^;]*).*$)|^.*$");
    return document.cookie.replace(re, "$1");

}

// This demo uses unauthenticated users on the "sipjs.onsip.com" demo domain.
// To allow multiple users to run the demo without playing a game of
// chatroulette, we give both callers in the demo a random token and then only
// make calls between users with these token suffixes.
// So, you still might run into a user besides yourself.
function randomString(length, chars) {
    var result = '';
    for (var i = length; i > 0; --i)
        result += chars[Math.round(Math.random() * (chars.length - 1))];
    return result;
}
// Each session gets a token that expires 1 day later. This is so we minimize
// the number of users we register for the SIP domain, because SIP hosts
// generally have limits on the number of registered users you may have in total
// or over a period of time.
var token = getCookie('onsipToken');
if (token === '') {
    token = randomString(32, ['0123456789',
                              'abcdefghijklmnopqrstuvwxyz',
                              'ABCDEFGHIJKLMNOPQRSTUVWXYZ'].join(''));
    var d = new Date();
    d.setTime(d.getTime() + 1000*60*60*24); // expires in 1 day
    document.cookie = ('onsipToken=' + token + ';'
                       + 'expires=' + d.toUTCString() + ';');
}
var domain = 'sipjs.onsip.com';
var aliceURI      = 'alice.' + window.token + '@' + domain;
var aliceName     = 'Alice';

var bobURI        = 'bob.' + window.token + '@' + domain;
var bobName       = 'Bob';

// Function: mediaOptions
//   A shortcut function to construct the media options for an SIP session.
//
// Arguments:
//   audio: whether or not to send audio in a SIP WebRTC session
//   audio:...