You may have seen the news that we released WebAssembly 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 WebAssembly 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 WebAssembly 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 WebAssembly Screenshots
Here are some screenshots of a few examples also available in the Qt WebAssembly Examples page:
https://www.qt.io/qt-examples-for-webassembly
Additional examples by the community here:
https://s3.eu-west-2.amazonaws.com/wasm-qt-examples/last/index.html#
Qt 6 WebAssembly QtQuick3d
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.
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.
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.
Slate - A sprite drawing app that demonstrates a full "main window" style application with menus and toolbars as well as save and load functionality.
Chart Themes - Demonstrates the look and feel of different built-in Qt Charts themes.
QtCharts, QtGraphicalEffects, QtQuickcontrols, QtQuickControls2 all work without changes.
QML Chart - Basic example of different chart types in QML API of Qt Charts.
Developing/Debugging with Qt WebAssembly
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.
