What I Learned at My First (WebRTC) DevLab Might Surprise You
By John Hsia, Senior Product Marketing Manager for the AT&T Developer Program
If you’re like me, you’ve probably heard a lot about AT&T DevLabs, but have been too busy to attend them. With a DevLab right in my backyard (Seattle), with an opening in my schedule, and with an interest in getting some hands-on programming with the new WebRTC APIs, I took the leap and drove down to the Fremont Foundry for my very first DevLab.
Chocolates, Trolls, and Lenin
The Seattle DevLab was held at the Fremont Foundry across the street from Theo Chocolate in one of Seattle’s more eclectic neighborhoods – Fremont. Driving to the Foundry, we couldn’t miss the 16-foot bronzed statue of Vladimir Lenin – originally from Czechoslovakia, this is the only statue of the Communist leader in the US. Later, I learned that this statue was reconstructed in the smelters of the Foundry where we would try out WebRTC API calls. In addition to generous samples at Theo Chocolate (which warranted a quick detour), Fremont is also home to the Fremont Troll – an impressive 18-foot sculpture of a troll below an actual bridge clutching a real VW beetle. Enough about Fremont, let’s get to the DevLab.
DevLab Check-in and Lunch
I was greeted at the registration desk by Ernie Flowers who promptly checked me in. Ernie organized this DevLab and has a hand in organizing most of the DevLabs in the US. He handed me a detailed workbook (more on this later), a USB thumbdrive containing code samples and the necessary installation files. He also gave me some AT&T Application Resource Optimizer (ARO) giveaways and directed me to the lab. The lab was held in the old smeltering facility of the Foundry, which was redone as a large banquet hall. I found a seat at one of the dozen or so tables and set up my laptop. I had a bit of time before the lab started so I networked with some of the other attendees and grabbed a tasty sandwich from the lunch buffet.
What is WebRTC
Before we get more into the lab experience, you might be wondering what WebRTC (Web Real Time Communication) is. You can click this link for a complete description, but essentially, it’s an API that allows you to add communication functionality such as audio and video calling capabilities to your browser or app so your customers can call other WebRTC-enabled browsers and apps. For the lab, we modified an existing web page to include making and receiving audio/video calls, holding/resuming calls and muting/unmuting calls – though some of these tasks were left as homework.
The lab started with a short overview of the AT&T Developer Program by Michael Pacholec after which we quickly jumped into the lab. Led by the developers of WebRTC (Raj Sesetti and Rajender Saini), the afternoon consisted of:
Set Up: We registered for an AT&T Developer account and received a premium access code good for one year access to WebRTC and other AT&T Developer APIs.
Lab 1: Registered our test domain and our app with WebRTC.
Lab 2: Set up, configured, and started our server (Node.js for the purposes of the lab). Everything we needed was on the thumbdrives provided earlier.
Once we finished set up and configuration, we started with the real fun…
Lab 4: Added Audio and Video Calling. Again, they made this easy with code snippets. We called the phone.dial() and phone.hangup() methods to accomplish this. With a few minutes of work, I was able to call my mobile phone. This was pretty exciting given the amount of work involved. While we did add video calling, we couldn’t try it since we didn’t add the ability to receive calls yet.
This was the first run of the lab so due to some on-site challenges, we didn’t get to try the remaining labs, but we all left with a copy of the workbooks. I look forward to trying out the remaining labs.
Lab 5: Receiving Calls. According to the workbook, by the end of this lab, you’ll be able to receive audio and video calls from within the browser. Methods to be called include phone.answer() and events implemented include call:incoming.
Lab 6: Holding and Resuming Calls. Not surprisingly, the methods used in this lab include phone.hold() and phone.resume().
Lab 7: Muting and Unmuting Calls. Phone.mute() and phone.unmute() are covered.
One more method not covered is phone.move(). With this method, you can start a call from a browser and then if you were to leave the house, a call can be moved to another endpoint without having to hang up and make another call. For example, from a pc to a tablet or AT&T mobile phone (this latter functionality is currently not available, but will be released soon).
Help and Plantronics Demo
Throughout the labs, there were lots of lab assistants to answer questions and give us the right clues, so most of us were able to keep up. In my case, I wasn’t sure which directories to drop some files in. Other than that, I wasn’t much of a drain on the lab assistant’s time.
Oh yeah, the AT&T speakers and the folks at Plantronics put together a demo demonstrating how the phone.move() method could be used with their headset. During WebRTC calls with the headset, if the headset got out of Bluetooth range, the app would move the call to your mobile. This seems like a pretty reasonable use case. I’m sure you might have even more creative ideas on how the move method could be used.
Final Thoughts on the DevLab
Over the course of three hours, I was able to set up my laptop, work through four of the labs and walk away with a working WebRTC client. While I didn’t have enough time to complete the last three labs in class, I’m confident that the workbook and the code snippets on the thumbdrive will make this a relatively trivial task. The alternative to the DevLab would have been many hours or possibly a few days of wading through on-line documentation, videos, and web pages without the payoff of successfully trying out the APIs, and without direct access to the subject matter experts. On my own in three hours, I might have completed the set up… maybe. Add in the networking opportunity and the fun, eclectic location and I’d say this was time very well spent.
“Statue of Lenin Seattle” by Original work: Emil VenkovDepiction: InSapphoWeTrust at Flickr – http://www.flickr.com/photos/skinnylawyer/8002254736/. Licensed under CC BY-SA 2.0 via Wikipedia – https://en.wikipedia.org/wiki/File:Statue_of_Lenin_Seattle.jpg#/media/File:Statue_of_Lenin_Seattle.jpg