title: How to use Seriously.js difference blend effect on successive video stream frames
body: <p>I'm using Appcelerator and wanted to do some video processing.  I came across Seriously.js and saw that you could potentially do some impressive image and video stream manipulation in a "node" pipeline.  So before taking on the appcelerator part of this effort, I figured I'd coerce the camera-source example (see: <a href="http://brianchirls.github.io/Seriously.js/examples" rel="nofollow">http://brianchirls.github.io/Seriously.js/examples</a>) into doing more than just edge detection.  So I quickly added a pixelation effect on top of that.  Code looked like this:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Seriously.js Camera Demo&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;canvas id="target" width="640" height="480"&gt;&lt;/canvas&gt;
  
  &lt;script src="../../seriously.js"&gt;&lt;/script&gt;
  &lt;script src="../../sources/seriously.camera.js"&gt;&lt;/script&gt;
  &lt;script src="../../effects/seriously.edge.js"&gt;&lt;/script&gt;
  &lt;script src="../../effects/seriously.pixelate.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  (function() {
  //main code goes here
  
  // declare our variables
  var seriously, // the main object that holds the entire composition
  source, // wrapper object for source video
  edge, // edge detection effect
  pixelate, // pixelate effect
  target; // a wrapper object for our target canvas
  
  if (Seriously.incompatible('camera')) {
  document.body.appendChild(document.createTextNode('Sorry, your browser does not support getUserMedia'));
  document.querySelector('canvas').style.display = 'none';
  return;
  }
  
  // construct our seriously object
  seriously = new Seriously();
  
  // time to get serious
  source = seriously.source('camera');
  target = seriously.target('#target');
  edge = seriously.effect('edge');
  pixelate = seriously.effect('pixelate');
  
  // connect all our nodes in the right order
  edge.source = source;
  pixelate.source = edge;
  target.source = pixelate;
  
  seriously.go();
  }());
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And cool it worked.  But what I really wanted to do is use the blend effect (specifically difference).  This takes a top and bottom for two different sources (images or videos, I assume) and performs the specified blend operation between corresponding frames.  But what I really want is to have one video stream operated on and have the difference blend effect performed between frames.  The closest I could get, which really isn't very close is to use the same video stream as both the top source and bottom source.  Of course, there's no difference between them, so I don't really get what I'm after.  So I'm guessing I need to access the previous frame, but I don't know how given the operation I see in the API.  Here's the code I have:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Seriously.js Camera Demo&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;canvas id="target" width="640" height="480"&gt;&lt;/canvas&gt;
  
  &lt;script src="../../seriously.js"&gt;&lt;/script&gt;
  &lt;script src="../../sources/seriously.camera.js"&gt;&lt;/script&gt;
  &lt;script src="../../effects/seriously.edge.js"&gt;&lt;/script&gt;
  &lt;script src="../../effects/seriously.blend.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  (function() {
  //main code goes here
  
  // declare our variables
  var seriously, // the main object that holds the entire composition
  source, // wrapper object for source video
  edge, // edge detection effect
  difference, // difference effect
  target; // a wrapper object for our target canvas
  
  if (Seriously.incompatible('camera')) {
  document.body.appendChild(document.createTextNode('Sorry, your browser does not support getUserMedia'));
  document.querySelector('canvas').style.display = 'none';
  return;
  }
  
  // construct our seriously object
  seriously = new Seriously();
  
  // time to get serious
  source = seriously.source('camera');
  target = seriously.target('#target');
  edge = seriously.effect('edge');
  difference = seriously.effect('blend', { mode: "difference" } );
  
  // connect all our nodes in the right order
  edge.source = source;
  difference.top = edge;
  difference.bottom = edge; // I really want a frame sooner or later from edge
  target.source = difference;
  
  seriously.go();
  }());
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I look forward to a response.</p>