Build Qt WebEngine on Ubuntu

Building Qt WebEngine from source

These instructions aim to make easier the building of Qt WebEngine libs (with proprietary codecs) from source. I personally struggled a few days because of a lack of understanding of how some of the programs involved are working, but also because of some errors and poor explanations in the official documentations, that I also found poorly organized.

I thus felt the need to provide a readme to prevent anyone else loosing so much time, and hope this will help some people.

Note that if you need a version of Qt WebEngine working with Qt 5.12, you can stop right there ! Ubuntu 20.04 provides Qt WebEngine packages (with proprietary codecs) built with Qt 5.12, so just install them with the following command : sudo apt install libqt5webenginecore5 libqt5webenginewidgets5

Same for Ubuntu 22.04, Kubuntu 22.04, that provide Qt WebEngine packages based on recent source code (5.15.9 for example on Kubuntu 22.04), with proprietary-codecs.

Prepare your environment

Install Qt

If you already have Qt and qtchooser installed, you can go to the "Configure Qt WebEngine" section.

Qt WebEngine is built using Qt, so we need to install a version of Qt. Note that you can build Qt WebEngine 5.15.12 with Qt 5.12 or Qt 5.14 or another version of Qt 5.15

Download Qt installer from this page : https://www.qt.io/download-qt-installer

open a terminal, and give execution right to user on the file you just downloaded :

chmod u+x qt-unified-linux-x64-4.5.1-online.run

Then, launch it and follow the instructions :

./qt-unified-linux-x64-4.5.1-online.run

select the Qt version you want to install. For this wiki, we'll use the Qt 5.15.0 version, and we simply select :

Desktop gcc 64-bit

Note that for this example, Qt was installed in user's home directory (i-e /home/username/Qt)

Install and configure qtchooser

Install qtchooser

sudo apt install qtchooser

Configure qtchooser

#replace the <path_to_your_Qt_folder> by the correct value (for example, "/home/username/Qt")
#replace the <Qt_version> by the correct value (for example, "5.15.0")

echo "<path_to_your_Qt_folder>/<Qt_version>/gcc_64/bin/" >> default.conf
echo "<path_to_your_Qt_folder>/<Qt_version>/gcc_64/lib/" >> default.conf

sudo mv default.conf /usr/lib/x86_64-linux-gnu/qtchooser/

After this, verify that you correctly configured qtchooser (if so, a qmake command should be recognized) :

qmake -v
#output : QMake version x.y
#output : Using Qt version <Qt_version> in <path_to_your_Qt_folder>/<Qt_version>/gcc_64/lib

# in our example, this gives 
#output : QMake version 3.1
#output : Using Qt version 5.15.0 in /home/username/Qt/5.15.0/gcc_64/lib

Install Qt Webengine dependencies

sudo apt install bison build-essential flex git gperf gyp libxext-dev libasound2-dev libavcodec-dev libavformat-dev libavutil-dev libcups2-dev libdbus-1-dev libdrm-dev libegl1-mesa-dev libevent-dev libfontconfig1-dev libfreetype6-dev libjsoncpp-dev libminizip-dev libnss3-dev libopus-dev libpci-dev libprotobuf-dev libpulse-dev libre2-dev libsnappy-dev libsrtp2-dev libssl-dev libudev-dev libvpx-dev libwebp-dev libx11-dev libx11-xcb-dev libxcb-glx0-dev libxcb-icccm4-dev libxcb-image0-dev libxcb-keysyms1-dev libxcb-randr0-dev libxcb-render-util0-dev libxcb-shape0-dev libxcb-shm0-dev libxcb-sync0-dev libxcb-xfixes0-dev libxcb-xinerama0-dev libxcb1-dev libxcomposite-dev libxcursor-dev libxdamage-dev libxfixes-dev libxi-dev libxkbcommon-dev libxkbcommon-x11-dev libxrandr-dev libxkbfile-dev libxrender-dev libxss-dev libxtst-dev ninja-build nodejs protobuf-compiler python python2

Important note : for now, Python 3 is not supported, so python --version must return a python 2 version (but we installed python, which installs the pyhton-is-python2 package so it should be OK)

python --version
#output : Python 2.7.18

Download Qt WebEngine sources

Clone the repository

git clone https://code.qt.io/cgit/qt/qtwebengine.git
# OR
git clone https://github.com/qt/qtwebengine.git

Choose the branch you want to build

cd qtwebengine
git checkout 5.15.12

Initialize the third party submodules (chromium, gn and ninja)

In the Qt wiki, we can read : "In case you cloned Qt WebEngine as a separate module from git, you might need to initialize out the src/3rdparty submodule that contains the Chromium and Ninja code: cd qtwebengine git submodule update --init". We are in this case, so we do it, but we add --progressoption to have more output (useful when the operation can take an hour !).

cd qtwebengine #skip if already in
git submodule update --init --progress

Configure Qt WebEngine

To pass Qt WebEngine config options using qmake, you have to add -- to mark the end of the qmake's own options, and then pass your Qt WebEngine arguments. In the following example, we add -proprietary-codecs option to support HTML5 players, Vimeo players, etc.

you can find all the options in the configure.json files located in the different directories of the Qt WebEngine repo. For example : https://github.com/qt/qtwebengine/blob/dev/src/core/configure.json

cd qtwebengine #skip if already in
mkdir build
cd build
qmake .. -- -proprietary-codecs