Optimizing the performance of html5 video manipulation
After back and forth with ChrisW and yourself, it seems I found a glaring bug

    var frameFix = function() {

        hContext.drawImage(sourceVid, 0, 0, sourceVid.videoWidth, sourceVid.videoHeight);

        var frame = hContext.getImageData(0, 0, sourceVid.videoWidth, sourceVid.videoHeight);

        var length = frame.data.length;
        for (var i = 0; i &lt; length; i++) {
            var r = frame.data[i * 4 + 0];
            var g = frame.data[i * 4 + 1];
            var b = frame.data[i * 4 + 2];

            if (g &gt;= 0 &amp;&amp; g &lt; 100 &amp;&amp; r &gt;= 0 &amp;&amp; r &lt; 100 &amp;&amp; b &gt;= 0 &amp;&amp; b &lt; 100) {
                frame.data[i * 4 + 3] = 0;
            }
        }
        dContext.putImageData(frame, 0, 0);
        return
    };


Since in frame.data you have 4 data points per pixel, you only need to go as far as frame.data.length / 4, this should make your code 4 times faster.

This observation with ChrisW's common sense observations makes for:

var frameFix = function() 
{
  hContext.drawImage(sourceVid, 0, 0, sourceVid.videoWidth, sourceVid.videoHeight);

  var frame  = hContext.getImageData(0, 0, sourceVid.videoWidth, sourceVid.videoHeight),
      data   = frame.data,
      length = data.length, i;

  for (i = 0; i &lt; length; i += 4) 
    if (data[i] &lt; 100 &amp;&amp; data[i + 1] &lt; 100 &amp;&amp; data[i + 2] &lt; 100) 
      data[i + 3] = 0;

  dContext.putImageData(frame, 0, 0);
};