time shifting live html5 video stream for webRTC

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).

code: