How can I make a browser to browser (peer to peer) connection?
How can I write a website using HTML5, CSS and JavaScript on client side that will allow direct tcp/ip connection between the client browsers once the page is loaded.
I need to do this to to reduce latency since the site will require that the input from one of the users to be transmitted to the other user as soon as possible so sending data from client A to Server and then to client B is not a good option.
I read previous posts on this subject but there were no working solution/examples available that I could find. From what i read the direct connection between clients can be made using plugins like Silverlight, Java or Flash.
Is there any solution that would not require plugins? I would like to use only JavaScript.
Answer
Here on Stackoverflow are several topics about P2P connections in browsers:
- Will HTML5 allow web apps to make peer-to-peer HTTP connections?
- What techniques are available to do P2P in the browser?
- Does HTML5 Support Peer-to-Peer (and not just WebSockets)
- Can HTML5 Websockets connect 2 clients (browsers) directly without using a server (P2P)
- Is it possible to create peer-to-peer connections in a web browser?
- Do websockets allow for p2p (browser to browser) communication?
- HTML 5 Peer to Peer Video Possibilities?
- Is WebRTC implemented in any browsers yet?
As mentioned in most of the topicts, both 2008 HTML5 working drafts were having a section "Peer-to-peer connections":
- http://www.w3.org/TR/2008/WD-html5-20080122/#peer-to-peer
- http://www.w3.org/TR/2008/WD-html5-20080610/comms.html#peer-to-peer
Since the W3C Working Draft 12 February 2009 the section "Peer-to-peer connections" disappeared. But this P2P connection is not gone. It's back under the name PeerConnection within the WebRTC (Real-Time Communications) specifications:
- http://dev.w3.org/2011/webrtc/editor/webrtc.html#peerconnection (W3C Editor's Draft)
- http://www.whatwg.org/specs/web-apps/current-work/webrtc.html#peerconnection (Since 5th December 2011 forwarded to W3C Editor's Draft)
Since 31 October 2011, the W3C Editor's Draft is an official Working draft:
The only implementation of the PeerConnection (UDP based) exists in the modified WebKit by the Ericsson labs (May 2011), which is working quite well. Some patches are in WebKit now (Oct. 2011 -- see updates below!):
- https://labs.ericsson.com/apis/web-real-time-communication/
- https://labs.ericsson.com/developer-community/blog/update-webkit-contributions
Additionally, the WebRTC initiative is a project by Google, Mozilla and Opera. Thus, they are continuing the specification on PeerConnection:
Probably Chrome (uses WebKit) will be the first major browser supporting WebRTC with PeerConnection:
- http://www.webrtc.org/blog/firststeptowardchromeintegration
- http://groups.google.com/a/chromium.org/group/chromium-dev/browse_thread/thread/95bf1e2e1de852fc
- https://lists.webkit.org/pipermail/webkit-dev/2011-November/018445.html
Since 18th January 2012, Chrome is supporting WebRTC as well. It can be uses in the Dev channel (Windows, OSX, Linux) and the Canary build (Windows and OSX) by enabling it under chrome://flags. It only only supports MediaStream like Video and audio and can be tested with several Demos. Transferring application data like String/ArrayBuffer/... is not supported until now.
Since 16th March 2012, the WebRTC Editor's Draft separates a "Peer-to-peer Data API" to send and receive generic application data (String, ArrayBuffer and Blob). Chromium wants to implement the Data API soon (10th April 2012).
On April, 3rd, Mozilla published a first working example on WebRTC for Firefox as well.
DataChannel is planned for version 25 of Chrome, behind a flag, meanwhile it can be tested in Firefox Nightly/Aurora (12th December 2012):
2018: DataChannels are still experimental, but available in current versions of Chrome and Firefox: