Browse & render webpages in TD via WebKit

By popular request here’s an experimental setup for running WebKit from TD.

Via this method you can fully interact with websites through Python (including support for DOM handling, CSS selectors, JSON, Canvas, and SVG), and capture output screenshots.

In the example below I load the Google Images website in a headless Webkit browser, enter my searchterm, click the search button, and save a screencapture to a PNG. If you scroll the screenshot below to the right you’ll see the result.

HOWTO:

(The first time you run the script below, windows firewall will start moaning about PhantomJS, so you’ll have to give it permission.)

First we check if it works without TD, by entering these 5 commands in windows cmd.exe:

[code]$ python

from selenium import webdriver
browser = webdriver.PhantomJS(‘phantomjs’)
browser.get(“http://www.google.com”)
browser.title
[/code]
if the answer is 'Google' everything is working

  • in TD, somehow the selenium package wasn’t visible by default, so I added the path in Touchdesigner under Edit ->Preferences in the field labelled “Python 32/64 bit Module Path”.
    The path I added is: C:/Python33/Lib/site-packages/selenium-2.45.0-py3.3.egg

  • run attached toefile, and change the folder where it saves/reads the PNG (*)
    headless_webkit.toe (4.05 KB)

=====================================================================
Extra options

You can set the browser window size and user agent, so you can load the mobile or desktop variant of a website. The following example loads the BBC website as a Chrome desktop browser in 1600x1050 and also as a iPhone 1 in 320x480, and renders both pages to a PNG(*).

headless_webkit_useragent_windowsize_v2.toe (4.21 KB)
render_mobile_desktop.png

have fun!
-idzard

(*)feature request: Derivative, it would be cool if someday the moviefileinTOP Class could read png images encoded as base64 strings, that way we wouldn’t have to save to disk first to read WebKit screencaptures in TD. :stuck_out_tongue:

1 Like

nice! ty

Would it be possible to build this into a toe without having to install libraries?

I am not entirely clear on how the internal python module installation works and how well it works, but if my assumptions are correct, I can put the modules themselves into a touch project and then there is no custom installation process when using this on different machines / and sharing it.
or am I wrong about how that works?

unfortunately that’s not possible with this setup.
If you read the Howto steps above you see in step1 and 2 you need to install python, then install a python module on the windows machine, and then in step3 you need to download&install the phantomjs application on the windows machine.
So it’s not really a quick portable solution.

You can also try this experiment with a seperate app in openframeworks made by Elburz, which is a bit more portable. This only renders the output of a url though, no mouseclicks etc implemented yet.

Just run the exe file in the bin directory and start the demoreceiver.toe

If there’s enough requests I can probably implement those on a weekend at some point, Awesomium accepts those things, I just didn’t set it up :laughing:

would be ideal to have Cplusplus Web TOP in the future, but during my efforts in implementing CEF3 as a dll TOP in TD I reached the conclusion that it’s a bitch to get working so far for me :confused:

Ya, I’ve only been working with C++ CHOP and then openFrameworks separately, still on the todo list to get oF 0.9 in a C++ TOP.

099 has a Web Render TOP now, in case you didn’t catch that in the 099 announcement. It uses CEF and Chromium. It’s on Windows only now, macOS in near future. Interactive in near future.

Also one of the alternative methods suggested using a Screengrab TOP on a standalone browser. In 099, the Screengrab TOP, which downloads from the GPU, runs very fast on recent graphics cards (Windows now and macOS this month).

yes, played with a lot already, it’s great work Greg!