WebRTC the right one? (realtime multiplayer game) - javascript

Imagine I want to create a realtime multiplayer game, with HTML5 (client) and node.js (server).
I need to transport data very fast from the server to the clients and vice versa.
In a native application I would use UDP for the most data (player position, ...), because it's way faster than TCP and it's uncritical when it is lost.
In HTML5 I can (only) use WebSockets. WebSockets is on top of TCP and thus not fast enough for a good performance.
I heard about WebRTC, but I don't know whether this could be the solution for this problem.
Has anybody experience with it?
(I know, that WebRTC is still unsupported for the most browser, but that doesn't matter to me.)

In terms of WebRTC, sounds like what you need is DataChannel: see draft protocol and HTML5 Rocks article (disclaimer: I wrote it!)
DataChannel is a work in progress, not yet implemented by any browser.
As for other WebRTC components, MediaStream (getUserMedia) is supported by Chrome, Firefox Nightlies and Opera; RTCPeerConnection is in Chrome stable, behind a flag (flagless in forthcoming versions), and promised for Firefox 18 in Q1 2013.
EDIT: RTCDataChannel has now been implemented on Firefox and Chrome.
Chrome 'single page' demo: simpl.info/dc, Firefox demo.

RTCDataChannel provides session-based / reliable as well as connectionless / unreliable transport, analogous to TCP and UDP in a native client, respectively. More information here. As of 2013, this is a viable technology, albeit only in later Chrome and Firefox builds.
According to html5rocks.com, it is also now possible to use binary types for transfer. So you should have all the capabilities you would have with an efficient, native UDP client. However, I am as yet uncertain whether binary transfer has made it's way from the webrtc repository, where it has been fixed, all the way into Chrome, or whether it's still only available in Chrome Canary at this stage.

Related

Can HTML5 Web Audio be as high quality as a DAW?

This question is mainly geared towards audio engineers.
I was looking at a few videos here and here concerning the Web Audio API in javascript and how people are using it to make music. I was wondering can this API be used to create sound quality on the level of existing Digital Audio Workstations (DAWs) like Ableton, FL Studio, Reason, Logic, etc.
Or is there some kind of inherent limitation to the browser? I think VSTs cannot be used by Web Audio API, but regardless of VSTs is there something that an audio engine used by DAWs can do that Web Audio cannot do in terms of quality? Or can the sound be just as good. I believe that samples can be played just as effectively (?), but maybe the synthesis would be limited?
Can HTML5 Web Audio be as high quality as a DAW?
Yes! Browsers use a high quality audio engine, with floating point samples all the way through.
Additionally, the API itself is one of the most straightforward to use and is quite extensible. It also supports very specific timing of control.
I think VSTs cannot be used by Web Audio API
That is correct.
but maybe the synthesis would be limited?
There are no real fundamental limitations. If you can code it, you can do it.
Now, there are a couple things you didn't ask about but still should know about. The first is an issue of latency. Browsers don't use ASIO or anything like that, so if you're using the Web Audio API to process and return low latency audio, you're going to have a bad time. In Chrome, you can improve this by letting Chrome open the audio device in exclusive mode.
Another issue is input/output channel count. This typically maxes out at 8 channels. Internally though, you can do pretty much whatever you want. The limitation is from the browser, not the Web Audio API itself.
There are some high quality audio applications that could run in the browser, but you can only do realtime audio in Chromium-based browsers, and you can't get realtime input even then.
Only Chromium supports high-priority audio threads in Audio Worklets, which you need for stable, realtime audio.
The WebMIDI API only runs on the main thread, which makes it useless for realtime input.
The WebUSB API is threadable, but does not permit communication with audio-class devices (which includes MIDI controllers (and soundcards)).
Keyboard, touch and mouse events must (currently) be handled by the main thread.
So, in short, you have no (practical) way to control realtime audio in Chromium, and cannot even do realtime audio (reliably) on any other platform.
Note: Adding support for WebMIDI workers was requested nine years ago, and the issue is still open (just for adding it to the spec).
Note: Electron will allow you to access protected USB device classes (Audio/MIDI), but Electron WebUSB support is still in progress. NWJS has WebUSB support, but no way to access protected device classes (though I opened an issue recently). WebUSB will work on these platforms eventually, but you would still need to implement web drivers for your controllers (even class-compliant ones), so this will not be an ideal solution, even once it it works.

Cross Browser WebRTC DataChannel

I'm not being able to create a RTC dataChannel between Chrome and Firefox. I had success creating video and audio streams between the two browsers, but not the dataChannel.
If the communication is between two Firefox browsers or two Chrome browser, it works. Is it possible to create a dataChannel between those two?
Thanks.
Yes, it possible to create data channels between Chrome and Firefox. There's a bit of custom code required to achieve connectivity but it's not too bad.
I recommend using a module that smooths over the differences and simplifies the WebRTC API. I wrote simple-peer for this purpose. You can take a look at index.js to see where there is custom logic to handle Chrome or Firefox quirks.
Another popular solution is adapter.js (created by Google), which attempts to smooth out the differences between browsers without making the API easier to user.

How can I make a browser to browser (peer to peer) connection? [closed]

As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
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.
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:
http://www.w3.org/TR/2011/WD-webrtc-20111027/#peerconnection
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:
http://www.webrtc.org/
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):
http://updates.html5rocks.com/2012/12/WebRTC-hits-Firefox-Android-and-iOS
2018: DataChannels are still experimental, but available in current versions of Chrome and Firefox:
https://developer.mozilla.org/en-US/docs/Web/API/RTCDataChannel
I'll have to disappoint you - this is currently not possible with just JavaScript. Websockets (and Socket.IO) allow a socket-like connection between the client and the server, but not between clients. Your option is a plugin - be it Flash, Silverlight, Java or custom-made.
What you can do is use socket.io and emulate that by writing a simple proxy server.
I would like to turn your attention to the fact, that most users nowadays are behind NAT or firewalls, and this means that you can't easily establish incoming connection to user's computer. So your idea would (if ever possible) work only in some cases and will bring extra complexity to your solution. So client-server system with possibly persistent connection (using websockets or socket.io) is a better option.

Is there any way to run a server or peer-to-peer from a browser?

The title basically says it all. I'm aware this can't be done using traditional means. I'm not aware of any way to do it using Web Sockets, though I've never built anything more than toy apps with them.
It is fine if the solution is browser-specific (even on the client-side; i.e. peer-to-peer communication would also be awesome). For instance, is there any way to accomplish this using Chrome's NaCl?
Furthermore, if this isn't possible now, is there any fleshed-out specification for how it will work in the future? For instance, Chromium-based browsers are experimenting with a "P2P Javascript API" which appears to be currently entirely undocumented.
Here's the HTML5 spec on it:
http://www.whatwg.org/specs/web-apps/current-work/multipage/video-conferencing-and-peer-to-peer-communication.html#peer-to-peer-connections, though its status is unclear.
Sorry if this question is a bit haphazard; I'm basically interested in the current status of all in-browser APIs that could be used for p2p communication.
Edit: I'm not interested in Flash p2p. I'm aware it can be done, and is definitely a solution to current p2p problems, however I'm interested in new technology.
Update May 2012: For those still looking at this, the peerconnection API is slowly making its way into browsers. It is now experimentally in Chrome, along with the rest of the WebRTC API. You can check out the documentation and spec here.
There's Opera Unite but I'm not aware of any cross-browser standardization effort based on that. I think by default it proxies through Opera's servers for DNS, but you can set it up for direct connections.

Will Websockets allow a server to run in the browser?

Are there any plans for a Websockets listen function?
Allowing peer to peer applications in the browser could be revolutionary.
I found this answer: Will HTML5 allow web apps to make peer-to-peer HTTP connections? but it is rather old. I think the specification it refers to (the Connection api) has now been replaced with Websockets, which does not mention any listen facility.
The WebSockets API does not provide a way to listen for connections; it is client only.
You might be interested in Opera Unite.
Update:
Also check out pusherapp. It's a WebSockets service online. They charge for over 5 clients, but it's super simple to setup and use. Depending on what your p2p application requirements are, it might suffice.
Old question, but I was wondering the same thing, and came across peer-server, which might be worth having a look at. It uses WebRTC, and looks like it does what you're thinking:
https://github.com/PeerServer/peer-server
Tangentially related to your question, but you did say "p2p in the browser", so..
The Flash player has p2p APIs that allow direct connection with other peers (typically other browsers) over UDP.
The APIs are geared toward using those connections for voice/video streaming, but it seems possible to use them for generic message passing as well.
The tricky point of course is "how do peers find each others?". Currently, Adobe offers a free/beta service to do that, called Cirrus (formerly Stratus). It's also possible to buy Flash Media servers from Adobe to do the same (which also provide TCP server-based fallbacks for folks that are behind UDP-unfriendly firewalls.) Presumably, open-source alternatives like Red5 will have support for it too at some point.
If you are not looking for a generic browser solution, for non secure and limited connections you may use a Google Chrome extension to do the job:
Web Server for Chrome
https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb

Categories