WebRTC SIP Demo

Build on top of Bistri WebRTC API

by bistri

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/gh/bistri/bistri-conference-js/dist/bistri.conference-3.4.5.js"></script>
<p>
    <ul>
        <li>Join a conference: 3500 + 4 digits conference id</li>
    </ul>
</p>



<div class="pane" id="pane_0">
    <img src="https://static.tumblr.com/uzwqx7a/8VIm8jofz/logo.png">
</div>

<div class="pane" id="pane_1" style="display: none">
    <input type="text" placeholder="Conference Name" id="room_field" value="35001234" class="form-control">
    <br>
    <input type="button" value="Join Conference Room" id="join" class="btn btn-info btn-default btn-block">
</div>

<div class="pane" id="pane_2" style="display: none">
    <div id="video_container"></div>
    <input type="button" value="Quit Conference Room" id="quit" class="btn btn-danger btn-default btn-block">
</div>

CSS

.pane {
    margin: 20px;
    text-align: center;
}

video {
    width: 100%;
}

JavaScript

var room,
    localStream;


// when Bistri API client is ready, function
// "onBistriConferenceReady" is invoked


    // test if the browser is WebRTC compatible
    if (!bc.isCompatible()) {
        // if the browser is not compatible, display an aler
        alert("your browser is not WebRTC compatible !");
        // then stop the script execution
    }

    // initialize API client with application keys
    // if you don't have your own, you can get them at:
    // https://api.developers.bistri.com/login
    bc.init({
        appId: "38077edb",
        appKey: "4f304359baa6d0fd1f9106aaeb116f33",
        useSip: true,
        debug: true,
				stunServers: [
					{
						urls: "stun:mccturn.bistri.com:443"
					}
				],
        apiServer: "https://signaling.bistri.com"
    });

    /* Set events handler */

    // when local user is connected to the server
    bc.signaling.bind("onConnected", function ( data )    {
    		bc.set ( { 
          stun: data.stun
        } );
    
        // show pane with id "pane_1"
        showPanel("pane_1");
        
        /*bc.startStream({
            audio: true,
            video: true
        }, function(stream) {
            // when webcam access has been granted
            // show pane with id "pane_2"
            showPanel("pane_2");
            // start the sip call

            localStream = stream;

            bc.sip.call("sipTest", "35001234", {
                stream: stream
            });
        });*/
    });

    // when an error occured on the server side
    bc.signaling.bind("onError", function(error) {
        // display an alert message
        alert(error.text + " (" + error.code + ")");
    });

    // when the user has joined a room
    bc.signaling.bind("onJoinedRoom", function(data) {
        // set the current room name
        room = data.room;
        // ask the user to access to his webcam
        bc.startStream({
            audio: true,
            video: true
        }, function(stream)...