Apply water ripple effect with JavaScript in HTML video player

I am trying to create a water ripple effect in a video embedded in HTML5 default web player.

I am doing it fine with using images and and a overlay canvas on top of it, but what I am trying to do now is to get single frames from a video and output it to a canvas every 1-5ms using this tutorial.

And I am stuck at this point, I can output frame into another canvas using
canvas.toDataURL() function.

I have seen advanced web-based video players that allow for applying Processing.js sketches on top of videos, would that be a good solution?

My question is: what would be the best and most reliable solution for applying visual effects (water ripples in this case) using JavaScript to a video playing in HTML5 media player.