Friday 18 February 2011

The Phono Blog » How to Build a VoIP-Based Baby Monitor

Two members of the Phono/Tropo team, and soon a third member, have recently added new babies to their families.  Congratulations Mark, Justin, and John!

All of this excitement got the hacker in me thinking…  What would a modern Baby Monitor look like today?  Armed with the Phono (http://phono.com) and Tropo (http://tropo.com) APIs, I started hacking and 2 hours later had the following example application to share with you!

Here’s the link to the demo.  Let us know what you think! http://phonophone.heroku.com/babymonitor.html

Phono runs in the web browser to monitor activity in the room where it is running.  Tropo is used to manage the baby monitor’s conference room (based on the access code) and the dial-in numbers to listen to the baby monitor via PSTN, Skype, SIP, or iNum.  The Phono side of the conference is unmuted so you can hear activity while the Tropo side of the conference is muted.  You can have many people (Mom, Dad, Grandparents, etc.) dialed in listening to the same baby monitor using any combination of the access channels listed above.

Shhh!  This application is using the latest Phono V0.2 release with echo suppression :)

Here is the Phono source used in the demo:

001<html>
002    <head>
003        <meta http-equiv="PRAGMA" content="NO-CACHE" />
004        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
005        <link href="/stylesheets/babymonitor.css" rel="stylesheet" type="text/css" />
006        <title>Phono Baby Monitor Demo</title>
007 
008        <script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
009        <script src="http://s.phono.com/releases/0.2/jquery.phono.js"></script>
010 
011        <script type="text/javascript">
012            var phono;
013            var call;
014            var randomnumber=Math.floor(Math.random()*1001)
015            $(document).ready(function(){
016                phono = $.phono({
017                  apiKey: "f12dc371538c...b43b6c594d",
018                  onReady: function() {
019                    if( ! this.audio.permission() ){
020                                    this.audio.showPermissionBox();
021                     }
022                    $("a.callme").addClass("phono-ready").text("Start");
023                  },
024                    phone: {
025                    onConnect: function(event) {
026                    },
027                    onDisconnect: function(event) {
028                        $(document).trigger("callHangUp");
029                    }
030                  }
031 
032                });
033 
034                $("a.callme").click(function(){
035                    $(".digit-hldr").slideDown();
036                    $(this).hide();
037                    $("a.hangup").show().css("display","block");
038                    makeCall();
039                    return false;
040                });
041 
042                $("a.hangup").click(function(){
043                    $(document).trigger("callHangUp");
044                    return false;
045                });
046 
047                $(document).bind("callHangUp", function(){
048                    (call) ? call.hangup() : call = null;
049                    $(".digit-hldr").slideUp();
050                    $("a.hangup").hide();
051                    $("a.callme").show();
052                });
053 
054            })
055 
056            function makeCall() {
057                numberToDial = "app:9995555538";
058 
059                call = phono.phone.dial(numberToDial, {
060                    headers: [
061                             {
062                               name:"web",
063                               value:"true"
064                             },
065                            {
066                               name:"babycode",
067                               value: randomnumber
068                             }
069                    ],
070                    tones: false,
071                    onAnswer: function(event) {
072 
073                    },
074                    onHangup: function() {
075                        $(document).trigger("callHangUp");
076                    },
077                    onDisconnect: function() {
078                        $(document).trigger("callHangUp");
079                    }
080                });
081            }
082 
083        </script>
084    </head>
085    <body>
086    <center>
087        <h1>Baby Monitor Demo</h1><br/>
088<p>       Access Code: <script>document.write(randomnumber);</script><br/><br/><br/>
089        Voice: (267) 702-4977 <br/>
090        Skype Voice: +990009369991483638<br/>
091        SIP Voice: sip:9991483638@sip.tropo.com<br/>
092        INum Voice: +883510001828861<br/>
093</p>
094    </center>
095        <div id="phono">
096            <a class="callme" href="#">Loading...</a>
097            <a class="hangup" href="#">Stop</a>
098        </div>
099    </body>
100</html>

Here is the Tropo Scripting API source code used in the demo:

01web = $currentCall.getHeader("x-sbc-web")
02babycode = $currentCall.getHeader("x-sbc-babycode")
03 
04if web == "true"
05  mute = false
06else
07  mute = true
08end
09 
10conferenceOptions={
11            :mute=>mute,
12            :playTones=>false
13            }
14 
15#Create conference ID
16conferenceID = "babymon" + babycode.to_s
17 
18answer
19sleep 2
20 
21#Create conference ID
22if web == "true"
23say 'Baby monitor active.'
24  conferenceID = "babymon" + babycode.to_s
25else
26say 'Baby monitor demo.'
27 
28  result = ask "Please enter your access code followed by the pound key.", {
29  :choices => "[1-4 DIGITS]",
30  :terminator => '#'}
31 
32  conferenceID = "babymon" + result.value
33end
34 
35conference(conferenceID,conferenceOptions)

That’s all there is to it!  This was a fun mini-project and using Phono and Tropo made building the VoIP-based Baby Monitor application a breeze!

No related posts.

Tags: , , , , , ,

If you found this post interesting or helpful, please consider either subscribing via RSS, becoming a fan on Facebook, or following us on Twitter.

-->

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

via blog.phono.com

Posted by at

Flickr - projectbrainsaver

www.flickr.com
projectbrainsaver's A Point of View photoset projectbrainsaver's A Point of View photoset