We introduced video calling today. It’s my first project since joining Facebook in the Seattle office nine months ago. It was an exciting challenge to create a way for people on Facebook to instantly call any friend or family member anywhere in the world.
I focused on overcoming a few key technical hurdles to make the following possible:
- Most users should complete the installation in under three clicks and 30 seconds.
- You only need your Facebook account; no additional logins are required and you’re already connected with your friends.
- You can call friends quickly and it’s built right into chat, so all your conversations start from the same place.
Installation Flows for Each Browser and OS
To make installation as easy as possible, we specifically customized the installation flow for each OS and browser combination. For instance, on Mac browsers with Java enabled, the installer is hosted entirely within the browser so that no additional clicks are required. We use a small bootstrap EXE in Windows browsers to minimize the initial download time and to manage installation permissions as seamlessly as possible. We also put the entire installation flow inline with the feature itself, instead of requiring a separate download and installation page, so that your call automatically continues once installation completes.
Protecting User Identity
To ensure that you can make a call without needing a separate Skype account, Facebook connects to Skype’s secure REST APIs using encrypted user IDs to set up the necessary credentials. This opens up the possibility of video calling to users who might never have used Skype before, and makes the overall calling experience much simpler for everyone. While it would have been easier to give user IDs directly to Skype, we instead went to great lengths to make sure users are protected and anonymous on Skype’s service.
Overcoming Coding Challenges
There were a host of interesting issues involving client-side state management that traditional Facebook features have not had to handle. Because the video calling plugin runs as a client application, Facebook’s JavaScript can no longer rely on the full state coming predictably from Facebook’s servers. Instead, the JavaScript now coordinates (and adjudicates, in cases of conflict) various asynchronous interactions between the server and the plugin. This would have been made much easier by elements of HTML5 like sessionStorage, which we had to leave out today in order to have the feature work for as many users and browsers as possible.
It may seem at first that the code to establish a video call should be relatively straightforward. And indeed it is, if you assume the user is only logged onto one machine, using only one tab in one specific type of browser, on one particular operating system version with no other special software installed. However, the possibility of the same user being on multiple browser tabs or multiple machines complicates things quite a bit. Operating system vagaries like Windows User Access Control or Mac FileVault complicate installation. Various browsers handle plugins a bit differently from each other. Things get even more complicated once you account for things like how to handle new inbound calls while an outbound call is being established, or what to do if a friend calls while you’re already on a separate call on another machine.
One of the more complicated pieces of code to get right was the code that installs the plugin inline with the feature, making an outbound call as soon as installation completes. Some browsers automatically reload the page once a new plugin is installed, while others only do so sometimes. For instance, Chrome only reloads a page on Windows if any of its tabs are showing a page that has a plugin loaded, even if that plugin has nothing to do with video calling. We went through many different designs to minimize reloads whenever possible, and to survive reloads when necessary. It’s a great example of the type of software design that would be incredibly simple if you could assume only one browser tab was ever used, or that you could use something like HTML5 sessionStorage to bind state to a particular tab. These and other complications made the feature’s design challenging.
Although I was the only full-time engineer on the video calling project, I had help from Paul Shen, Rahul Iyer, and Vijaye Raji. Paul created much of the UI on the site, while Rahul and Vijaye specialized in optimizing the install experience on Mac and Windows. As my first project at Facebook, I’m amazed that so few engineers are needed to put together such a fun and useful feature. I had a ton of autonomy to create the feature, and video calling was especially meaningful to me as an engineer in Facebook Seattle — we used it all the time while developing it!
I hope you enjoy video calling and that it brings you closer to the people you love.
Philip Su, a software engineer, is building more ways for friends to stay connected and to deepen meaningful relationships.
