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.
What’s the magic behind WebRTC?
- 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.
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.
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.
- Reasons to Say “No” to a Web Design Project
- How to Develop Your Signature Style as a Web Designer
- Common Pitfalls When Redesigning a WordPress Website
- Why We Unfairly Judge Other Designers
- The Challenges of Building a Modern eCommerce Website
- Getting Clients to Care About Their Website Long Term
- Taking a Look at Google Analytics 4
- Tips for Building Charity and Non-profit Websites
- 8 Free Resources to Help Web Designers with GDPR Compliance
- 8 Snippets for Creating Common Website Layouts with CSS Grid