Qt 6.2 Web Assembly What's New

You may have seen the news that we released Web Assembly as Tech Preview in Qt 6.2 LTS a while ago (please find the latest Qt here). This blog post is a Qt6 refresh of a similar post done earlier for Qt 5, starting a series of Qt Web Assembly posts discussing the recent developments on Qt6 side.

We use Emscripten to compile Qt into a binary format that runs in a web browser. Instead of compiling and deploying for multiple platforms, the idea is to compile and deploy on a web server for any platform that has a browser that supports WebAssembly. So essentially you could take your C++ application and recompile for Web Assembly and then run in compatible browsers. If you are an enterprise and have multiple clients that have various platforms in use, you could use Qt for WebAssembly to compile your Qt or Quick app and deploy once with zero installation without a need to go via app stores.

Qt for WebAssembly build instructions are listed on the Qt for WebAssembly documentation. You will first need to download and setup the emsdk compiler. It’s fairly trivial to do. We use this as the cross-compiler.

Qt Web Assembly Screenshots

Here are some screenshots of a few examples also available in the Qt Web Assembly Examples page:

Additional examples by the community here:

Qt 6 WebAssembly QtQuick3d

Screenshot 2021-12-23 at 17.55.50-1

Industrial panel - Originally made to show various use cases of Qt running on low-powered embedded hardware. This demonstrates how the same UIs could also be accessed through a web browser with no need for any changes to the code.

Screenshot 2021-12-21 at 14.06.11

Screenshot 2021-12-21 at 14.06.37

Hello Window - Example of how to incorporate raw OpenGL drawing in a Qt application.

QOpenGLWindow works and seems to get near 60 fps.

Emscripten translates OpenGL calls in WegGL, so there are limitations from the desktop and embedded versions.

 Screenshot 2021-12-21 at 14.11.42

Sensor Tag - Sensor Tag Demo - "Internet of things" demo which visualizes sensor data from a Texas Instruments SensorTag device, transmitted over web sockets. Can also be run with mock up data. Note that since this has been designed to work with a minimum screen size in mind, it may not look good on small screens or with smaller windows.

Screenshot 2021-12-21 at 14.17.54

Slate - A sprite drawing app that demonstrates a full "main window" style application with menus and toolbars as well as save and load functionality.

Screenshot 2021-12-21 at 14.19.49

Chart Themes - Demonstrates the look and feel of different built-in Qt Charts themes.

QtCharts, QtGraphicalEffects, QtQuickcontrols, QtQuickControls2 all work without changes.

 Screenshot 2021-12-21 at 14.23.09

QML Chart - Basic example of different chart types in QML API of Qt Charts.

Screenshot 2021-12-21 at 14.26.21

Developing/Debugging with Qt Web Assembly

Debugging is still under construction as there is no gdb, but there are output statements (std::cout, qDebug and printf) as well as the debugger console in the browser. You might also have to increase the Web console log limit with (Firefox) "devtools.hud.loglimit.console" from about:config.

To set a breakpoint, add

EM_ASM({ debugger });  

into your code to popup the browser debugger. (Don't forget to #include <emscripten.h>) The downside is that you need to recompile.

Qt modules known to work are listed on the Qt for WebAssembly documentation, including:

  • Qt Core
  • Qt Gui
  • Qt Network
  • Qt Declarative
  • Qt Svg
  • Qt Charts
  • Qt mqtt (using WebSocketIODevice from the websockets example)

To use QtMqtt, you will need to integrate the WebSocketIODevice class from the websocketsubscription example in QtMqtt into your app.


Things under construction

  • Improved multithreading support: Qt 5 supports starting secondary threads, using the pthreads implementation provided by Emscripten. Qt 6.3 improves on this and adds support for calling exec() and running the event loops on on secondary threads.
  • Expermiental support for Emscripten’s Asyncify, which enables calling blocking API like QEventLoop::exec() and QDialog::exec() on the main thread.
  • Improved networking support. Qt 5 supports web sockets and QNetworkAccessmanager http(s) requests. Qt 6 adds support for TCP and UDP sockets, using Emscripten’s socket tunneling
  • Improved clipboard support. Qt 5 supports text copy-paste, Qt 6.3 improves on this and adds suport for copying and pasting images.


Blog Topics: