Thursday, May 2, 2013

Capturing Flash Website Screen Shots

Problem:

Lately I've been trying to capture website screenshots in various formats, but mainly PDF, PNG and JPG.
For this, I have used a great webkit based command-line tool called wkhtmltopdf.

Unfortunately, this tool does not support flash sites. We can use the "--enable-plugins" parameter, which will overcome the "flash is required to view this page" warning for missing flash extensions, but no usable rendering will come up from that.

Turns out there is a tool, PhantomJS, that did once allow generating Flash-based sites/content to be rendered by its CLI version.
Sadly enough, they completely removed this feature since 1.4.1, which is the last version to support Flash rendering. They remove Flash support for several reasons, but mainly to keep their ideals of "headless" script generation. For more info, here is a link.


Solution:

So the solution *** seams *** quite straight-forward: grab the 1.4.1 binaries and try them!
For those of you who want to try it, I have a good and a bad thing to tell you.

Good thing: it is possible. Here is a shot of my old personal, flash website, taken today, 1st May 2013.

Try it: here

Bad thing: there are so many things that can go wrong and working with Linux compilations and stuff like that is so complex for most users that most people just gives up. On top of that, flash sites take time to load so you will frequently come up with a loading screen shot or no content due to flash versions later than 10, which may not be supported.
Still here? Feel free to give it a try.
  • The binaries don't work.Getting "libQtWebKit.so.4: ELF file OS ABI invalid". Time to download and compile the source instead of using the ready-made binaries of PhantomJS. QT47 will be required.
    • Install Git
    • git clone git://github.com/ariya/phantomjs.git
    • git checkout 1.4.1
    • Install QT47
      Add this to /etc/yum.repos.d/CentOS-Base.repo
      #ATrpms
      [atrpms]
      name= CentOS-$releasever - ATrpms
      baseurl=http://dl.atrpms.net/el$releasever-$basearch/atrpms/testing
      gpgcheck=1
      gpgkey=http://ATrpms.net/RPM-GPG-KEY.atrpms
      enabled=1
      yum install qt47-devel qt47-webkit qt47-webkit-devel sqlite-devel
    •  Compile PhantomJS
      • (under git folder, for x64)
        /
        usr/lib64/qt47/bin/qmake-qt47 && make
      • (under git folder, for x86)
        /usr/lib/qt47/bin/qmake-qt47 && make 

  • The screen shot shows loading percentage
    • Increase the rendering timeout in rasterize.js file
      window.setTimeout(function () {
                      page.render(output);
                      phantom.exit();
                  }, 200);//change to 2000

  • The rendering is not okay or flash extension missing from output

Finally, how I called the screen shot maker (xvfb-run script):
bash xvfb-run --server-args="-screen 0, 1024x768x24" ./phantomjs ../example/rasterize.js [site_url] test.png

Update: xvfb-run is not actually required
./phantomjs ../example/rasterize.js [site_url] test.png

The results of my research, using CentOS 5.9, x86, and the 32bit compiled version of PhantomJS 1.4.1, are available here (all required changes mentioned above are already included):



Resources:
http://blog.webogroup.com/2013/04/how-to-setup-completely-headless.html

http://rhythmicalmedia.com/?p=146

http://phantomjs.org/build.html

No comments:

Post a Comment