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

How to Add a Notification Badge to Icons in React Native
Real-time Chat BlogDec 19, 20226 min read

How to Add a Notification Badge to Icons in React Native

Display real-time notification badges with PubNub and React Native to display important information and bring users back to your...

Michael Carroll

Michael Carroll

Digital Twins and the Future of Real-Time Data
InsightsDec 6, 20224 min read

Digital Twins and the Future of Real-Time Data

The concept of Digital Twins has evolved over the last two decades, however, one thing remains the same: the need for real-time...

Michael Carroll

Michael Carroll

In-Game Chat Fuels Player Engagement and Boosts Retention
Real-Time Gaming BlogNov 23, 20227 min read

In-Game Chat Fuels Player Engagement and Boosts Retention

Social features, like in-game chat, offer a solution to driving player retention by fueling engagement, attracting...

Michael Carroll

Michael Carroll