[Qt] How to install Qt for WebAssembly

In the previous post: [Qt] The Qt features of WebAssembly and Qt quick WebGLStreaming, I mentioned about Qt for WebAssembly but didn't try it yet. Here, this post is to introduce how to install Qt for WebAssembly and give an example to try by the following steps:



1. Download Qt5.13.0 and install it with source code.

$ wget https://download.qt.io/archive/qt/5.13/5.13.0/qt-opensource-linux-x64-5.13.0.run

2. Install emsdk

$ git clone https://github.com/emscripten-core/emsdk.git
$ cd emsdk
$ ./emsdk install latest
$ ./emsdk activate latest
$ source ./emsdk_env.sh
$ em++ --version
emcc (Emscripten gcc/clang-like replacement) 1.38.40 (commit 2b568055af67b4fb04c13ef81dc2b3ca3035ac8f)
Copyright (C) 2014 the Emscripten authors (see AUTHORS.txt)
This is free and open source software under the MIT license.
There is NO warranty; not even for MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.

3. Build Qt from the sources (This step will take a long time...)

$ mkdir ~/qt-wasm
# my Qt5.13 is installed here: ~/Qt
$ cd ~/Qt/5.13.0/Src
$ ./configure -xplatform wasm-emscripten -nomake examples -prefix ~/qt-wasm/qtbase
$ make module-qtbase module-qtdeclarative [other modules]

4. Build and run your application (quick_controls2_gallery)

$ git clone https://github.com/msorvig/qt-webassembly-examples
$ cd quick_controls2_gallery
$ ~/qt-wasm/qtbase/bin/qmake && make -j4
$ make install

5. Try your application (quick_controls2_gallery)

$ emrun --browser=firefox ~/git/qt-webassembly-examples/quick_controls2_gallery/gallery.html

The firefox's snapshot

Reference:
https://doc.qt.io/qt-5/wasm.html