Tadhack madrid June 2014: Joris Swinnen and WebRTC Nederland "Invite my colleagues for video conference" showcase

Invite my colleaguesfor a video conference

A simple showcaseusing APIdaze telecom API’s and video services

Madrid, June 2014

Version 2014-06-04

Tadhack Madrid 6-7 juni 2014, a co-production of @Joris Swinnen and WebRTC Nederland

Our focus: invite our colleagues

How do we invite our colleagues?

• We select their addresses from our CRM• Their photo’s and info is shown• Also some “get in touch buttons”:

– We can reach them by giving each a ring and tell them to join our room at http://webr.tc/

– Or you can send a SMS to join us at http://webr.tc/ in the room mentioned

• We will see you at the VC!

Alex Bischop0031643929097

Rianne Goijarts0031624252548

Bart Uelen0031653644701

Joris Swinnen0032494357825

Send SMSType your SMS text here …

Invite my colleagues for a video conference




Photo Name & phone Call SMS

Components usedPresentation layer: the frontend in our browser

– HTML / CSS / Bootstrap / responsive design– Javascript using WebRTC that process phone call to API– Send SMS using AJAX / JQuery / Javascript

Application layer: the business logic on our server– External XML script for phone call behaviour– PHP module with CURL / HTTP-request to process call to SMS send API– PHP module / CDR handler to collect CDR info when the phone call ends

API layer: the APIdaze telecom API’s at apidaze.io (in the cloud)– Place a call (called by APIdaze Javascript)– SMS send

Video conference service from APIdaze– Join us for a videochat at http://webr.tc/ and enter our room


Cloud based telecom API’s

sms/send

calls

sms_send.php

external scriptXML

(belapp.php)

/tad/index.html

webserver www.goija.com/tad

bel.jssms.js

Send SMS

SMS

calleeCall

Hangup


Cloud based telecom API’s

sms/send

calls

sms_send.php

external scriptXML

(belapp.php)

/tad/index.html

webserver www.goija.com/tad

bel.jssms.js

Send SMS

calleeCall

Hangup


SMS

HTML sample code

General:

<img src="img/alex.jpg“>

<h3> Alex Bisschop </h3>

For the phone Call:

<input id="number_to_call_alex" disabled="disabled" value="0031643929097"/>

<input id="call_alex" onclick="call_alex()" type="button" value="Loading..." disabled="disabled" />

<input id="hangup_alex" type="button" value="Hangup" disabled="disabled" />

For the SMS:

<textarea id="sms_bodytext_alex" placeholder="Type your SMS message here"></textarea>

<button id="sms_button_alex" onclick="sms_alex()">Send SMS</button>

NOTE: Any markup / layout has been removed from this code.

http://www.goija.com/tad/img/alex.jpg

Javascript sample code (bel.js) $("#call_alex").click(function(){ $("#call_alex").attr("disabled", true).val("Busy");

alert("Number to call is " + $("#number_to_call_alex").val());

channel = client.call( { number: $("#number_to_call_alex").val() }, { onAnswered: function(){ console.log("Remote party answered"); $("#hangup_alex").attr("disabled", false); }, onRinging: function(){ console.log("Remote party is ringing"); $("#call_alex").attr("disabled", true).val("Ringing ..."); $("#hangup_alex").attr("disabled", false); }, onHangup: function(){ console.log("Remote party hung up"); $("#call_alex").attr("disabled", false).val("Call"); $("#hangup_alex").attr("disabled", true); document.location.reload(true); // Enforce page reload to circumvent a bug in hangup reset function (or so). } }); });

External XML script (belapp.php)

<document><variables> <tada_case>ID 17 - First speak a message and then dial fixed number. Demo TADhack

Madrid (E).</tada_case> </variables><work><answer/><wait>3</wait><speak>Ola Madrid and welcome to this TAD Hackaton. We will now process your

call.</speak><ringback/><dial><number>" . $number_to_call . "</number> number passed to external script</dial><hangup/></work></document>

Javascript sample code (sms.js) $("#sms_button_alex").click(function() { var v_nr = document.getElementById("number_to_call_alex").value; var v_bt = document.getElementById("sms_bodytext_alex").value; $.get("sms_send.php", The AJAX call to sms_send.php { number: v_nr, subject: "Invitation for conference call", bodytext: v_bt }, function( data, status) { alert( "SMS send return data: " + data + "\n" + "Status returned: " + status + "\n" ); }) .done(function(data) { alert("SMS succesfully send."); // Alert als OK. }) .fail(function(data, status) { alert("Error during sending SMS."); // Alert als error. alert( "SMS send return data: " + data + "\n" + "Status returned: " + status + "\n" ); }) ; });

PHP sample code (sms_send.php)

…... SOME PHP FOR BUILDING THE HTTP REQUEST PARAMETERS TO THE API.…// Set resource URL of API

$api_url = "https://api2.apidaze.io/";

// Set all standard Request Parameters (api_key, api_secret, etc)$api_key = “yyyyyyyy";$api_secret = “xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx";

// Set object representation$api_representation = "sms/send";

$api_method_name = "POST"; // POST for sending SMS.

// Set additional parameters$api_request_parameters = array(

"number" => $v_number,"subject" => $v_subject,"body" => $v_bodytext

);

PHP sample code (sms_send.php)

…... SOME CURL FOR THE HTTP POST REQUEST TO THE sms/send API.…

// Return the transfer as a string curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

// Set the timeoutcurl_setopt($ch, CURLOPT_TIMEOUT,5);

// $output contains the output string $output = curl_exec($ch);

$errorcode = curl_getinfo($ch, CURLINFO_HTTP_CODE);

$logs = "API - CURL error code : ". $errorcode . "\n";fwrite($v_fp, $logs);

if (curl_errno($ch)){ $logs = "API - CURL error code : ". $errorcode . " - " . curl_error($ch) . "\n"; fwrite($v_fp, $logs);}

……

¡gracias

More info can be obtained at:


Alex Bischop0031643929097

Rianne Goijarts0031624252548

Bart Uelen0031653644701

Joris Swinnen0032494357825

Internet

Tadhack madrid June 2014: Joris Swinnen and WebRTC Nederland "Invite my colleagues for video conference" showcase