Conquering Enhanced WebRTC API with Story Time
Guest Post by JeanCarl Bisson, Developer and Co-founder of Sleek-Geek Inc.
I recently attended an AT&T DevLab session in Sunnyvale on WebRTC. There were two sessions that day, both packed with developers and non-developers excited to learn about WebRTC. For myself, I wanted to finally conquer WebRTC.
I’ve followed WebRTC’s progress over the past year or so, and I have never really grasped how I could use it. The technology either felt too young or didn’t offer enough capability for me. However, in just the first 90 minutes of the DevLab, I was able to go through the seven self-paced labs and get a video chat working. I was particularly impressed when I was able to talk on the phone and web interface at the same time! That was different and innovative.
Mastering WebRTC One Step at a Time
At the beginning of the session, AT&T handed out a workbook with detailed steps that progressively built the video chat in bite-sized pieces. For example, the first step was to register an app with the AT&T Developer Program. Step two got the Node.js server up and running, followed by the third step, which established user authentication. Making a phone call to a mobile device and receiving an incoming call were steps four and five. The final two steps in the process added holding and resuming call capability as well as muting and unmuting capability.
What was great about this progressive process was that at the end of each step you could see the progress and could play around with the additional capabilities. Since each step made small changes, it was also easy to debug any small problems that arose. One hiccup I quickly discovered was related to Cross-Origin access controls where I had to specify the IP address of my app in the AT&T app settings. And if you needed help, AT&T staff was readily available.
After completing the seven labs, I took advantage of the extra time with AT&T staff and started rewriting the examples in AngularJS. The translation wasn’t too complex. Before I knew it, the DevLab was over.
Using Enhance WebRTC and WebSockets to Bring Story Time into Focus
As one of my side projects, I’ve been learning AngularJS and Node.js. In something I call the “15 Projects in 30 Days Challenge,” I tasked myself with building 15 rapid prototypes in a month, using AngularJS, Node.js and various APIs I’ve seen at hackathons, but never really explored. It was like back-to-back hackathons for a whole month!
After the DevLab, I went home and started working on a hack I called Story Time. The goal of Story Time is to connect a travelling parent with their child for a remote bedtime story. It uses the video chat from AT&T’s Enhanced WebRTC platform along with WebSockets to share the experience of reading pages of a book, connecting the parent with child remotely.
Since I had the Enhanced WebRTC API capability already working, I just had to figure out how to share the book the two participants would read from. If anyone has ever tried sharing materials over video chat, you may have had to switch back and forth between the view of your face and the view of the book. Clearly, this is an opportunity to get motion sick, and a chance to miss the lightbulb moment when a kid gets excited.
So I prototyped a layout where the video was on the left side of the screen, and the example book was on the right side. I added a next and previous button to navigate pages. Whenever one participant turned the page, I sent a message across the WebSocket channel to the other participant, which turned the page automatically.
By the end of the day, I had a functioning video chat and book-sharing hack. You can view my project on GitHub and my blog post detailing the process. Of course, like any hack, there are plenty of enhancements that could be added and things to spruce up.
Ideally, you could choose the content you want to share. In another project, I used Box’s View API to load PDF and Word documents that contained story content. Box’s API takes a variety of file formats and converts them into a web-friendly version to be displayed on a webpage. I’m planning on combining the two projects with additional features.
The WebSocket channel could also support additional messages that notify the participants of actions being taken. Maybe when a participant clicks on an image of a pig in the story, it would play an “oink oink oink” sound to everyone. The possibilities are endless, and just require a little fairy dust (ahem, code) and imagination.
I’m excited to see where AT&T is taking its Enhanced WebRTC API, and to see how browsers provide powerful built-in capabilities to build engaging and rich experiences. What have you built with AT&T Enhanced WebRTC API? Let me know in the comments!
Interested in attending an AT&T Hackathon or DevLab? Find upcoming events in your area here. Curious to read another perspective on the DevLab experience? Read What I learned at My First DevLab Might Surprise You.
JeanCarl Bisson is a web developer and Co-founder of Sleek-Geek, building mobile tools and games for the classroom. His team built the Read With Me app, a reading assessment platform, and won first place at an AT&T mobile education app hackathon. You can view the 15 projects JeanCarl developed in just one month on his blog. Read his other AT&T Developer Program guest blog posts: What to Expect at Your First Hackathon and Futurecast at the AT&T Foundry: Nir Eyal and Habit-Forming Products.