tadhack madrid june 2014: joris swinnen and webrtc nederland "invite my colleagues for video...
DESCRIPTION
Tadhack madrid June 2014: Joris Swinnen and WebRTC Nederland "Invite my colleagues for video conference" showcase. Or how to invite your colleagues to a video chat room by giving them a phone call from a webpage or sending an SMS from the same page using WebRTC and telco API's.TRANSCRIPT
![Page 1: Tadhack madrid June 2014: Joris Swinnen and WebRTC Nederland "Invite my colleagues for video conference" showcase](https://reader035.vdocument.in/reader035/viewer/2022070320/55893d2dd8b42a40428b45e1/html5/thumbnails/1.jpg)
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
![Page 2: Tadhack madrid June 2014: Joris Swinnen and WebRTC Nederland "Invite my colleagues for video conference" showcase](https://reader035.vdocument.in/reader035/viewer/2022070320/55893d2dd8b42a40428b45e1/html5/thumbnails/2.jpg)
Our focus: invite our colleagues
![Page 3: Tadhack madrid June 2014: Joris Swinnen and WebRTC Nederland "Invite my colleagues for video conference" showcase](https://reader035.vdocument.in/reader035/viewer/2022070320/55893d2dd8b42a40428b45e1/html5/thumbnails/3.jpg)
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!
![Page 4: Tadhack madrid June 2014: Joris Swinnen and WebRTC Nederland "Invite my colleagues for video conference" showcase](https://reader035.vdocument.in/reader035/viewer/2022070320/55893d2dd8b42a40428b45e1/html5/thumbnails/4.jpg)
Alex Bischop0031643929097
Rianne Goijarts0031624252548
Bart Uelen0031653644701
Joris Swinnen0032494357825
Send SMSType your SMS text here …
Invite my colleagues for a video conference
Send SMSType your SMS text here …
Send SMSType your SMS text here …
Send SMSType your SMS text here …
Photo Name & phone Call SMS
![Page 5: Tadhack madrid June 2014: Joris Swinnen and WebRTC Nederland "Invite my colleagues for video conference" showcase](https://reader035.vdocument.in/reader035/viewer/2022070320/55893d2dd8b42a40428b45e1/html5/thumbnails/5.jpg)
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
Tadhack Madrid 6-7 juni 2014, a co-production of @Joris Swinnen and WebRTC Nederland
![Page 6: Tadhack madrid June 2014: Joris Swinnen and WebRTC Nederland "Invite my colleagues for video conference" showcase](https://reader035.vdocument.in/reader035/viewer/2022070320/55893d2dd8b42a40428b45e1/html5/thumbnails/6.jpg)
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
Tadhack Madrid 6-7 juni 2014, a co-production of @Joris Swinnen and WebRTC Nederland
![Page 7: Tadhack madrid June 2014: Joris Swinnen and WebRTC Nederland "Invite my colleagues for video conference" showcase](https://reader035.vdocument.in/reader035/viewer/2022070320/55893d2dd8b42a40428b45e1/html5/thumbnails/7.jpg)
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
Tadhack Madrid 6-7 juni 2014, a co-production of @Joris Swinnen and WebRTC Nederland
SMS
![Page 8: Tadhack madrid June 2014: Joris Swinnen and WebRTC Nederland "Invite my colleagues for video conference" showcase](https://reader035.vdocument.in/reader035/viewer/2022070320/55893d2dd8b42a40428b45e1/html5/thumbnails/8.jpg)
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.
![Page 9: Tadhack madrid June 2014: Joris Swinnen and WebRTC Nederland "Invite my colleagues for video conference" showcase](https://reader035.vdocument.in/reader035/viewer/2022070320/55893d2dd8b42a40428b45e1/html5/thumbnails/9.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). } }); });
![Page 10: Tadhack madrid June 2014: Joris Swinnen and WebRTC Nederland "Invite my colleagues for video conference" showcase](https://reader035.vdocument.in/reader035/viewer/2022070320/55893d2dd8b42a40428b45e1/html5/thumbnails/10.jpg)
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>
![Page 11: Tadhack madrid June 2014: Joris Swinnen and WebRTC Nederland "Invite my colleagues for video conference" showcase](https://reader035.vdocument.in/reader035/viewer/2022070320/55893d2dd8b42a40428b45e1/html5/thumbnails/11.jpg)
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" ); }) ; });
![Page 12: Tadhack madrid June 2014: Joris Swinnen and WebRTC Nederland "Invite my colleagues for video conference" showcase](https://reader035.vdocument.in/reader035/viewer/2022070320/55893d2dd8b42a40428b45e1/html5/thumbnails/12.jpg)
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
);
![Page 13: Tadhack madrid June 2014: Joris Swinnen and WebRTC Nederland "Invite my colleagues for video conference" showcase](https://reader035.vdocument.in/reader035/viewer/2022070320/55893d2dd8b42a40428b45e1/html5/thumbnails/13.jpg)
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);}
……
![Page 14: Tadhack madrid June 2014: Joris Swinnen and WebRTC Nederland "Invite my colleagues for video conference" showcase](https://reader035.vdocument.in/reader035/viewer/2022070320/55893d2dd8b42a40428b45e1/html5/thumbnails/14.jpg)
¡gracias
More info can be obtained at:
Tadhack Madrid 6-7 juni 2014, a co-production of @Joris Swinnen and WebRTC Nederland
Alex Bischop0031643929097
Rianne Goijarts0031624252548
Bart Uelen0031653644701
Joris Swinnen0032494357825