Transferring JSON between browsers with WebRTC

Question

I was excited by the prospect of WebRTC when I heard about it initially. It sounded like websockets but without a server. Unfortunately, all of the tutorials I have been able to find have stressed the video and and audio aspects of WebRTC. I can't find anything about sending text/data/JSON between browsers. Could you help me write a simple hello world of sorts, just sending some data from one browser to another with WebbRTC?

Answer 1

This is a stab in the dark, but the latest Web API editors draft has a DataChannel interface as part of the Peer-to-Peer Data API.

However, the current Working Draft does not have this API, so possibly it is very new and as-yet unimplemented.

Answer 2

DataChannel has now been implemented in Firefox (18+) and Chrome (25+), though it's still early days.

For more information see the HTML5 Rocks article Getting Started with WebRTC.

Answer 3

This functionality is not yet implemented in any shipping WebRTC implementation. As other posters have indicated, there now is a DataChannel API in the latest WebRTC editors' draft, but the protocol for this is still being worked on. Expect to see this API live in Chrome and Firefox later this year.

Answer 4

This is an old question, but because I started to learn webRTC, I will attempt to answer it.

First of all, some misconception:

It sounded like websockets but without a server

There is no way ANY data can be transferred between WebRTC peers before some information (Media session management, Nodes’ network configuration/multimedia capabilities) has been properly exchanged and negotiated. To do this you need a server and signalling (which is not a part of webRTC: you can implement it the way you want).

When the signaling is done, you need to create RTCPeerConnection with something like this:

if (navigator.webkitGetUserMedia) {
   RTCPeerConnection = webkitRTCPeerConnection;
} else if(navigator.mozGetUserMedia){
   RTCPeerConnection = mozRTCPeerConnection;
   RTCSessionDescription = mozRTCSessionDescription;
   RTCIceCandidate = mozRTCIceCandidate;
}

and then:

var connection = new RTCPeerConnection(servers);

After this you can add your data channel to this PeerConnection:

var dataChannel = connection.createDataChannel("channelName",{ reliable: true });

When this is done you can just call sendChannel.send('Any data you want'); and this will send any data you want.

If anything, I found this book really helpful. It leaves a lot of unanswered questions, but for the first start it is good.

Answer 5

I believe Matt already know, but for google guests: Yes, you can, useing DataChannels.

On your side:

channel = somePeerConnection.createDataChannel("a Label");
channel.onopen = function() { channel.send("any thing") };

On the other side:

somePeerConnection.ondatachannel = function (evt) {
   evt.channel.onmessage = function (evt) {
       alert( evt.data );
   };
};

See this examples:

• http://www.w3.org/TR/webrtc/#examples
• https://hacks.mozilla.org/2012/11/progress-update-on-webrtc-for-firefox-on-desktop/#file-datachannels-js-LC12

Answer 6

http://peerjs.com/ is evolving and gives you a websocket like syntax for p2p Data transfer between browser instances

Answer 7

As Justin indicated, the protocol and API are still being nailed down; at the latest IETF I submitted a draft for the minor protocol underneath the JS API. The final form will likely be very close to the current proposal in the editor's draft, but you'll likely need to wait on "onopened" from the receiving side as well.

The API is modeled on the WebSocket api to ease moving code from a WebSocket implementation to DataChannels, though not all items in WebSocket carry over (such as url), and obviously DataChannel adds a number of abilities not in WebSockets having to do with unreliable or partly-reliable data.