I'm trying to implement a delayed webcam viewer in javascript, using Three.js for WebGL capabilities.

I need to store frames grabbed from webcam, so they can be shown after some time (some milliseconds to some seconds). I'm able to do this without Three.js, using canvas and getImageData(). You can find an example on jsfidle.

I'm trying to find a way to do this without canvas, but using Three.js Texture or DataTexture object. Here an example of what I'm trying. The problem is that I cannot find how to copy the image from a Texture (image is of type HTMLVideoElement) to another.

In rotateFrames() function the older frame should be lost and newer should replace, like in a FIFO. But the line

frames[i].image = frames[i + 1].image;

is just copying the reference, not the texture data. I guess DataTexture should do this, but I'm not able to get a DataTexture out of a Texture or HTMLVideoElement.

Any idea?