Build

WebRTC File Transfer in the Browser: PubShare

2 min readPubNub Staff 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

Can Empathy Exist in the Metaverse
News May 16, 20221 min read

Can Empathy Exist in the Metaverse

A roundtable discussion led by PubNub’s COO, Casey Clegg, exploring the topics of what it means to be human in a virtual world.

PubNub Staff

PubNub Staff

How to Advance Telehealth and Virtual Care Technologies
News May 2, 20221 min read

How to Advance Telehealth and Virtual Care Technologies

Dr. Joe Kvedar, Chair of the Board for the American Telemedicine Association, joins our COO, Casey Clegg, to discuss why...

PubNub Staff

PubNub Staff

Another Step Towards Data Security: ISO-27001 Implementation
BuildMay 2, 20221 min read

Another Step Towards Data Security: ISO-27001 Implementation

Today, we are glad to announce that we are currently in the process of implementing ISO-27001 security standards.

PubNub Staff

PubNub Staff