We recently released the latest version of our Client SDKs, v2.13.0 and I wanted to share some of the great new features that have gone out with this release.
Custom Media Streaming
With v2.13.0 of opentok.js we have added the ability to pass a custom audioSource and videoSource when you create a Publisher. The custom audio and video source are MediaStreamTrack objects. This enables quite a few different use cases that our customers have been asking for.
We get a lot of requests from our customers for examples of how to use OpenTok in their framework of choice. I’m here to tell you today that we are answering your pleas in 3 of the most popular Web frameworks out there: React, Angular 5 and Vue.js.
You can find the new sample apps in our Web Samples Github Repository.
When anyone builds a multiparty video chat application they pretty quickly run into the issue of how to lay out the many different participants. You want everyone to be visible to everyone else and you also want video to take up as much space as possible, without wasted white-space. In the web you have the additional complexity of lots of different display sizes. Participants can be on a mobile device or tablet, or even just resizing their browser window so that they can see something else beside the video chat. For this reason you want a layout algorithm that is responsive.
Our good friend Philipp Hancke wrote a great post recently on a WebRTC audio bug that has been plaguing Chrome on MacOS for the last few years. The issue presented itself as the microphone not working sometimes in Chrome on MacOS until you completely restart the machine. This seemed to happen after a Mac went to sleep and then woke up again.
The good news is that this is fixed with Chrome 63! Philipp put together a great chart showing the error rates in different versions of Chrome which clearly shows the drop off with Chrome 63.
We are excited to announce the release of the OpenTok 2.11 Client SDKs which were released recently.
- Audio tuning API – We have added the ability to set the desired audio bitrate across our client SDKs. OpenTok.js has also added the ability to turn off Automatic Gain Control and Echo cancellation. This is important for certain use-cases like listening to heartbeats which we blogged about recently.
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.
Despite the fact that filters are used a lot in non-WebRTC video applications like Photo Booth and SnapChat, we haven’t seen many WebRTC applications using these types of filters. This is probably because it hasn’t really been possible… until now.
It has always been possible to apply filters to video streams locally using the OpenTok platform by rendering the video into a Canvas element. The problem with this approach has always been that the person on the other end does not see the filter unless you apply the same filter on both the publisher and subscriber video. This would mean significant CPU load if you are subscribing to multiple participants. It also means that you don’t get to see the filters in the Archives.
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.
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
We always want to share as much as possible with our community so today we’re sharing a description of how we developed the opentok-editor collaborative editor using ot.js and CodeMirror. You can see the editor in action at meet.tokbox.com and you can see how to use it for yourself at the opentok-editor github page. We love to see people using our open source projects so please feel free to file issues and contribute pull-requests to this project on Github.