It’s been a hassle to integrate video conferencing into web applications. Sure, there are solutions available, like long running Skype and Webex or newer things like Google Hangout. What they all have in common are small universes surrounding the core product: Skype requires a signup and a friends list, Webex requires an executive deal, Hangout requires a Google+ account, and so on.
Thankfully, Telenor Digital addresses these limitations with their latest innovation project appear.in, and here’s how we’ve used it successfully in a recent customer project:
Helping Red Cross help school children
Norwegian Red Cross offers “Leksehjelp”, a voluntary service for helping school children with their homework. As of February 2014, they also offer a digital meeting point: Enter the website, choose what kind of homework you’re working on, and meet your volunteer in a video conference.
When my company Iterate was asked to develop www.digitalleksehjelp.no on behalf of Red Cross, our challenge was to connect children and volunteers using as few clicks as possible.
Reactive UX with Meteor.js
Secondly, we wanted to avoid any serious integration challenges. (We love a tech challenge as much as anyone else, but when working for the Red Cross you do want to keep things as inexpensive as possible..)
As it turned out, another customer of ours, Telenor Digital, had just launched a simplistic video conference system called appear.in: Set up a conference simply by appending a word of your choice to the url. Type anything you like after the slash, distribute the URL and check your hair. Like this:
http://appear.in/iterate-blog-post
We chose appear.in because it allowed a speedy, low-budget delivery AND an effective, high-quality user experience. Here’s how we integrated it in an hour:
The technicalities
Our requirements for choosing third party video conference were as follows:
– Ready for dev & testing, right here, right now
– Easy to integrate into webapp
– No trolls: Plugin dependency, user accounts, email verifications, “restart your browser” …
The UX: We chose not to embed the video conference (it would’ve required more dev hours, and coupled us more tightly to a third party system.) Instead, after passing a compatibility check and standing in line for their subject of choice, the pupil clicks a link that opens appear.in in a new browser tab / new window.
3 steps towards more educated school children:
Developed with Lean Startup methodology
1. Include appear.in API to load their compatibility check. These tests are checking a subset of the WebRTC implementation. Full version of this check can be found here.
Put this at the bottom of your <body> tag, to execute it asynchronously and avoid it from blocking the rest of your page.
<script src="http://iswebrtcready.appear.in/apiv2.js"></script>
2. Run the compatibility check (we track failed checks using Mixpanel, but that’s another blog post.)
<script>
API.isAppearinCompatible(function (data) {
if (!data.isSupported) {
$('#notSupportedModal').modal();
mixpanel.track("Did not pass the technical checks");
}
});
</script>
(If it fails, the user get’s an error message)
Technical error message from Digital Leksehjelp
3. Ready to go! See the entire code needed for using appear.in here:
<html>
<body>
<h1>My awesome blog post</h1>
<p>
Is appear.in compatible?
<span id="compatability-test-result">Maybe</span>
</p>
<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script
src="http://iswebrtcready.appear.in/apiv2.js">
</script>
<script>
API.isAppearinCompatible(function (data) {
if (data.isSupported) {
document
.getElementById('compatability-test-result')
.innerHTML = 'Yes, you may enter: <a href="http://appear.in/iterate-blog-post">http://appear.in/iterate-blog-post</a>';
} else {
document
.getElementById('compatability-test-result')
.innerHTML = 'Sorry, you may not enter.';
}
});
</script>
</body>
</html>
Save this as index.html, run it on your favourite web server, or if you have Python installed, use
python -m SimpleHTTPServer 8000
And check it out on http://localhost:8000.
The guys making appear.in also have their own great tutorial.
Discussion
Pros of using appear.in:
-
No login or downloads
-
Easy to “get a room”, easy to implement, easy to check for compatibility
-
Peer-to-peer (not dependent on server), possible to embed the solution if desired
Cons:
-
New product, API could change, Telenor could shut it down ..
-
Supports only Firefox, Chrome and Opera (this is a WebRTC restriction)
Ultimately, appear.in enabled us to develop a quality service within scope. For once, it was also refreshing to integrate something without experiencing any hitches. (Thanks to the Red Cross for a great project, and to the appear.in dev team, for your enthusiasm and support!)
The Iterate Blog 
I don’t agree with the point that it is an hassle to integrate video conferencing into web applications as vendors like RHUB provide web conferencing servers which can be easily used to conduct 15 way HD video conferencing. Its an inbuilt functionality.