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!

From Hate Mail to 1 Million Likes

Wow. Webcam Toy now has more than ONE MILLION LIKES on Facebook!

I am stunned! Only 5 months ago, Webcam Toy didn’t even have a Facebook page. 10 months ago I was being sent hate mail for making such a poor app!

So why the turnaround? How did it go from zero to one million likes so quickly?

At first glance the app is very simple: take photos with your webcam, add some funny effects or nice filters and share on a social network. It’s not even a new idea. Instagram, Photo Booth and loads of other apps have done this before, yet despite the competition Webcam Toy is a huge success and continues to grow in popularity.

I think this is a good milestone to reflect on Webcam Toy’s progress, to share my story of ups and downs, and to hopefully encourage fellow developers who are thinking of making their own app.

Zero likes

I created Webcam Toy in July 2011 after redesigning the rest of my website, Neave.com. It was adapted from a similar app I had already created called “Neave Webcam” which allowed people to record 3 second video clips of themselves and add them onto a wall of other user’s clips. The interaction between people on a large, shared grid of video clips was great fun, however some people uploaded rude videos and I eventually had to remove the wall.

People hated this new “Webcam Toy”. It only had 30 effects, you couldn’t take photos and you could only view yourself. I added the app to the newly launched Google Chrome Web Store, following a reasonable success with another web app called Planetarium, but it was getting panned with 1 star reviews. So with damage limitation in mind, I pulled it down after a week.

I was inundated with complaints, some exasperated, some hateful, incredulous that I dare remove functionality from the app they loved. I never knew! It was a small audience but a vocal one. People are loathe to unexpected change.

Take a photo

In an attempt to assuage the angry emails (and some more polite requests) I hastily added the ability to “take photos” — you know, pausing the live video and presenting a still image in a white border to make it look more photo-like.

A little while later I added a download button so people could save photos to their computer. Then I set to work studying the Facebook Graph API and soon managed to add a button that allowed people to upload photos to directly to Facebook from within the app. I quickly put up a Facebook fan page too. Why not, I thought. It can’t hurt.

Without any respite, Twitter announced their own photo sharing service so I quickly added the option to upload to Twitter too. I had to learn about OAuth, cross-domain resource sharing, bandwidth issues and loads of other little details, but I got there in the end. Each tweet also contained the #webcamtoy hashtag, which turned out to be a great way to see other people’s photos.

Since then, Webcam Toy has grown in popularity purely by word-of-mouth. I’ve made no effort to promote the app aside from the odd tweet or Facebook update. I added more effects over the next few months, from its initial 30 or so effects to where it is now at over 60. My only focus was to make the app simple, elegant, quick and easy to use.

Too popular

All was going well until March when my server started to strain under the ever increasing traffic. At weekends when there were over 6,000 visitors at any one time, my server frequently crashed. After a lost week of panic and digging around to find what I could do to fix things, I found the problem was all down to the way in which photos were uploaded to Twitter.

Facebook’s API allows apps to upload images directly to its servers, but unfortunately Twitter’s API doesn’t. To post an image to Twitter you need to upload the image to your own server first, then post it across to Twitter’s servers. This uploading activity was crippling my site, so I quickly rented a new server and started using it exclusively for uploading images to Twitter. Webcam Toy and I both breathed a sigh of relief.

The stats

Despite the setback with Twitter, things really took off with Facebook. Without Facebook I doubt my app would be anywhere near as popular as it is today.

So for the curious, here are some stats:

• The Facebook page went from zero to 1 million likes in 5 months. I only created the page in late December 2011.
• Webcam Toy has around 500,000 page views per day, which goes up to around 800,000 page views per day on weekends.
• Around a further 80,000 people use the Chrome Web Store app every day. According to Google that’s around 750,000 active users. My advice: don’t ignore the Chrome Web Store. Web apps are as valid as native apps.
• 100,000 people post photos to Facebook every day. According to Facebook’s stats, that’s around 1 million monthly active users.
• 600,000 photos are uploaded to Facebook every day. On weekends that figure almost doubles to over 1.1 million photos per day — I mean, wow, that’s about 12 photos per second! Kids are the main users, so usage goes up after school and at weekends.
• Since its launch, 105 million photos have been downloaded (saved to the computer), 75 million photos posted to Facebook, and over 1 million photos posted to Twitter. Proof, if any were needed, that Facebook is the dominant photo-sharing social network.
• 20,000 new Facebook “installations” (new users) every day.
• Around 5,000 new Facebook likes per day, but it varies a lot.
• The main demographic is South American teenage girls! Well, I never intended to target this audience, but I guess the simple identity, the sociability of Facebook, and the fact that my site has been localised into Spanish helps explain this.

There are plenty more stats, but you get the point. It’s doing rather well, and doing better all the time. Here are a few graphs from my Google Analytics, tracking usage from October 2011 to May 2012:

As you can see the traffic yo-yos every week, peaking on Saturdays. The Christmas and Easter breaks meant that kids could use the app every day, so there was more sustained usage. And in retrospect, you can now see where the number of photos posted to Twitter faltered as my server struggled.

To the next million!

So there you go. One million likes on Facebook. Not bad for an app that’s made in Flash — yes, Adobe Flash — and is only available online, in the browser. It doesn’t work on mobile. At all. It flies directly in the face of the perceived wisdom that native mobile and HTML5 are the only ways to make a successful app these days.

Having said that, recently I have been busy making an HTML5 WebGL version of Webcam Toy which should replace the Flash version in a few months once the new HTML5 device API is available in modern browsers (Internet Explorer users will still get the Flash version as IE doesn’t support WebGL). I also hope to make a native mobile app eventually.

My lesson to developers is simply this: make a great app and people will use it. Make it in Flash. Make it in HTML5. Make it in native code. Make it work on mobile only, or desktop only. However and wherever you do it, find your niche and make a neat, simple app that does one job very well. Listen to your users and improve and iterate. And don’t be put off by competition. There’s plenty of room out there for your app too.

The Webcam Wall

I updated my site recently and some people are upset that the old Neave Webcam section has changed. Sorry about that. Sadly I had to remove the video “wall” part as there were far too many people recording rude (and even hardcore pornographic) videos onto it.

The site is visited by people of all ages, but especially children. It was horrible to see videos of young kids right next to some old man getting his flappy bits out, or worse, some internet porn uploaded via the webcam. I really don’t want that kind of website, so it had to go. There were ways to ban people (I could track the IP address of videos and ban them) but this hardly ever worked reliably. And there was no way I could police the video wall 24/7 by myself.

So for the moment, Webcam Toy is its replacement. You can still play with the cool effects, but there’s no recording option. I plan to add more features to this new section soon so you can share your video clips on Facebook and Twitter and YouTube, and you’ll be able to take photos and download them to your computer too.

This isn’t ideal. I loved the way people interacted on the video wall. But it had to go. It was the same problem for Chat Roulette. Unfettered access to a webcam invariably involves rudeness!

I hope you understand my decision and are patient with me, and I hope you can enjoy the Webcam Toy effects until more features are added.