Delaying MJPEG stream by 10 seconds

Question

I am trying to make the live video feed delay by 10 seconds. I've tried using delay(); but that just stops and starts the code and I need it to be more of a time shift. I've heard its possible to make an array of a sequence of frames and then shift them by a certain amount of time but I haven't figured out how to do that.

I was originally working with on a webpage, but I assume you most likely can't delay a live feed with just html (although that would be way more preferable than processing)

import processing.video.*; 
import it.lilik.capturemjpeg.*;

CaptureMJPEG capture;
PImage next_img = null;
Capture video;

void setup() {
    size(800, 800);

    background(0);

    capture = new CaptureMJPEG (this, "http://url.com/cam.mjpg" );

    // or this if you don't need auth
    // capture = new CaptureMJPEG(this, "http://mynetworkcamera.foo/image?speed=20");

    capture.startCapture();
    frameRate(20);
}

void draw() {
    if (next_img != null) {
        image(next_img, 0, 0);  
    }
}

void captureMJPEGEvent(PImage img) {
    next_img = img;
}

EDIT I tried to add a buffer based on the tutorial and based on what I gathered from the last reply. It runs without any errors but it does not delay the video. Any idea what I am doing wrong?

    import processing.video.*; 

    import it.lilik.capturemjpeg.*;

    CaptureMJPEG capture;

    PImage next_img = null;

    VideoBuffer vb;
    Capture video;

    int w = 800;
    int h = 800;
    int offset = 200;

    void setup() {

      frameRate(20);

      size(800, 800);

      background(0);
      vb = new VideoBuffer(200, 200, h);
      capture = new CaptureMJPEG (this, "http://192.168.1.83/smartcam.mjpg" );


      // or this if you don't need auth
      // capture = new CaptureMJPEG(this, "http://mynetworkcamera.foo/image?speed=20");


      capture.startCapture();
    }
    void captureEvent(Capture video)  
    {
      video.read();
      video.updatePixels();
      PImage blog = video.get(300, 0, 48, h);
      vb.addFrame( blog );

      offset++;
      if (offset >= 200)
        offset = 0;
    }

    void draw() {
      int yPos = 150;

      for (int i = 0; i < 27; i++)
      {
        image( vb.getFrame( 200 - (i * 5) + offset), i*48, yPos );
      }

      if (next_img != null) {

        image(next_img, 0, 0);
      }
    }

    void captureMJPEGEvent(PImage img) {
      next_img = img;
    }
    class VideoBuffer  
    {
      PImage[] buffer;

      int inputFrame = 200;

      int frameWidth = 800;
      int frameHeight = 8000;

      /*
    parameters:

       frames - the number of frames in the buffer (fps * duration)
       width - the width of the video
       height - the height of the video
       */

      VideoBuffer( int frames, int width, int height )  
      {
        buffer = new PImage[frames];
        for (int i = 0; i < frames; i++)  
        {
          buffer[i] = new PImage(width, height);
        }

        inputFrame = 200;

        frameWidth = width;
        frameHeight = height;
      }

      // return the current "playback" frame.
      PImage getFrame( int frame )  
      {
        int f = frame;

        while (f >= buffer.length)
        {
          f -= buffer.length;
        }

        return buffer[f];
      }


      // Add a new frame to the buffer.
      void addFrame( PImage frame )  
      {
        // copy the new frame into the buffer.
        arraycopy(frame.pixels, 0, buffer[inputFrame].pixels, 0, frameWidth * frameHeight);

        // advance the input and output indexes
        inputFrame++;

        // wrap the values..
        if (inputFrame >= buffer.length)  
        {
          inputFrame = 0;
        }
      }
    } 

Answer 1

If you are delivering frames at a set rate, then adding a delay is pretty simple. You just 'play' them into a ring buffer at the normal speed, and 'deliver' them off the other end at the same speed. The amount of delay then becomes a function of the buffer size.

A ring buffer is essentially just an array. It can store frames, bytes, or whatever in it. You simply store a 'front' and 'back' index. Whenever you push something in, you advance the 'back' index. Whenever you pop something out you advance the 'front'.

For a simple example, let's just assume that you deliver 1 frame per second. Frames are identified A, B, C etc.

For the first 10 seconds, you just push frames in...

A -> [A]
B -> [A B]
C -> [A B C]
...
J -> [A B C D E F G H I J]

Now, the array is full. You can start delivering frames from the front. Also, the 'back' must loop around and start filling the array from the top.

K -> [K B C D E F G H I J] -> A
L -> [K L C D E F G H I J] -> B
M -> [K L M D E F G H I J] -> C
...

At 20 fps, your buffer would be 200 frames.