Say Hello To WebRTC

In the world of real-time communications reliability and ease of use are two of the most important factors to building enriched applications that engage your audience. Web Real-Time Communication (WebRTC) was built for web developers to using simple JavaScript APIs embedded directly in the browser.

WebRTC enables applications such as audio and video chat, file sharing, messaging, white-boarding, gaming, human computer interaction, and more without any client or plugin download.

webrtc logo large

What’s the magic behind WebRTC?

WebRTC relies on three JavaScript APIs embedded directly into web browsers requiring no client or browser plug-in in order to communicate directly with another WebRTC enabled browser.

  • MediaStream (aka getUserMedia)
    The MediaStream interface is used to represent streams of media data, typically of audio and/or video content. This allows the manipulation of media streams to whatever is most suitable on the platform.
  • RTCPeerConnection (aka PeerConnection)
    RTCPeerConnection allows two users to communicate directly, browser to browser. Communications are coordinated via a signaling channel which is generally provided by a script in the page.
  • RTCDataChannels (aka DataChannels)
    RTCDataChannel represents a bi-directional data channel between two peers. A RTCDataChannel is created via a factory method on an RTCPeerConnection object.

Currently only Chrome, Firefox and Opera browsers are compatible with the native WebRTC APIs but using the free plugin provided by Temasys you can extend WebRTC capabilities to Internet Explorer and Safari.

Where did WebRTC come from?

WebRTC is the brainchild of the Google Hangouts engineering team. While building the Google Video Chat plugin for Google Hangouts they thought it would be a great idea to place the video and voice technology directly into the web browser.

In early 2010 Google acquired On2, the owner of the VP8 video codec, for $125M. They quickly open sourced the codec for use in both WebRTC and the HTML5 video tag. A little later in the year they acquired GIPS, a Swedish company for $68M. The GIPS technology forms the basis of the voice engine used in the Chrome implementation of WebRTC.

In total Google invested about $200M in WebRTC in 2010. By April 2011 the IETF RTCWeb Working Group was formed and was given the responsibility to standardize the protocols used in WebRTC.

What can I do with WebRTC?

WebRTC is not a technology but a tool to enhance your applications and user experiences within your applications. WebRTC brings many abilities for you to explore within your apps such as:

  • Video Communications: Create secure and high definition audio and video connections between browsers.
  • File Sharing & Messaging: Securely connect and share data between browsers without the need to upload files to the cloud or a network server. Data is sent directly between the connected browsers.
  • Signaling: WebRTC uses the RTCDataChannel to send streaming data between browsers (aka peers).
  • Phone to Browser: WebRTC allows for connections between telephones and browsers. You can make and receive calls all from one location with the use of the new APIs in HTML5, a SIP Gateway & WebRTC.
  • Mobile to Mobile: WebRTC is not just for the web, iOS and Android both have native libraries that can utilize the WebRTC capabilities.

Conclusion

WebRTC offers endless possibilities and opportunities to bring enriched, high quality and affordable real-time communications to the world. We’ve only begun to scratch the surface of what WebRTC will evolve into in the future. Web developers will lead innovation in the industry forcing change and defining what true disruptive technology can bring to the world.

You can find more resources on WebRTC below:

  • WebRTC homepage, maintained by the Google Chrome team.
  • WebRTC on GutHub, a repository for client-side WebRTC code samples and the AppRTC video chat client.
  • An Introduction to WebRTC video.

Next

In the next part of this series we will show you how to build a live video chat application using nothing but JavaScript, HTML5 and CSS. Stay tuned!

The WebRTC Challenge

If you are up for learning more about the WebRTC ecosystem head over to the WebRTC Challenge. It is a new initiative started by the team at Blacc Spot Media to introduce and educate developers across the web and mobile communities.

Comments

  • By far the coolest thing I’ve read in the last 6 to 12 months. Why did I not know this already? Thanks Lantre and Speckyboy!

  • Hi Mark we are glad you found the article helpful. We have a large series of tutorials and industry news related posts on the way. Stay tuned!

  • The idea behind OpenTok, that are offering Real-Time Two Way
    Video Between Browsers and iOS devices Enabled with WebRTC is really good and interesting. But does Phonegap support webRTC?

  • Hi Krishnayan,

    TokBox is actually one of our partners and we are very familiar with their platform. Simple answer to your question is “YES”. However it is not actively maintained being that it is a community based plugin. You can view the current version here: http://plugins.cordova.io/#/package/com.tokbox.cordova.opentok. It will get you up and running with a simplified version of their API.

    If you are looking to have an updated version we are more than happy to assist you with the development. You can contact us at [email protected] or visit our website at http://blaccspot.com

  • WebRTC does face a dilemma today though. Thousands of sites are adding VoIP/Video calling functionality ‒ but none of them can interoperate. Calling someone via WebRTC requires sending them the URL of a WebRTC-enabled website, which they are then forced to use. But why should they be forced to use the service you picked? I can think of only one new open source project called Matrix.org who are specifically aiming to fix the issue of communication fragmentation over the internet. Matrix in many ways will probably fix “missing link” of interoperable calling between WebRTC silos.