In previous posts, we have looked at some key considerations for building apps for social video calling on mobile devices, and some of the features you can include to make sure your users have a great experience.
Here, we’re going to look in depth at CallKit, a framework for iOS which is an important component for creating frictionless, delightful apps, especially voice and video calling apps.
Part 2 – Creating the best possible user experience for social video apps
In Part 1, we looked at some of the key considerations for building a group live video app for mobile along the lines of Houseparty and Facebook Bonfire, and how the OpenTok platform can provide the solutions to some of the hurdles caused by using WebRTC off-the-shelf. In Part 2, we’ll look at some specific features and code which can be used to create an awesome user experience so your users will fall in love with the app.
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.
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.
When I’m working on developing an OpenTok application, I want to move fast. As a software engineer, I have loads of little workflow shortcuts, scripts, tricks, and favorite tools. When I started to build optk, I wanted to shave off just a couple seconds off of something that I had to do dozens of times a day.
// < ![CDATA[
// ]]>GUEST POST: WebRTC.ventures is a custom design & development agency focused on building WebRTC applications. They are part of AgilityFeat, which is one of our development partners at TokBox. Jean Lescure from their team wanted to share their experiences using our new API for detecting call quality.
Back in August TokBox announced their new Pre-Call API, for testing out bandwidth conditions, and posted a repository on github with a proof of concept. At WebRTC.ventures we saw a great opportunity to build upon that project and got working on creating a demo app out of it, including a server implementation in NodeJS which is compatible with Heroku.
As much as WiFi and cellular network reliability has improved over the years, it’s not uncommon to find yourself in a situation where connectivity drops or is spotty at best. Somehow in our overconnected world, “offline” mode still exists. When you’re using real-time communications technology, poor service or connection quality can be particularly disruptive.
That’s why we’re excited to introduce our Pre-Call Test tool – a set of tools that will determine if an end-user’s OpenTok-powered call will be successful given their network conditions. The Pre-Call Test can be integrated into your application’s workflow so that your end-users can run the diagnostic test before they even join the session. Based on their test results, you can implement business logic that determines whether a particular user is allowed to publish a stream to the session with video, audio-only mode, and more.
The OpenTok.js SDK integrates beautifully into current HTML elements, providing a great variety of layouts and styles. But why should we stick to the traditional 2D design? Modern browsers offer us the power of 3D visualization with WebGL, a technology that has already opened up a new world of interaction and presentation of data within the browser domain.
With an objective to take advantage of the possibilities of 3D within the browser, we created the OpenTok 3D demo. The OpenTok 3D demo is a multi-party video application which shows how we can integrate the OpenTok.js API with WebGL technology using the three.js library. One of the objectives of this demo application is to inspire people building on top of the OpenTok.js SDK, showing them the beginning of endless possibilities on how we can present the video screens in a true 3D world. Cameras, lights, textures, rendering effects, and more, can be leveraged to enrich the final experience.
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
At TokBox we are focused on making life easier for developers and accelerating their development time. We understand that our partners build very complex solutions, and they need our communication expertise and toolkits. Today we are excited to introduce Starter Kits for the OpenTok platform. These include sample code and design and development best practices for implementing the OpenTok platform’s server and client components. Now you can give your development a jump start, but still have the flexibility you need to to customize your implementation however you want.