Qt for WebAssembly

For your undefined symbols, sometimes this is all that needs to be done: replace #include <QObject> with #include <QtCore/QObject> Unfortunately, I am still searching how to do this with my custom headers, as that is throwing me the undefined symbol errors. #include "myclass.h" Is not working.

@steno said in Building Qt Apps to Wasm: What was your solution for machine type must be wasm32? I have been seeing this as well. If you use the prebuilt binaries, you need to use emscripten version 1.38.27 or 1.38.30 for threaded. ./emsdk install sdk-fastcomp-1.38.27-64bit ./emsdk activate sdk-fastcomp-1.38.27-64bit

It depends entirely on what your application actually does, as there are quite a few features present in the desktop and embedded platforms that will not work on WebAssembly platform. There are plenty of example apps: https://www.qt.io/qt-examples-for-webassembly https://s3.eu-west-2.amazonaws.com/wasm-qt-examples/last/index.html

For those wondering, I got it set up like this: [image: d99fa163-7a7c-46ba-aad7-8382d71ade29.png] You have to manually copy the environment variables set when you run source ./emsdk_env.sh in the shell. I did not know that source was a shell builtin

You need to explicitly enable the webassembly plugin. From the menu: QtCreator->About plugins->Device Support->WebAssembly (experimental) Depending on your version of emscripten that you installed, it may or may not successfully detect the emscripten compiler.

Success :) To remove clipboard error, i disabled clipboard in source code : void QWasmClipboard::initClipboardEvents() { if (!hasClipboardApi) return; /*val permissions = val::global("navigator")["permissions"]; val readPermissionsMap = val::object(); readPermissionsMap.set("name", val("clipboard-read")); permissions.call<val>("query", readPermissionsMap); val writePermissionsMap = val::object(); writePermissionsMap.set("name", val("clipboard-write")); permissions.call<val>("query", writePermissionsMap);*/ hasClipboardApi = false; } Clipboard permission is not managed on my firefox (63.0.3 64bit). And to the blank page, i used QQuickView with resizeMode at SizeRootObjectToView : QQuickView* view = new QQuickView(); view->setResizeMode(QQuickView::SizeRootObjectToView); view->setSource(QUrl(QStringLiteral("qrc:///main.qml"))); view->show();

Thanks Lorn. It was easier to rebuild Qt at the end, and it solved the issue.

It needs to be served from a server. Luckily, there is a development tool in emscripten called emrun that you can use to serve the html file that gets generated when building.

@tham your browser has a variety of option for you to do so. For chrome you could do one of the following: CTRL-Shift-R Use incognito mode Use the dev settings to disable it- Use Chrome profiles to create a profile with all caching disabled I don't know if there's a command or something the server could send to your browser to force a complete reload.

You can attach remote debugging and get some console output, which may help. You might need to enable webassembly from chrome://flags

Ok, so I updated my OS, and rebuilt my sources using the configure options : ./configure -xplatform wasm-emscripten -nomake examples -prefix $PWD/qtbase -no-warnings-are-errors -device-option WASM_OBJECT_FILES=1 -feature-thread And building my sources with the command: gmake -j4 module-qtbase module-qtdeclarative module-qtquickcontrols2 module-qtwebsockets module-qtsvg module-qtcharts module-qtmqtt module-qtdatavisualization It all compiles pretty well. But know when I try to compile a thread example (Mandelbrot for example) the building gives my this: Qt/5.13.1/Src/qtbase/plugins/imageformats/libqwebp.a /Users/macbook/Qt/5.13.1/Src/qtbase/lib/libQt5Widgets.a /Users/macbook/Qt/5.13.1/Src/qtbase/lib/libQt5Gui.a /Users/macbook/Qt/5.13.1/Src/qtbase/lib/libqtlibpng.a /Users/macbook/Qt/5.13.1/Src/qtbase/lib/libqtharfbuzz.a /Users/macbook/Qt/5.13.1/Src/qtbase/lib/libQt5Core.a /Users/macbook/Qt/5.13.1/Src/qtbase/lib/libqtpcre2.a wasm-ld: error: 'atomics' feature is disallowed by main_7512882a.o, so --shared-memory must not be used wasm-ld: error: Target feature 'atomics' used in main.o is disallowed by main_7512882a.o. Use --no-check-features to suppress. wasm-ld: error: Target feature 'atomics' used in mandelbrotwidget.o is disallowed by main_7512882a.o. Use --no-check-features to suppress. wasm-ld: error: Target feature 'atomics' used in renderthread.o is disallowed by main_7512882a.o. Use --no-check-features to suppress. wasm-ld: error: Target feature 'atomics' used in mandelbrot.js_plugin_import.o is disallowed by main_7512882a.o. Use --no-check-features to suppress. wasm-ld: error: Target feature 'atomics' used in moc_mandelbrotwidget.o is disallowed by main_7512882a.o. Use --no-check-features to suppress. wasm-ld: error: Target feature 'atomics' used in moc_renderthread.o is disallowed by main_7512882a.o. Use --no-check-features to suppress. wasm-ld: error: Target feature 'atomics' used in main_ad242c24.o is disallowed by main_7512882a.o. Use --no-check-features to suppress. wasm-ld: error: Target feature 'atomics' used in qwasmintegration_b84335f2.o is disallowed by main_7512882a.o. Use --no-check-features to suppress. wasm-ld: error: Target feature 'atomics' used in qwasmwindow_9693253c.o is disallowed by main_7512882a.o. Use --no-check-features to suppress. wasm-ld: error: Target feature 'atomics' used in qwasmscreen_5d172ee8.o is disallowed by main_7512882a.o. Use --no-check-features to suppress. wasm-ld: error: Target feature 'atomics' used in qwasmfontdatabase_96baba53.o is disallowed by main_7512882a.o. Use --no-check-features to suppress. wasm-ld: error: Target feature 'atomics' used in qwasmeventtranslator_b3a8cbb6.o is disallowed by main_7512882a.o. Use --no-check-features to suppress. wasm-ld: error: Target feature 'atomics' used in qwasmeventdispatcher_d440ff3d.o is disallowed by main_7512882a.o. Use --no-check-features to suppress. wasm-ld: error: Target feature 'atomics' used in qwasmcompositor_943e9174.o is disallowed by main_7512882a.o. Use --no-check-features to suppress. wasm-ld: error: Target feature 'atomics' used in qwasmcursor_54ea64f6.o is disallowed by main_7512882a.o. Use --no-check-features to suppress. wasm-ld: error: Target feature 'atomics' used in qwasmopenglcontext_242faabc.o is disallowed by main_7512882a.o. Use --no-check-features to suppress. wasm-ld: error: Target feature 'atomics' used in qwasmtheme_592c2dd9.o is disallowed by main_7512882a.o. Use --no-check-features to suppress. wasm-ld: error: Target feature 'atomics' used in qwasmclipboard_11896fc1.o is disallowed by main_7512882a.o. Use --no-check-features to suppress. wasm-ld: error: Target feature 'atomics' used in qwasmservices_bcfe057a.o is disallowed by main_7512882a.o. Use --no-check-features to suppress. wasm-ld: error: too many errors emitted, stopping now (use -error-limit=0 to see all errors) shared:ERROR: '/Users/macbook/emsdks/emsdk/upstream/bin/wasm-ld -o /var/folders/l_/53ppf0452z7bcrt24txtwfq00000gn/T/emscripten_temp_chKBFJ/mandelbrot.wasm --allow-undefined --lto-O0 /Users/macbook/Qt/5.13.1/Src/qtbase/lib/libqtfreetype.a /Users/macbook/Qt/5.13.1/Src/qtbase/lib/libqtlibpng.a -L/Users/macbook/emsdks/emsdk/upstream/emscripten/system/local/lib main.o -L/Users/macbook/emsdks/emsdk/upstream/emscripten/system/lib mandelbrotwidget.o -L/Users/macbook/.emscripten_cache/wasm-obj renderthread.o mandelbrot.js_plugin_import.o moc_mandelbrotwidget.o moc_renderthread.o /Users/macbook/Qt/5.13.1/Src/qtbase/plugins/platforms/libqwasm.a /Users/macbook/Qt/5.13.1/Src/qtbase/lib/libQt5EventDispatcherSupport.a /Users/macbook/Qt/5.13.1/Src/qtbase/lib/libQt5FontDatabaseSupport.a /Users/macbook/Qt/5.13.1/Src/qtbase/lib/libqtfreetype.a /Users/macbook/Qt/5.13.1/Src/qtbase/lib/libQt5EglSupport.a /Users/macbook/Qt/5.13.1/Src/qtbase/plugins/imageformats/libqgif.a /Users/macbook/Qt/5.13.1/Src/qtbase/plugins/imageformats/libqicns.a /Users/macbook/Qt/5.13.1/Src/qtbase/plugins/imageformats/libqico.a /Users/macbook/Qt/5.13.1/Src/qtbase/plugins/imageformats/libqjpeg.a /Users/macbook/Qt/5.13.1/Src/qtbase/plugins/imageformats/libqtga.a /Users/macbook/Qt/5.13.1/Src/qtbase/plugins/imageformats/libqtiff.a /Users/macbook/Qt/5.13.1/Src/qtbase/plugins/imageformats/libqwbmp.a /Users/macbook/Qt/5.13.1/Src/qtbase/plugins/imageformats/libqwebp.a /Users/macbook/Qt/5.13.1/Src/qtbase/lib/libQt5Widgets.a /Users/macbook/Qt/5.13.1/Src/qtbase/lib/libQt5Gui.a /Users/macbook/Qt/5.13.1/Src/qtbase/lib/libqtlibpng.a /Users/macbook/Qt/5.13.1/Src/qtbase/lib/libqtharfbuzz.a /Users/macbook/Qt/5.13.1/Src/qtbase/lib/libQt5Core.a /Users/macbook/Qt/5.13.1/Src/qtbase/lib/libqtpcre2.a /Users/macbook/.emscripten_cache/wasm-obj/libc-mt.a /Users/macbook/.emscripten_cache/wasm-obj/libcompiler_rt.a /Users/macbook/.emscripten_cache/wasm-obj/libc-wasm.a /Users/macbook/.emscripten_cache/wasm-obj/libc++-mt-noexcept.a /Users/macbook/.emscripten_cache/wasm-obj/libc++abi-mt-noexcept.a --whole-archive /Users/macbook/.emscripten_cache/wasm-obj/libembind-rtti.a --no-whole-archive /Users/macbook/.emscripten_cache/wasm-obj/libgl-mt-webgl2.a /Users/macbook/.emscripten_cache/wasm-obj/libdlmalloc-mt.a /Users/macbook/.emscripten_cache/wasm-obj/libpthread-mt.a /Users/macbook/.emscripten_cache/wasm-obj/libc_rt_wasm.a --import-memory --import-table --shared-memory -mllvm -combiner-global-alias-analysis=false -mllvm -enable-emscripten-sjlj -mllvm -disable-lsr --export __wasm_call_ctors --export __data_end --export main --export malloc --export free --export setThrew --export __errno_location --export fflush --export emscripten_get_global_libc --export __pthread_tsd_run_dtors --export _register_pthread_ptr --export pthread_self --export __emscripten_pthread_data_constructor --export emscripten_futex_wake --export memalign --export emscripten_builtin_memalign --export realloc --export emscripten_builtin_free --export _get_environ --export _ZSt18uncaught_exceptionv --export emscripten_GetProcAddress --export emscripten_webgl_make_context_current --export emscripten_webgl_get_current_context --export strstr --export _get_tzname --export _get_daylight --export _get_timezone --export strlen -z stack-size=5242880 --initial-memory=1073741824 --no-entry --max-memory=1073741824 --global-base=1024' failed (1) gmake: *** [Makefile:320: mandelbrot.js] Error 1 10:58:20: The process "/usr/local/bin/gmake" exited with code 2. Error while building/deploying project mandelbrot (kit: Qt 5.13.1 (Src)) When executing step "Make" 10:58:20: Elapsed time: 00:58. And I have no clue what it means. Thanks.

Do anyone know workarounds to avoid this bug?Thanks

Okay, thanks! I would prefer it to use less CPU in that case so I will open a bug after I tried it without multithreading. Edit: Single threaded its fine (QTBUG-79953)

I was able to configure an out-of-source build, passing win32-msvc2019 as the argument for -platform, I got the output shown in this Gist: https://gist.github.com/DragonOsman/3c198095a61a7c38e2b019d3a964d416 . Notice the errors. I configured with this command: C:/qt5/configure -static -release -opensource -feature-thread -qt-zlib -qt-libjpeg -qt-libpng -platform win32-msvc2019 -prefix C:/qt5/qtbase/win32-msvc2019 from a separate directory outside the Qt source directory and tried to build by running just nmake with no arguments. Any help is appreciated. Thanks in advance. Edit: I tried again after re-configuring and this time not passing -static at all, but it still failed. Here's the build log from the recent try: https://gist.github.com/DragonOsman/c13d23ceca50244fb4a195f67d8e613d .

That is great news. Thanks again.

The javascript FS functions we use for syncing the settings are asynchronous, so the c'tor will complete before the settings file has synced into the wasm sandbox filesystem. That said, there is a change that I have found helps somewhat. If you build Qt yourself, you could try this: https://codereview.qt-project.org/c/qt/qtbase/+/264618

You can use the prebuilt Qt for WebAssembly from the official Qt installer. Anyway, since your compilation fails on Qt3D, try skipping that module.

I think the reason for the Assert Failure errors is that I forgot to delete the files in the qtbase folder after a given build attempt. I think that's fixed now, but I still have some issues in building Qt so I'll open a thread now.

I am not even sure QtWebGL works with emscripten/ QtWebAssembly

@DamienL QFileDialog::getOpenFileContent is the workaround for accessing system/local files due to the javascript sandbox that webassembly lives in.