Real Time Communications Featured Article

Coding with WebRTC API May Not be the Challenge Some Expect

August 10, 2015

Coding a website sounds like a tall order, doesn't it? It only sounds worse if someone decides that it's time to add in the power of Web-based real time communications (WebRTC). We all know that this tool can make a huge amount of difference to a company depending on how it's used, but actually setting up a site with WebRTC in it might seem tougher than just setting up a website. That said, a new tutorial from Lantre Barr underscores the comparative simplicity of such a project.

The tutorial focuses on building a photo booth app, a valuable app to have on hand since WebRTC works with both the mobile and the desktop environment. The photo booth app, in turn, puts users' webcams to use and allows users to take the MediaStream application programming interface (API) and add cascading style sheets (CSS) filters therein.

It begins with an understanding of how WebRTC works. In WebRTC, users can execute both video and audio calls without the need for additional downloads or other installation, as well as engage in peer-to-peer (P2P) data sharing with the help of JavaScript APIs. Knowing that allows for the beginning step: creation of the HTML foundation. Barr notes that his tutorial is based mainly on a sample app from the Google team, so it might be familiar to some users. WebRTC's use of the HTML5 “video” element will be a major part of this equation, and so too will the “canvas” element come into play to make snapshots of the video stream, and apply filters.

Once that's in place, consider the JavaScript portions. The getUserMedia API tends to focus on the navigator.getUserMedia() method, though it will need to be defined using the necessary vendor prefix so that it works across the available browsers. For instance, for Firefox, one would use navigator.mozGetUserMedia. From there, define the constraints as needed, in this case using video: true since the focus will be on the webcams involved. Define and store the HTML elements as needed, and then set up the array for the filters involved. Add a “click” event to start the methods up, and negotiate the appropriate permissions. Then the stream object can be passed on as the source of the HTML5 video tag. That's when the CSS filters can be added in providing that much more effective value. From there, turn to the Lantre Barr tutorial for wrapping up the code portion of things.

Image via Shutterstock

With this concluded, there's now an app that allows for easy sharing of pictures and video, and a whole lot of potential value in its wake. We've already seen one major commercial use of this technology in the Amazon Mayday Button, and a whole host of others both already arriving and set to follow. Some even believe it will fundamentally change customer service as it's known today, allowing users one-click access to a customer service support staff to ask questions about a product or even place orders. This contributes to the omni-channel customer service experience that's increasingly desired by customers, so adding in such convenient features will likely endear a customer to that business.

There's a lot of value in WebRTC, so having a handle on some of the basics of coding for it will likely pay off in the end, particularly when it comes to improved customer experience and a valuable way to connect both with the customer and within the business itself.

Edited by Dominick Sorrentino

Article comments powered by Disqus

  Subscribe here for RTCW eNews