Lorn Potter

Qt for WebAssembly

Published Tuesday May 22nd, 2018
11 Comments on Qt for WebAssembly
Posted in Announcements, Biz Circuit & Dev Loop | Tags:

You may have seen the news that Qt Project released Qt for WebAssembly tech preview.

We use Emscripten to compile Qt into something that runs in a web browser from a web server. 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. 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.

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

Developing/Debugging

Debugging is a bit arcane 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.

Screenshots

Not everything works perfectly, but here are some screenshots of a few working examples:

collidingmice:

collidingmice-qt-for-webassembly-example

Standarddialogs: showing multiple windows

standarddialogs-qt-for-webassembly-example

QOpenGLWindow works and seems to get near 60 fps. Although they are ‘full screen’ windows currently, which means they will take up the full browser window. QOpenGLWidget still has some issues. Some shaders seem to have some issues.

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

Openglwindow:

openglwindow-qt-for-webassembly-example

Besides QtBase and QtDeclarative that use the ‘wip/webassembly’ branch, Qt modules known to work are:

  • QtCharts
  • QtGraphicalEffects
  • QtQuickControls
  • QtQuickControls2
  • QtWebSockets
  • QtMqtt (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.

There is also a WIP MR for a backend to QtSensors for orientation changes on mobiles (including laptops) that I have thrown together which compiles, but hasn’t been tested.

Qml clocks:

screen-shot-2018-05-18-at-15-50-05

Since javascript and webassembly have only one thread, QtDeclarative was made to work with only one thread.

textinsgnode:

screen-shot-2018-05-18-at-15-53-30

 

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

QtCharts oscilloscope:

screen-shot-2018-05-18-at-15-55-45

IoT sensor demo showing demo data

screen-shot-2018-05-18-at-15-56-05

There is a WIP merge request for clipboard support, but it is unfinished at this time. It is working for simple text.

Things that don’t work QTBUG-63917

  • Multithreading QTBUG-64700
    • there is a stub QThread
    • disabled in the browsers due to the Spectre vulnerability
  • Most QNetwork QTBUG-63920
    • no DNS lookups due to javascript sandbox
    • simple QNAM requests should work.
  • Local Filesystem access QTBUG-67834
  • persistent QSettings, it syncs the config rather slow and asynchronously QTBUG-63923
  • QOpenGLWIdget QTBUG-66944
  • Opengl only works fullscreen QTBUG-67717
  • some shaders QTBUG-67338
    • QResource fails to find shaders built-in to Qt
  • The exec loop does not function like other platforms QTBUG-64020
    • exec() event loop will not return where you expect it to
    • Returning values from modal dialogs are known not to work but can be worked around by using non-modal signals and show(). Although modal dialogs/windows will still open.
  • toUpperCase QTBUG-66621
  • QClipboard QTBUG-64638

Examples

 

Do you like this? Share it
Share on LinkedInGoogle+Share on FacebookTweet about this on Twitter

Posted in Announcements, Biz Circuit & Dev Loop | Tags:

11 comments

David Weisgerber says:

Great! Please keep improving it so that it will become more and more usable.

Tham says:

This is amazing,

Vadim Peretokin says:

Yes! Loving to see more effort be put into this. Would love to put our desktop app to be able to compete with the web apps!

angelus says:

Great! But it’s a little bit of a problem, it doesn’t support touch.

Lorn Lorn says:

This tech preview does not. But it will at some point in time:
https://bugreports.qt.io/browse/QTBUG-68347

angelus says:

Very cool!!!

Tham says:

First of all, thanks, this module is amazing. Never though the day of developing large scale webapp by Qt5 could come true, not all customers accept native apps(they believe everything should be webapp).

Do you have roadmap of the webassembly support?
Would you solved the multithread, QNetwork and local filesystem issues on Qt5.12?
Any chance Qt5.12 would make webassembly as a mature module(not tech preview anymore)?

Eskil Abrahamsen Blomfeldt Eskil Abrahamsen Blomfeldt says:

We hope Qt for WebAssembly will be mature and out of technology preview in Qt 5.12, but it does depend on the amount of feedback we get and amount of work necessary.

Some of the issues you mention are actually in the WebAssembly platform and not in Qt itself, so they may be unsolvable, or the schedule for fixing them is out of our control.

Specifically, the threading support in WebAssembly has been explicitly disabled in the platform because of the Spectre vulnerability and will remain disabled until a suitable work-around is found. Once threading support is reintroduced in the platform, Qt will support it simply by removing the “-no-thread” flag when configuring.

As for local file access, there are restrictions due to the sandboxing of the application. Morten has a change that introduces some alternative APIs for handling file access in a way which is compatible with the browser’s security model: https://codereview.qt-project.org/#/c/228599/

Tham says:

Thanks, hope the other users of Qt found this module useful to them as well. Exactly most of the functions I need are there, network communication could be replaced by websocket.

Issues stopping us embrace this tech preview are

1. It is tech preview, not yet mature
2. DNS look up do not work, do this mean QNetworkAccessManager wouldn’t be able to perform get, post(https protocol) if the address is not based on ip?
3. WebAssembly do not have decent support on multithread yet, our apps need to communicate with server from times to times, it is not a good sign to freeze the ui when uploading/downloading data. a website say trial version would launched by July 2018, hope it works well.

Hope these feedback could help you a little bit. Appreciate for your works.

Christoph says:

Nice! Will it be possible to have the browser cache the compiled assembly, so the user does not have to wait in the “Downloading/Compiling” step?

Anik says:

If this module gets matured enough, it will be a blessing to the people like us who uses c++ on a daily basis but also has co-workers using javascript!! Great initiatives. Hope this will be an open source module in the future too.

Commenting closed.

Get started today with Qt Download now