WebRTC is great, but it’s pretty new, and browser support is unbalanced, to say the least. I was lucky enough to only have to support the latest chrome in my last project, but it was still a challenge to get it working for 100% of users.
Many firewalls, and in particular in corporate environments, don’t much like tunnelling open sockets from across the internet into machines in their networks. That’s understandable really, but it does get in the way of basic WebRTC connections. The solution is described well on html5rocks and involves the use of STUN and TURN servers.
I used rfc5766-turn-server which is open source, well supported on the forums and seemed to work fine. I could get data connections pretty consistently from anywhere now, but I was still seeing problems with video.
Some of my video connections were coming through as black boxes. No errors, all connections appeared to be opened correctly, just no feed. This was a big problem.
The solution came with an unexpected observation, but it makes sense – if the connection to the TURN server is limited to only use TCP, no black square – it all works fine. Presumably it’s a little slower than using UDP (the preferred default) but it’s more reliable in it’s nature.
So when you’re specifying the turn server, simply append ?transport=tcp to the url to disable udp and hopefully you’ll see the same reliability improvement that I did.
Well, maybe not totally, but I couldn’t find a good existing way of doing this.
I wanted to delay a stream by an arbitrary amount of time. The specs talk about ‘time shifting live streams’ but I don’t think there are any implementations around yet in any of the browsers for this.
I tried ‘recording’ the streams – again something that is coming, but not around yet. There are a couple of open js libraries that’ll do it, like this and this, but I needed to be able to constantly buffer dozens of streams at once and these solutions were slow and would crash the browser.
So my solution can be seen here – basically I store a grab of each frame as it comes in, and then draw these every frame back to a canvas object, after a delay. Works great, performance is great, looks like video. Only drawbacks are obviously no audio (wasn’t a problem for my purposes) and it doesn’t render unless the tab is in focus (again, fine for me).