Building QtWebEngine

By Jeff Tranter Wednesday, April 23, 2014

QtWebEngine ⁽¹⁾ is a new web rendering engine that is planned to replace QtWebKit in Qt. In this blog post, I'll give a short tutorial describing how to build the current version of QtWebEngine on a Linux desktop system, so you can run some example applications and take a look at the features and API.

What is QtWebEngine?

QtWebEngine is an effort to build a new web-rendering engine for Qt based on the Google Chromium browser. QtWebKit, built on the open source WebKit engine, has been a part of Qt for some time, but for a number of reasons ⁽³⁾⁽⁴⁾, including Google leaving the WebKit project, WebKit has become less attractive as a back end for Qt's Web-rendering support and Chromium appears to be a better technology to use.

Work on QtWebKit started in 2013, and in late January 2014 a technology preview was announced. Development follows the usual community process of Qt with code maintained in Git ⁽⁵⁾. It is hoped that QtWebEngine will be included in the Qt 5.4 release in the fall of 2014. Currently the API is still subject to change.

To maintain binary compatibility, QtWebKit will continue to be provided in Qt 5, but using QtWebEngine will be encouraged for new development. The API for QtWebEngine should be similar to that of QtWebKit, and in most cases, it should be straightforward to port existing code to the new web engine.

Building

Let's look at the specifics of building the latest version of QtWebEngine from Git on a Linux desktop system. For this example, I am using Ubuntu version 13.10. The process should be similar on other Linux distributions although some details, such as package names, will differ.

Install build dependencies

The first step is to install the build dependencies. These should all be available as packages for your Linux distribution. The QtWebKit Wiki page ⁽²⁾ lists build dependencies. On Ubuntu 13.10, I had to adjust the list slightly. The command below installed the packages that I required. It is assumed that you have already built Qt and have the relevant Qt build dependency packages installed.

sudo apt-get install build-essential gconf-2.0 gconf2 gperf libasound2-dev \
libcap-dev libcups2-dev libgconf2-dev libgcrypt11 libgcrypt11 libgcrypt11-dev \
libgnome-keyring-dev libgnome-keyring-dev libnss3-dev libpci-dev libpulse-dev \
libudev-dev libxtst-dev python-gtk2-dev

Check out the source code from Git and initialize the repository

You can check out the latest code from the Git repository using the commands below. You also need to run the init-repository.py Python script, which downloads additional sub-projects and third party code and applies patches needed for building.

git clone git@gitorious.org:qt-labs/qtwebengine.git
cd qtwebengine
./init-repository.py

Depending on the speed of your Internet connection, this may take a while, as it needs to download over 300 MB of data.

Build the software

Before compiling the code, there is one more configuration step required. Since Ubuntu 13.10 uses Python version 2.7 and the Gyp tool used for building assumes version 2.6, you need to create a file ~/.gyp/include.gypi containing these lines:

{
  'variables': {
    'python_ver': '2.7'
  }
}

Now you can build the code using the standard Qt process, e.g.

qmake
make

As the build includes Google Chromium, which has over 9,000 source files, it will take some time to complete. My build took about forty-five minutes to compile the software on a standard quad-core CPU laptop.

Because the code is still actively being developed and is not released yet, you may run into build errors. If you get compile errors, make sure you do not have an earlier version of QtWebEngine installed as that can also cause build failures. You will also need to build it against a recent version of Qt, at least version 5.2.0. Some of the examples require Qt version 5.3.0 Beta or later.

Optionally install

If you want to install QtWebEngine as part of your Qt install, you can do so by running:

make install

If you have Qt installed in a standard system location such as under /usr/local, and are not running as user root, you will probably need to run the above using the sudo command. It is not necessary to perform the install step if you just want to run the examples.

Running the Examples

QtWebEngine comes with a few example programs under the examples directory. They should have been built as part of the build process. If you didn't perform the install step, you will need to add the lib directory where you built QtWebEngine to your library path (i.e. by setting the environment variable LD_LIBRARY_PATH).

The program examples/webengine/quicknanobrowser/quicknanobrowser is a small web browser. When I ran it I noticed some minor issues, but overall it functioned quite well, even supporting playback of YouTube videos using HTML5 video support. A screen shot is shown below.

In examples/webenginewidgets/browser/browser is a port of the Qt Demo browser, which is included in the Qt release. This version was ported from QtWebKit to QtWebEngine. The changes needed to port it were minor, mostly just the relevant changes to use the new QtWebEngine classes. A screen shot is below.

The program examples/webenginewidgets/fancybrowser/fancybrowser is a port of the standard Qt fancy browser demo, ported to QtWebEngine. A screen shot is shown below.

As well as widgets, there will be support for QtWebEngine from QML, including a WebEngineView element that should be mostly compatible with the WebView element from Qt WebKit. Typical usage of the element in QML code is shown below:

import QtQuick 2.1
import QtWebEngine 1.0

WebEngineView {
    url: "htttp://www.ics.com"
}

At the time that I built the code, the QML WebEngineView component did not yet seem to be stable or ready for use (the above example always crashed).

Summary

In summary, QtWebEngine is planned to replace QtWebKit as the web-rendering engine for Qt. It will likely be included as part of the Qt 5.4 release. While QtWebKit will continue to be available for binary compatibility, new development will focus on QtWebEngine. I encourage you to take a look at it and consider using it in your Qt applications.

References

QtWebEngine, Qt Project Wiki, accessed April 23, 2014, qt-project.org/wiki/QtWebEngine
QtWebEngine - How to Try, Qt Project Wiki, accessed April 23, 2014, qt-project.org/wiki/QtWebEngineHowToTry
Introducing the Qt WebEngine, Digia Qt Blog, accessed April 23, 2014, blog.qt.digia.com/blog/2013/09/12/introducing-the-qt-webengine
Qt WebEngine Technology Preview Available, Digia Qt Blog, accessed April 23, 2014, blog.qt.digia.com/blog/2014/01/23/qt-webengine-technology-preview-available
QtWebEngine source code, Qt Git repository, accessed April 23, 2014, qt.gitorious.org/qt-labs/qtwebengine