Child pages
  • Quick start guide
Skip to end of metadata
Go to start of metadata

On this section we are showing how to use QoffeeSIP, following these steps you can easily include WebRTC features (using SIP protocol for signaling) in your website.

If you only want to include the stack features in your website, avoiding implementation "details" you only have to follow these steps:

  • First of all you should get a copy of the source because examples are included on it:
    git clone https://github.com/Quobis/QoffeeSIP.git

  • Copy  "simplest-example" distribution files to your favourite web server:
    cp -R QoffeeSIP/examples/webphone/dist/* /var/www

  • Open two tabs of your browser and configure it with your SIP server parameters or enter a radom extension (Quobis server is going to be used automatically):


  • Make a call and answer yourself in another one endpoint.

Ok, now you have video and audio in your website based on WebRTC and SIP over websockets tecnologies, congrats (wink). From here we are going to speak about implementation details. In this case we chose to analyze the simplest possible example (included in the sources as simplest-example) in order to avoid confusion. We used CoffeeScript to generate Javascript and Jade Engine Template to get HTML code because it is simpler and funnier.

Let's see the Jade/HTML file. We have some script tags in the header to include our own Javascript code and dependencies, jQuery, Spine.jsUnderscore.js and QoffeeSIP. We also have defined some formularies and two divs. You must have two divs with the same ids (#media-local, #media-remote) with a video tag inside (#local for #media-local, #remote for #media-remote). You may set the autoplay attribute, otherwise just the first frame of the video will be displayed.

//-
//- @source: https://github.com/Quobis/QoffeeSIP
//- Copyright (C) Quobis
//- Licensed under GNU-LGPL-3.0-or-later (http://www.gnu.org/licenses/lgpl-3.0.html)
//-


!!!
head
    title Simplest QoffeeSIP demo
    script(src="lib/jquery-1.8.0.min.js")
    script(src="lib/spine.js")
    script(src="lib/underscore.js")
    script(src="lib/qoffeesip.js")
    script(src="script.js")

body
    form(id="init")
        input(id="server-ip", type="text", placeholder="Server IP", required)
        input(id="server-port", type="number", placeholder="Port", required)
        input(type="submit", value="Init")

    form(id="register")
        input(id="register-ext", type="text", placeholder="Ext", required)
        input(id="register-pass", type="text", placeholder="Pass")
        input(type="submit", value="Register")

    form(id="call")
        input(id="call-ext", type="text", placeholder="Ext", required)
        input(type="submit", value="Call")

    form(id="hangup")
        input(type="submit", value="Hangup")

    div(id="media-local")
        video(id="local", class="row-fluid", autoplay=true)
        audio(id="local-audio")
    div(id="media-remote")
        video(id="remote", class="row-fluid", autoplay=true)
        audio(id="remote-audio")

The next CoffeeScript code is translated to script.js. In this code we define two functions. The first one is for avoid page reloading on form submit.The next function is more complex. It bind the #init form submit to a callback where:

  • An associative array, options, stores the values of this form to keys, server and mediaElements.
  • options has another key, onopen, a function that binds the submit event from the other forms to a callback . This callback calls a QoffeeSIP method (API.register, API.call and API.hangup). This function will be executed once the websocket is open. So, we will be able to register, call or hangup being the websocket ready to send SIP messages.
  • We create an API object usign options as argument of the contructor.
  • We bind the event "new-state" to a callback that simply accept an incomming call. You should see our API documentation about this event. Here, we just manage state 6, that means there is an incomming call.
##
# Copyright (C) Quobis
# Project site: https://github.com/Quobis/QoffeeSIP
# 
# Licensed under GNU-LGPL-3.0-or-later (http://www.gnu.org/licenses/lgpl-3.0.html)
##


# On document ready...
$ ->
    # Avoid page "reloading" on submit.
    $("form").submit (e) ->
        e.preventDefault()
        false

    # Declaration of api.
    api = null

    $("#init").submit =>
        options =
            server: {ip: $("#server-ip").val(), port: $("#server-port").val()}
            mediaElements: {localMedia: $("#media-local"), remoteMedia: $("#media-remote")}
            onopen: =>
                $("#register").submit =>
                    api.register $("#register-ext").val(), $("#register-pass").val()
                $("#call").submit =>
                    api.call $("#call-ext").val()
                $("#hangup").submit =>
                    api.hangup()
        api = new API options
        api.on "new-state", (state, message) ->
            switch state
                when 6
                    api.answer()

Enough, this simple code works. Here some steps to get it running:

  • To avoid complexity the examples only can be deployed over a web server like Apache, not using node. You only have to build the app and move it from dist folder to your web server.
  • To build the app:
    • Install node. Developer guide includes a simple tutorial to get it compiled from sources.
    • Install the dependencies:
      • sudo npm install -g coffee-script
      • sudo npm install -g jade
      • sudo npm install -g stylus
    • Clone the project:
      • git clone https://github.com/Quobis/QoffeeSIP.git
    • Build it:
      • cd QoffeeSIP/examples/webphone
      • cake build
    • NOTE: If you have any trouble run "cake clean" and try again.
  • No labels