Disabling data url jpg cache

Question

I have a constant source of base64 encoded jpg files roughly 1-5 images per second creating a simple video stream. This is how they look like:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==

Entering them into src atribute of img element triggers requests in the background which are being cached by the browser:

Since every frame is cached my app fills the browser cache after a short time.

1. How can I avoid this caching behaviour so that every frame is either not cached or cached for a really short amount of time?
2. If that is not possible then how can I display jpg binary data coming from a stream reasonably fast* and without caching?

* I tried using jpg.js in order to decode raw binary jpg data into raw pixels and render them on a Canvas but that is too costly in terms of time and CPU consumption

Answer 1

You can do that - it's tricky, but possible. It involves converting dataURI to Blob and then blob to objectURL. I've prepared an example with one picture, but you can do a lot. Every time a different URL will be created, so no caching.

My example: https://jsbin.com/tuxoveroha/edit?html,output

Just make sure you use revokeObjectURL when done with the URL, to free up memory.