Webcam Toy: From one to two million likes
My web-based photo taking app Webcam Toy now has over two million likes on Facebook! It’s taken 3 months to go from one to two million likes, yet it took double that, around 6 months, to go from hate mail to one million likes. So this is another good juncture for a quick update on Webcam Toy’s progress so far.
New additions
A few new effects have been added, including a favourite of mine called “Disco” which is now one of the top used effects in the app. I also updated the app icon thanks to the super skilled designers at SoftFacade.
Webcam Toy icon before and after
The usage of the app continues to trend upwards from where it started in July 2011. It now has over 1.7 million photos downloaded per day, 1.4 million photos posted to Facebook per day and 40,000 photos tweeted per day. The app page now receives on average 1.2 million page views per day.
The HTML5 journey
The HTML5 version of the app is for the most part complete and ready to replace the current Flash version, but there have been many problems to hurdle to get to this point:
- The HTML5 camera API getUserMedia is currently only available in Google Chrome. Mozilla is working on adding the API to Firefox. Opera 12 has the API but it doesn’t have WebGL (which the HTML5 app also needs). But even with this limited support it’s been a useful period as I’ve been able to trial the HTML5 version to those few people who use the app with a capable browser.
- Around two-thirds of all visitors use a browser that is capable of WebGL. This is lower than I imagined considering most people use Chrome or Firefox. My guess is that this is due to some users having old graphics cards or drivers that aren’t capable of running WebGL.
- If the user’s browser is capable of running WebGL it still may not be able to compile all the GLSL fragment/pixel shaders used by the effects. Some Windows PCs cannot compile shaders that are more complicated than 64 instruction slots. This means any PC user with old DirectX drivers, which counts for about 16% of all WebGL-capable browsers. So that knocks the HTML5-capable percentage down a little more.
- Another issue is being able to use floating point textures (the OES_texture_float extension in WebGL). This is important if you want to create certain effects that use multiple shaders. Around 14% can’t so that knocks the total percentage down even more.
- If you use Windows (as most people do), the WebGL calls have to be rewritten at runtime to work with DirectX. Modern WebGL-capable Windows browsers come with ANGLE which does the hard work for you, but it does impact the performance for some effects. Any effect that requires multiple pixel sampling (such as blurring for a soft focus or tilt-shift effect) are very slow. On Macs, where OpenGL is a native part of the OS, WebGL flies.
- Finally, if all this works, the WebGL context may be lost at any time. The graphics card could simply give up on you, and your app must be ready for it. So there’s no guarantee the app will work perfectly, even if all the other conditions are met.
So as you can see, it’s not as simple as it could be. In contrast, Flash will handle all these problems and inconsistencies. In HTML5 the developer must handle all the WebGL graphics card idiosyncrasies and all its ugly possible scenarios. The trade off is a better user experience as the HTML5 does, in my opinion, work much more smoothly and better than the Flash version.
Errors have been tracked and reported via Google Analytics which has allowed me to gain a wealth of information that I would never have been able to duplicate on my own development machines. The feedback during this “soft launch” period has been invaluable.
10,000 concurrent users
The biggest technical headache has been merely to keep the website running. At peak hours the site receives around 10,000 concurrent visitors. My website is a typical Linux, Apache and PHP set up on a shared server, and it struggles under the load. It can handle the bandwidth and hosting well, and the site needs very little maintenance. I use a CDN to load balance the static files (CSS, JavaScript files, images etc.) but the homepage itself still needs to be served from one main sever. Here, Apache is a bottleneck.
If you can throw money at the problem, Apache can cope with the C10k problem (10,000 concurrent users). Fortunately another web server called NginX (pronounced Engine-X) came to my rescue. I’m still in the process of moving Webcam Toy from my server at neave.com and onto a new separate NginX sever and website, but it should see me through well above C10k if it ever gets more popular. I’ll write more about those shenanigans next time!
