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.
Looking at the top charts of your favorite mobile app store you’ll find two kinds of apps, games and social apps. Without a doubt, social platforms are where you’ll spend a big chunk of your internet time.
The way we interact on these social platforms has been evolving since they first appeared on the screen. Whilst in the early days you couldn’t expect much more than simply exchanging text messages with other people, the evolution of several technologies has led to users expecting richer ways of communicating.
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!
Note: this app only really works properly on Chrome and Firefox for the Desktop.
// < ![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.
WebRTC is maturing and we can see the needs in the market evolving along with this.
However, with the increased need for rich, digital experiences comes the challenge of building more advanced applications. We know that building real-time video communications can be challenging, especially when it involves more than two participants. To pull off a multi-party call using WebRTC off-the-shelf you’ll need a strong backend infrastructure and a deep understanding of media processing. That’s why we are looking forward to exploring this topic with WebRTC expert, Tsahi Levent-Levi, founder of bloggeek.me, in our upcoming webinar.
When an issue is reported with an application, an early debugging step is to reproduce the problem. Because our platform is an API, and developers use it for many different kinds of applications, TokBox employees used to have to reproduce problems by building a new application for each new use case. After doing that a couple of times, we wizened up and started using pre-built sample applications as the starting point. This still meant that any functionality that wasn’t generic needed to be added in. What we really needed was an application that used a myriad of features we offered: Enter the TokBox Live Debugger.
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 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.
When building OpenTok apps, there might be cases where you would like the videos inside a container to automagically resize to take up the largest resolution possible within the boundaries of their container. With layout container, an open sourced library available on github, you can do exactly that.
Want to see a live app that uses this layout container? Check out OpenTokRTC! Try typing “/focus” and “/unfocus” in the chat box to see additional functionalities of layout container.
If you have read through our getting started tutorial and know how to create sessions and tokens, you are good to go!
To get you started, we have a few simple and working video chat sample apps to get you started:
- Group video chat app using Sinatra and ruby
- Group video chat app using Flask and python
For more complicated features and functionalities, check out these demo apps: