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.
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:
For more complicated features and functionalities, check out these demo apps:
If you have read our Getting Started With OpenTok: From 0 to group video chat, you will see why we need to create sessions and their corresponding tokens.
Since creating sessions and generating its corresponding tokens involves your developer api key and secret, they should always be executed in your server to prevent your credentials from being exposed.
In short, sessions are like rooms. People connected to the same session Id will be able to publish and subscribe to each other’s video stream. Session Ids exist forever, so it’s safe to store them in the database.
TokBox is the company that provides the video streaming API called OpenTok. This tutorial will be a walk through to creating a very simple group video chat application.
There are two flavors to the OpenTok API, OpenTok Flash that uses flash plugin and OpenTok WebRTC that uses the new and cool HTML 5 technology, and they are not interoperable.
WebRTC provides a much better video chat experience when it comes to quality but is currently only supported officially in Firefox and Chrome. Internet Explorer users must install Chrome Frame plugin.
Flash on the other hand, is supported in 99% of all browsers and allows the ability to record live video streams as they occur (archiving).