Capturing webkit screenshot & redraw events
-
Hi,
does anybody know a good way to get events when webkit redraws its contents? For example, when CSS3 animation updates. I'd like to get the frames to make video, but I'm a bit worried about how to synchronize everything. The CSS3 animation doesn't even have to run in real-time, but I need each frame to get the animation as smooth as possible (~30fps) to video. Can I change the speed of animations? Is there any way to get repaint/update events for each CSS frame? Also, is there a way to capture audio from Qt?
Some background: http://stackoverflow.com/questions/5805850/rendering-html5-animation-server-side
Thanks
-
-
JavaScript allows you to register your own event
Javascript is not a problem. With canvas based animations, I can easily control the animation loop and each step.Repaint/Update events? In website or at web browser?
I need to control the CSS animation timer of the webkit itself so I can get a fluid animation out as images. If I simply use a timer to capture screenshots, there's always possibility of extra delays making the captured animation look bad.For example, move a box 100px to the right in 1 second using CSS3 animation. The webkit completes the animation in 1 second, but if I can't get 30 screenshots or constant framerate, the results won't be too good. So to make it work, I'd somehow have to change the animation timer based on the screenshot delays.
I tested this with QTimer and by storing the screenshot directly to a file. I could store the screenshots to ram instead but I'm pretty sure my computer will start swapping sooner or later.
-
You don't get "repaint events" for every frame, but for every time a dirty area needs to be updated. In code: it's the QWebPage::repaintRequested signal that causes an update() in a QWebView; you can connect that signal to a custom slot to update your drawing (that's what I did in WebkitCaca).
Notice that the QWebView behaviour is 1) asynchronous due to the update() call, which posts a paint event in the event queue, and 2) paint events get compressed by Qt, resulting in less calls to paintEvent() (w.r.t. the number of times repaintRequested was emitted).
If it's possible to modify the script that does the animation, I'd suggest to use PhantomJS (or code yourself an object that does something like that) to render the page to an image file at every step of the animation.