User Tools

Site Tools


ARI raw example

index5.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
        <meta charset="utf-8" />
        <meta http-equiv="x-ua-compatible" content="ie=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
        <link rel="stylesheet" href="css/foundation.css" />
        <link rel="stylesheet" href="css/app.css" />
 
        <script src="js/jquery.js"></script>
        <script src="js/foundation.js"></script>
        <script src="js/jquery.form.js"></script>
 
        <title>Zurb</title>
  </head>
  <body>
    <div class="row">&nbsp;</div>
    <div class="top-bar">
        <div class="top-bar-left">
            <ul class="dropdown menu" data-dropdown-menu>
                <li class="menu-text">Zurb</li>
                </li>
            </ul>
        </div>
        <div class="top-bar-right">
            <form method="post" action="main.pl">
                <ul class="menu">
                    <input type="hidden" name="request" value="logout"/>
                    <li><button type="submit" class="tiny button">X</button></li>
                </ul>
            </form>
        </div>
    </div>
    <div class="row">
        <div class="small-1 columns">&nbsp;</div>
        <div class="small-10 columns">
            <div class="row">&nbsp;</div>
<!-- end of head.html -->
 
<div id="call-list">
    <table>
        <thead>
            <tr>
                <td width="10rem">Date</td>
                <td width="10rem">From</td>
                <td width="10rem">Status</td>
            </tr>
        </thead>
        <tbody id="table-body">
        </tbody>
    </table>
</div>
 
<pre><div id="message"></div></pre>
 
<script>
 
var ws = new WebSocket('ws://192.168.1.1:8088/ari/events?api_key=userx:12345&app=800');
 
ws.onmessage = function (event) {
 
    var jevent = $.parseJSON(event.data);
    var eventMessage = '<h5>You have event <' + jevent.type + '>:</h5><br/>' + event.data +'<br/><hr/>';
    $("#message").prepend(eventMessage);
 
    if (jevent.type == 'StasisStart' && jevent.channel.caller.name != 'app800') {
 
        var callerNumber = jevent.channel.caller.number;
        var channelId = jevent.channel.id;
        var callDate = jevent.timestamp;
 
        var intChannelId = channelId.replace(/\./g, '-');
 
        var trId = 'tr-'+intChannelId;
        var statusCellId = 'stCell-'+intChannelId;
        var callButtonId = 'call-'+intChannelId;
 
        var row = '<tr id="'+trId+'">';
        row += '<td>'+callDate+'</td>';
        row += '<td>'+callerNumber+'</td>';
        row += '<td class="status" id="'+statusCellId+'"><div id="'+callButtonId+'" class="button warning">Incoming!</div></td>';
        row += '</tr>';
 
        $('#table-body').prepend(row);
 
 
        $('#'+callButtonId).on("click", function(event) {
 
            $.ajax({
                url: 'http://192.168.1.1:8088/ari/channels/'+channelId+'/answer?api_key=userx:12345',
                type: 'POST',
                dataType: 'json',
                success: function(data) {
                    $("#message").prepend('<h5>Answer to call</h5>');
                }
            });
 
            $.ajax({
                url: 'http://192.168.1.1:8088/ari/bridges?api_key=userx:12345',
                type: 'POST',
                data: { type : 'mixing' },
                dataType: 'json',
                success: function(data) {
                    bridgeId = data.id;
                    $("#message").prepend('<h5>Create bridge:</h5> ' + bridgeId + '<br/>');
 
                    $.ajax({
                        url: 'http://192.168.1.1:8088/ari/events/user/bridgeEvent?api_key=userx:12345',
                        type: 'POST',
                        data: { application : '800',
                                source: 'channel:'+channelId+','+'bridge:'+bridgeId
                        },
                        dataType: 'json',
                    });
                }
            });
            $('#'+statusCellId).html('<div class="button success">Send...</div>');
 
        });
    };
 
    if (jevent.type == 'ChannelUserevent' && jevent.eventname == 'bridgeEvent') {
        var channelId = jevent.channel.id;
        var bridgeId = jevent.bridge.id;
        var callerNumber = jevent.channel.caller.number;
        $("#message").prepend('<h5>Catch bridgeEvent:</h5><br/>bridge:'+ bridgeId + '<br/>channel:' + channelId);
 
        $.ajax({
            url: 'http://192.168.1.1:8088/ari/bridges/'+bridgeId+'/addChannel?api_key=userx:12345',
            type: 'POST',
            data: { channel : channelId },
            dataType: 'json',
            success: function(data) {
 
                $("#message").prepend('<h5>Try originate...</h5>');
 
                $.ajax({
                    url: 'http://192.168.1.1:8088/ari/channels?api_key=userx:12345',
                    type: 'POST',
                    data: { endpoint : 'SIP/ext202',
                            callerId : 'app800',
                            priority : 1,
                            app : '800',
                            channelId : bridgeId,
                    },
                    dataType: 'json',
                    success: function(data) {
                        var destChannelId = data.id;
                        $.ajax({
                            url: 'http://192.168.1.1:8088/ari/events/user/connectEvent?api_key=userx:12345',
                            type: 'POST',
                            data: { application : '800',
                                    source: 'channel:' + destChannelId + ',bridge:' + bridgeId,
                            },
                            dataType: 'json',
                        });
                    }
                });
            }
        });
    };
 
    if (jevent.type == 'ChannelUserevent' && jevent.eventname == 'connectEvent') {
 
        var channelId = jevent.channel.id;
        var bridgeId = jevent.bridge.id;
        var callerNumber = jevent.channel.caller.number;
 
        $("#message").prepend('<h1>Hi-hi-hi!</h1>');
 
        $.ajax({
            url: 'http://192.168.1.1:8088/ari/bridges/'+bridgeId+'/addChannel?api_key=userx:12345',
            type: 'POST',
            data: { channel : channelId },
            dataType: 'json',
            success: function(data) {
                $("#message").prepend('<h1>Last channel added!!</h1>');
 
            }
        });
    }
    if (jevent.type == 'StasisStart' && jevent.channel.caller.name == 'app800') {
        $("#message").prepend('<h1>I"m App800!!</h1>');
 
        var channelId = jevent.channel.id;
 
        $.ajax({
            url: 'http://192.168.1.1:8088/ari/bridges/'+channelId+'/addChannel?api_key=userx:12345',
            type: 'POST',
            data: { channel : channelId },
            dataType: 'json',
            success: function(data) {
            }
        });
    }
 
    if (jevent.type == 'ChannelHangupRequest') {
    }
 
    if (jevent.type == 'StasisEnd') {
        var channelId = jevent.channel.id;
        var callDate = jevent.timestamp;
        var intChannelId = channelId.replace(/\./g, '-');
        var statusCellId = 'stCell-'+intChannelId;
 
        $('#'+statusCellId).html('<div class="button hollow">Stasis Done</div>');
    };
};
 
$("#message").append('Ready!<br/>');
 
</script>
 
<!-- begin of tail.html -->
            <div class="row">&nbsp;</div>
      </div>
      <div class="small-1 columns">&nbsp;</div>
    </div>
 
    <div class="row">
      <div class="small-1 columns">&nbsp;</div>
      <div class="small-10 columns"><hr><br/>
        <p class="text-center">Made by <a href="mailto:borodin@unix7.pro">Borodin Oleg</a>&copy</p>
      </div>
      <div class="small-1 columns">&nbsp;</div>
    </div>
  </body>
        <script type="text/javascript" src="js/app.js"></script>
 
<script>
</script>
 
</html>
<!-- end of tail.html -->
<!-- EOF -->