Sweet Combination of Annyang JS WebRTC and Plivo APIs

What are we building?
            - A simple webpage which allows someone to call directly from browser without typing any key!


Tools/Resource needed: 

1. Annyang JS
2. An Endpoint/SIP URI(I chose Plivo)
3. Django
4. A Web Server

Time Required: 2 Hrs

• If comfortable with basic python
• If comfortable with basic django web framework. 
• If comfortable playing around with HTTP REQUESTs, APIs
• If comfortable with basic js
• If comfortable with basic css
• If comfortable with basic html

Why would I make it?

         - Its an idea dude! Its all upon you how you can use it.

Basic call flow?

• Homepage

• Click here for description:

• Homepage#description:

• Speaking "Call" will take you to call page:

• Now say "Call Number <any regular phone number>"
  Eg: Call number 120xxxxxxxx.
  If the remote party gets the ring then:

• Once the call is connected dialpad will popup with a smooth fade in:

• After call completion:

Cheers to all!

GitHub Link: https://github.com/keshavagrawal89/command_plivo

Disclaimer: Numbers shown in the image are just for the purpose of demo. DO NOT CALL THOSE NUMBERS. I don't take responsibility for any hassles which you can face ;)

Call Tracking

What are we building?
            - A very basic Call Tracking Module. When I say very basic - i mean it. But this will give you an idea for sure how to improvise over the same and build a powerful call tracking.

Tools/Resource needed: 

1. VoIP Number(I chose Plivo)
2. Django
3. A Web Server
4. A database(PostgreSQL?)

Time Required: 3 Hrs

• If comfortable with basic python
• If comfortable with basic django web framework. 
• If comfortable playing around with HTTP REQUESTs, APIs
• If comfortable with basic js
• If comfortable with basic css
• If comfortable with basic html

What is call tracking?

         - Basically I advertise 5 different numbers at five different places and wait for people/consumers to call those numbers. And I have to track which number was called maximum number of times and get an idea that this zone/field gets me the exposure better than other advertised areas.

Basic call flow?

• For that we need to understand a bit of Plivo call flow. I will not talk in much detail but would try to write in plain english and simple steps.

1. I create an account on Plivo.
2. I make the payment and upgrade my account to "Standard" account.
3. I buy 5 numbers.
4. I create a new application.
5. Under plivo application(hangup_url) I provide url of my server application: http://myserver/url/  Why?
   When I publish these 5 numbers in 5 different places and people start calling Plivo will forward the call details via HTTP REQUEST (GET/POST depends what you configure under applications page mentioned above.) to this hangup_url after the call completes.
6. I catch those information in my web application(Plivo will send HTTP REQUEST to my url - My server app read the request params and does the xyz...)
7. Push them into the db
8. Use some good JS libraries in the market to draw graphs out of these data.
9. Finally I get the idea after looking at the graph
         - oh! this number is the one who is getting most of the calls most of the time. May be we should focus at this advertised area and put our good sales guys here to get the leads.
         - oh! this number is getting the least response..hmmm. May be I should put one of my best sales guy here to make it happen in this advertised area as well.

A basic UI to enter new Call Tracking Numbers in the DB along with Zone. Example? Oh I am pretty sure the UI snapshot will make you understand what I am talking about

Also the page where the graph is shown can contain a simple "Send Report" button which can be configured to send an email of the generated graph to the admin. Example?

And then with the help of mailgun APIs you can easily send mail with this image :)

I am not going to explain code flow and programming here. For that I have provided the hyperlink for my github page. One thing you may find confusing is the name on my github page: "django_plivo_click_to_call_tracking"  - Yeah I started writing a simple "Click To Call" application looong back. Then I thought lets include in this call tracking kind of module. So its up to you how you can isolate out the call tracking module ;) or Just read this - get the idea - and build one of your own!

Cheers to all!

Disclaimer: Numbers shown in the image are just for the purpose of demo. DO NOT CALL THOSE NUMBERS. I don't take responsibility for any hassles which you can face ;)