Build Qt Webengine on MacOS

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.

These instructions are made for Qt6 branches only, which are based on cmake, instead of qmake. If you still need to build your own qtwebengine with Qt5, which uses qmake, you can probably make these instructions work by replacing cmake instructions with qmake ones (qmake .. -- -proprietary-codecs and then make $(systcl -n hw.ncpu) and sudo make install)

---

Prepare your environement

Install CMake

Download

Download CMake dmg (tested with 3.25) : click and follow the instructions to install it.

add cmake to PATH

Open /etc/paths in your favorite text editor, and add the following entry :

/Applications/CMake.app/Contents/bin

Install MacPorts

Go to https://www.macports.org/install.php and pick the package corresponding to the version of your OS.

Once downloaded, double click on it and follow the instructions to install it. Then, go to your terminal and run :

Install Qt

Download

If you already have Qt and added Qt bin path to PATH, you can go to the next section.

Qt WebEngine is built using Qt, so we need to install a version of Qt6.

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

Open it and follow the instructions.

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

• macOS

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

Add Qt bin path to PATH

Open /etc/paths in your favorite text editor, and add the following entry (adapted to the path you chose to install Qt in) :

/Users/username/Qt/6.3.2/macOS/bin

sudo port -v selfupdate
sudo port upgrade outdated

Install Qt WebEngine dependencies

sudo port install bison
sudo port install flex
sudo port install nodejs12
sudo port install ninja

python3 -m pip install html5lib

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 6.3.2 # for example

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

mkdir build
cd build
qt-configure-module .. -webengine-proprietary-codecs

Compile Qt WebEngine

This part of the process will take hours to finish.

cmake --build . --parallel

Install Qt WebEngine

Libraries, binaries, mkspecs, etc are moved to the Qt directory you used.

sudo cmake --install .

That's all ! Well done !