Can I render a webkit page to HD video?

Question

First I was wondering if it would be possible to make a good HD video from a prezi slideshow or something like impress.js.

I've seen people trying to make screencasts from their browser page, but the quality is often sub optimal. (motion often not fluent)

So, is it possible to render a - speaking more generally - html page with animations to a video? (Perhaps using the webkit engine?)

without interaction, just playing the normal jquery animations (perhaps slowing down the webkit engine to be able to render the pages to some video file)
with interaction recording all animations on the page

Update: Using Jan Dvorak's tip I tried this:

<a href="javascript:(function(){
   var factor = 10; 
   function slower(x){
      return function(){
        return x.apply(this,arguments)/factor;
      }
    }
function longer(x){
      return function(f, time){
        time = time * factor;
        return x.apply(this,arguments);
    }
  }
  Date.prototype.getTime = slower(Date.prototype.getTime);
  Date.now = slower(Date.now);
  setTimeout = longer(setTimeout);
  setInterval = longer(setInterval);
  alert('Warning, jQuery slowed down'); 
 })();">Test bookmarklet!</a>

But this not seem to have any effect on a this page for example: http://bartaz.github.com/impress.js/#/bored

jQuery uses the system time to time their animations, so the renderer would need to fake the system time for the page. — John Dvorak, Dec 03 '12 at 07:52
The page you have linked uses CSS3 for animations, not jQuery. Adding support for CSS3 animations wouldn't be easy but I'll see what I can do. — John Dvorak, Dec 03 '12 at 14:01
note that the original question specifically said "jQuery animations". The page you linked does not even include jQuery. — John Dvorak, Dec 03 '12 at 14:18
IIUC, prezi is javascript-based, not CSS3-based, so you can use this technique with it. — John Dvorak, Dec 03 '12 at 14:32
I have to go now but I'll update with (imperfect, but good for impress.js) CSS3 support when I get back. — John Dvorak, Dec 03 '12 at 14:51

score 0 · Answer 1 · answered Dec 03 '12 at 08:43

Once you slow the time for the page, you can use any recording tool that captures at full resolution, then speed up the capture by the same factor.

jQuery uses Date#getTime to time its animations. The page script itself might use other methods for timing. Try adding this script to the page you're capturing (tested in Chrome):

(function(){
  var factor = 10; //or choose your own. Higher slowdown = smoother capture.

  function slower(x){
    return function(){
      return x.apply(this,arguments) / factor;
    }
  }

  function longer(x){
    return function(f, time){
      time = time * factor;
      return x.apply(this,arguments);
    }
  }

  Date.prototype.getTime = slower(Date.prototype.getTime);
  Date.now = slower(Date.now);
  setTimeout = longer(setTimeout);
  setInterval = longer(setInterval);
})()

demo: http://jsfiddle.net/DPhSv/2/

Note that this assumes the page uses Javascript for animations, and does not slow down CSS3 animations.

Can I render a webkit page to HD video?

1 Answers1