In light of the recent Snapchat IPO I thought it would be interesting to see whether it is possible to build a Snapchat-like app using WebRTC in a browser. The good news is that thanks to some new features in modern browsers (Firefox and Chrome) the answer to that question is yes!
To see a demo of my app running go to http://aullman.github.io/snapchat-killer . You can see the source code at https://github.com/aullman/snapchat-killer
Note: this app only really works properly on Chrome and Firefox for the Desktop.
Despite the fact that filters are used a lot in non-WebRTC video applications like Photo Booth and SnapChat, we haven’t seen many WebRTC applications using these types of filters. This is probably because it hasn’t really been possible… until now.
It has always been possible to apply filters to video streams locally using the OpenTok platform by rendering the video into a Canvas element. The problem with this approach has always been that the person on the other end does not see the filter unless you apply the same filter on both the publisher and subscriber video. This would mean significant CPU load if you are subscribing to multiple participants. It also means that you don’t get to see the filters in the Archives.
Web Application Developers are used to being able to write automated tests for their applications and have them run with every PR and before deploying to production to give a level of confidence that things are not broken. OpenTok and real-time applications in general present new challenges when it comes to writing and running automated tests. There are challenges when it comes to getting access to microphones and cameras, testing multiple participants and installing the plugin for Internet Explorer among others.
There has been lots of work around WebRTC testing automation and our friends at rtc.io and &yet have written some great articles on the subject. However these articles don’t cover some of the specifics of testing OpenTok applications for example testing Internet Explorer and installing the OpenTok plugin for Internet Explorer. If you haven’t already I would recommend taking some time to read the articles by the folks at rtc.io and &yet before coming back to this. Also if you’re not familiar with Travis and Selenium WebDriver you might want to check those out too.
We’re big fans of Angular JS at TokBox and we have been using it internally to build applications for quite some time. It’s a fantastic framework for building Single Page Web Applications – since all OpenTok Applications are Single Page Web Apps they work really nicely together. This post is going to be based largely on our experience writing meet.tokbox.com, our own video meeting tool we use internally. The code for meet.tokbox.com can be found at https://github.com/aullman/opentok-meet
We always want to share as much as possible with our community so today we’re sharing a description of how we developed the opentok-editor collaborative editor using ot.js and CodeMirror. You can see the editor in action at meet.tokbox.com and you can see how to use it for yourself at the opentok-editor github page. We love to see people using our open source projects so please feel free to file issues and contribute pull-requests to this project on Github.
The latest OpenTok application, which comes out today, is Meet Me Under the Mistletoe, created by McKinney. We thought we would highlight it here because it’s a unique and interesting use of the OpenTok API – plus it’s a really fun application! “Meet Me Under the Mistletoe” is a two party OpenTok Session with the added ability to take screenshots of you and your sweetheart, like an “old timey” photo booth. You invite someone to the Session (under the mistletoe) and when you are both there, four screenshots are taken of the two of you doing your thing (under the mistletoe). You get the idea, definitely worth checking out.
The nice thing about loading a SWF within another SWF is that it becomes another element on the Stage that the developer can manipulate, apply filters to and, in this case, can use the BitmapData Class to take screenshots. This is the beginning of another platform for OpenTok. Currently the ActionScript library is in alpha. If any developers out there are interested in building something using OpenTok within Flash, let us know and we can see about making it available.
Hats off to the McKinney guys for putting together such a clean, polished application. Now I’m off to try and convince my wife to join me under the mistletoe…