Fun With Local Storage: Multi-Window JavaScript Apps & Canvas Streaming

A short while ago I was invited to participate in µChip3, an arts event curated by Antonio Roberts & Sam Wray which involved chiptune, digital art, hacking, modified hardware and much more. My role was to perform live visuals to accompany performances by some notable chiptune artists, so I set about building a custom browser-based visualiser based on the piece I produced for the BYOB 2013 exhibition.

Visualiser applications need to work across two windows (a control window with which you create and modify visuals, which appear in a display window), so working out how to produce an application able to function reliably in this way was my first concern. I worried it would involve some fiddly work with a local server, but after some research the solution proved straightforward: simply store commands in local storage via the command window, which are then be detected by the display window using the storage event listener.

As well as multi-window web applications, local storage can also be used to keep web apps open in multiple tabs in sync with each other, or even to stream the output of a HTML5 canvas from one window to another. Read on for some demos…

Below: a screenshot of the visualiser. The control window is on the left, the display on the right.

Multi-window visualiser using local storage

What Is Local Storage?

The clue is in the name: it’s a capability of modern browsers which allows websites and applications to store persistent data locally. Conceptually, it’s similar to cookies but without the drawbacks: up to 5MB per domain can usually be stored (with some exceptions). Plus, unlike cookies nothing needs to be sent with HTTP requests. If you’re looking to learn more about local storage then read more about it here and here.

Communicating Between Windows

Local storage can be used to communicate between windows using the “storage” Javascript event listener. Whenever data is stored in one window an event can be triggered in another on the same domain, at which point in the second window you can get whatever has been stored and act upon it appropriately. This is key to creating a visualiser app that allows control of a display window (projected to an audience) via a GUI visible only from the VJ’s laptop. “Commands” made with the GUI window can be stored as a JSON object, which will then be read and acted upon by the display window. Find a very simple demo here (only tested in Chrome 43 at time of writing).

Sending the Same Command Repeatedly

One caveat of the storage JavaScript event listener is, it will only be triggered when new or unique data is stored. This means that you can’t send the same command repeatedly. For example, you can’t create an application where a button can repeatedly be pressed in one window, triggering a repeating action in another. However, there is a very simple way around this: just add some un-used random data into the stored JSON object. By doing this you can send the same command as many times as you like.

Using Local Storage to Stream a HTML5 Canvas from One Window to Another

It’s possible to (ab)use local storage to stream the output from a HTML5 canvas from one window to another, in realtime. While this isn’t a technique I used when building my visualiser, it’s kind of interesting all the same and could have a use somewhere- perhaps for if one needed to stream the output of their display window back to their control window.

To do this is fairly simple: when the canvas renders a frame, encode it as a base64 data URI. Store this in local storage, and then decode and draw it into a canvas in the other window. Find a demo of this right here.

Conclusion

Find the code for the above demos on GitHub. If you’ve any feedback or questions regarding this post then please drop me a line via twitter or email. I’m particularly curious to know if there might be a better method of streaming a canvas between two windows?

tweet me your thoughts