Build

WebRTC File Transfer in the Browser: PubShare

2 min read Michael Carroll on Jun 27, 2013
Try PubNub Today

Free up to 1MM monthly messages. No credit card required.

Subscribe to our newsletter

By submitting this form, you are agreeing to our Terms and Conditions and Privacy Policy.

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 ther...

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!

More from PubNub

NPP and HIPAA: Notice of Privacy Practices Definition
Healthcare CategoryJan 6, 20235 min read

NPP and HIPAA: Notice of Privacy Practices Definition

A Notice of Privacy Practices (NPP) is one of the requirements of HIPAA and helps patients understand their personal data rights.

Michael Carroll

Michael Carroll

HIPAA Violation Examples
Healthcare CategoryJan 5, 20236 min read

HIPAA Violation Examples

HIPAA violations can be financially expensive and devastating to a brand. Examine some examples of HIPAA violations, and learn...

Michael Carroll

Michael Carroll

HIPAA Technical Safeguards: How To Protect Sensitive Data
Healthcare CategoryJan 5, 20236 min read

HIPAA Technical Safeguards: How To Protect Sensitive Data

HIPAA covered entities must follow the five technical safeguards to achieve HIPAA compliance and prevent data corruption.

Michael Carroll

Michael Carroll