Build

WebRTC File Transfer in the Browser: PubShare

2 min read PubNub 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

Top Trends to Engage Your App Users
InsightsSep 27, 20224 min read

Top Trends to Engage Your App Users

Take a look at the top trends that are the most effective in attracting customers and reducing churn, and how you can incorporate...

PubNub Staff

PubNub Staff

Comparing Game Engines: Unity vs Unreal vs the Rest
Real-Time Gaming BlogSep 21, 20225 min read

Comparing Game Engines: Unity vs Unreal vs the Rest

Comparing the major game engines: Unity vs Unreal Engine vs Corona SDK vs GameMaker Studio, including the benefits and cons of...

PubNub Staff

PubNub Staff

Python Socket Programming: Client, Server and Peer Libraries
BuildSep 21, 20226 min read

Python Socket Programming: Client, Server and Peer Libraries

Sockets (aka socket programming) enable programs to send and receive data, bi-directionally, at any given moment. This tutorial...

PubNub Staff

PubNub Staff