Qt for WebAssembly

@lorn-potter Thanks for getting back to me!

I'm trying to build this project:
https://github.com/herewegoblueno/cs1230-final
Just to provide context, this works well when built for Mac.

And yes I am importing GL/glew.h myself.

Also by the way I've also noticed that the compilers don't recognize the standard libraries like <vector>, <map>, etc (or maybe that's just the static checker? not sure if those will result in compile time errors since I can't build due to glew anyways)

Hi,

What I'm doing on Android is the following:

I build a qml ui and some corresponding c++ and inline js code that make sure that the qml ui can communicate with the android java layer through the android webview utilizing webchannel messageing. See: https://github.com/r0ller/qwa/tree/main/qmlwasm1
Files:
main.qml (just the ui logic)
main.cpp (opening webchannel port)
messageboard.cpp (sending/receiving messages through webchannel port)

The java layer passes the call to a c/c++ backend lib via JNI and the returned response is sent back to qml via webmessage channel. The corresponding code:
https://github.com/r0ller/qwa/blob/main/Android/qmlwasm1/app/src/main/java/com/bitroller/qmlwasm1/MainActivity.java

All that works fine, the error does not appear in the Android but only in the nodejs use case when reloading the client from the nodejs server. However, the ui part what gets loaded from the server is the same what I load in the webview on Android. I also don't get any errors when the project is built with the same qml ui as native.

By the way, you can find both the apk and the nodejs code in the repo so running the nodejs variant is just issuing "node index.js" in the qwa_node directory after cloning ;) Installing the apk of course is a few clicks and taps more.

(Yesterday I added a springanimated rect to the qml ui which I did not copy over to the android project so there's a difference but that's not the point here.)

BR,
r0ller

I noticed, that although I am not able to "write" Text in the input field, I can paste text from elsewhere?

BINARYEN_TRAP_MODE=clamp has been part of Qt WebAssembly since before is was integrated into Qt proper.
Look at: mkspecs/wasm-emscripten/qmake.conf

It is not needed for WASM_OBJECT_FILES, which is now the default, so it was removed in the 5.15 series.

There was a typo (a missing + in +=) for a while that stopped it from actually being used

@Edwin-F WebSockets are two way communication, but only a client process can run on WebAssembly/browser.
https://doc.qt.io/qt-5/qtwebsockets-index.html

Found the problem: I had installed Qt v 6.0.0 with emscripten 1.39.8. documents say 1.39.8 should work with Qt v5.15.0. Works after installing the correct Qt version.

Thank you.

Problem solved by removing the emrun flag. I can now specify custom arguments in the qtloader.js using emscripten's Module.arguments like this :

Module['arguments'] = ['FirstArg', 'SecondArg'];

WebAssembly as a platform, does not have native support for servers (same as javascript). Emscripten does support using servers via proxy, but that requires a real server.
As well, Qt WebAssembly does not yet support emscripten tcp proxy as it requires to run main() in a webworker and pass graphical data to the main thread for canvas access.

Are you using Qt Creator?

Try changing the emcc compiler config's abi to asmjs-unknown-unknown-emscripten-32bit.

@fhryilmaz @winsvu @GaryT

You could use cookies from the javascript side:

https://emscripten.org/docs/porting/connecting_cpp_and_javascript/Interacting-with-code.html

The problem was related to having a previous version installed. The .emscripten file was not updated during the install of emscripten 1.39.8 to reflect the new version. Once I correct it, QT Creator detected the installed version (1.39.8) . I was able to build and run a simple program. However, QT Creator still generate a couple of warnings.

WebGL is based on opengl es2, WebGL 2 is based on opengl es3. Emsripten (and therefor Qt WebAssembly) has support for both.
Thread support in wasm is still experimental, there are limitations.

@lorn-potter
Hi there. I know Qt WebAssembly is a work-in-progress. Is there a current (preferably "definitive") list anywhere of what does not work from Qt which we can read/refer other questioners to? Otherwise we seem to wait for you to pop in here! :)

on Windows, Emscripten uses MinGW as the backend. Emscripten is just python scripts that call system compilers. It uses clang to output wasm binaries.
Qt 5.15.x requires Emscripten 1.39.8

To get Qt Creator to use emscripten for wasm, you need the correct version of Emscripten installed and then enable the experimental wasm plugin.

@jsulm I get an exception message when the exec() method (QDrag) is called (toolmaster.h: mousePressEvent). I thought it wad due to the missing multithreading support.

This is the error message when I compile it with the default 5.15.1 binaries (console output in Firefox):

Uncaught Please compile your program with async support in order to use asynchronous operations like emscripten_sleep

Thanks guys @SGaist and @lorn-potter

It seems like it is not really supported at this time and I will have to look into the alternative of putting a layer between the QML and Python backend in C++, essentially becomes a C++ app, but I only want to use C++ as a pass through to the Python somehow using PyBind11...I will try to see if that will work.