Build

WebRTC File Transfer in the Browser: PubShare

2 min read Michael Carroll on Jun 27, 2013

The generally “go-to” app for real-time interaction is some form of messaging, be it text chat, video or audio. However, we all know there must be more applications of real-time communication out there. File transfer is one of those applications that developers seem to have forgotten about, probably because of the recent boom in “cloud” services like Dropbox, Google Drive, SkyDrive, and others. These kinds of services all require pretty serious infrastructure for hosting and handling each user’s data.

A relatively new technology for web browsers may reduce the need to upload your files to the cloud before others can access them. That technology is called WebRTC, and it allows web browsers to connect directly to each other in a true Peer-to-Peer fashion. Similar to cloud services, WebRTC enables users to transfer large amounts of data very quickly, however, it operates entirely in the web browser. And that’s exactly what we’ve done with PubShare. Everything you need is available in the full PubShare tutorial and working demo app here.

webrtc file transfer

WebRTC File Transfer In the Browser

PubShare is a simple demonstration of what is possible when combining the abilities of the PubNub Data Stream Network with those of the WebRTC DataChannel. As the name suggests, PubShare lets you share files with other people over the peer-to-peer connection provided by WebRTC.

Where does PubNub come in you ask? Well, WebRTC by itself is limited because peers need a means to send their network information to each other before they can connect directly. So PubNub lets us build a “common-room” where people can see others enter and leave, but instead of chatting they can share files with each other.

webrtc file transfer

webrtc file transfer

You’ll first need to sign up for a PubNub account. Once you sign up, you can get your unique PubNub keys in the PubNub Developer Portal.

Another important aspect of this demo is how we built it. It began with a PubNub subscribe(), and ended with a large amount of WebRTC code (easy and fun probably aren’t words developers would use to describe working with WebRTC directly). However thanks to a handy new API from PubNub, we could get rid of all of that cumbersome WebRTC code and replaced it with the simple PubNub publish/subscribe calls we know and love. As you’d expect, PubNub’s WebRTC API is open source and available on GitHub.

Hopefully you’ve been inspired to harness the power of the DataChannel and build your own PubNub-enhanced WebRTC app, or WebRTC-enhanced PubNub app, however you prefer to look at it.

Get Started
Sign up for free and use PubNub to power
WebRTC file transfer in the browser!

0