Qt for WebAssembly

Sorry, should have been more clear about this point:
I have the "same" rendering code successfully running in webassembly (https://sgsaenger.github.io/vipster/emscripten/), so it should be more or less correct.

This standalone app obtains canvas and webgl2 context via the emscripten helper functions, so glGetString(GL_VERSION) reports OpenGL ES 3.0 (WebGL 2.0 (OpenGL ES 3.0 Chromium)) as expected.
Note the weird mismatch in OpenGL ES 2.0 (WebGL 2.0 (OpenGL ES 3.0 Chromium)) when Qt is doing its initialization first.

My guess is that somewhere there's a conflict between my setup code (or expectations) and what Qt is doing before initGL() is reached.
Is there maybe any working GLES3 QOpenGLWidget examples?

@zeethree50 I found this bug
https://bugreports.qt.io/browse/QTBUG-105582

@lorn-potter I try asap

I also know this is quite old, but the correct QT docs are hard to find when you approach it from the error first -> search later stance.
TL;DR You need to add your emsdk path to Options >> Devices >> Webassembly tab, before trying to configure any kind of Kit for Webassembly. This here describes it with pictures to guide you along:
https://doc-snapshots.qt.io/qtcreator-master/creator-setup-webassembly.html

@JoeCFD said in Warning: This file is not part of any project:

INCLUDEPATH += $$PWD
DEPENDPATH += $$PWD

That didn't seem to work :/
I'll also note the issues that are coming up in QtCreator
44826be9-71fb-4081-adb9-3448a549f11c-image.png
My Emscripten version is 3.1.6, it just doesn't seem to recognize the version number
fa284d6c-cfe6-4996-a07c-e655a0a8d6dd-image.png
and I've tried with 3.0.0 and 1.39.7 with WebAssembly 5.15.2. This project is currently 6.3.2 but I can't get any WebAssembly to work

Qt WebAssembly uses emscripten, so technically you can call any Javascript from your C++ code using emscripten API. See https://emscripten.org/docs/porting/connecting_cpp_and_javascript/Interacting-with-code.html#interacting-with-code-call-javascript-from-native. Maybe that will help you change the query in the URL?

At least the opposite - reading URL query from C++ code is possible. That I have tested.

#include <emscripten/val.h> ... emscripten::val location = emscripten::val::global("location"); auto search = location["search"].as<std::string>();

For cross-platform code wrap the emscripten stuff in #ifdef Q_OS_WASM.

I researched the same thing and concluded it can't be done. The Qt WebSocket in WASM is a thin wrapper over the browser websocket support - same thing that can be used in Javascript. And that does not support ignoring SSL errors, see https://security.stackexchange.com/questions/211618/bypassing-valid-certificate-requirement-for-websockets/211636#211636.

Only thing that does work, is to gain access to wss://IP:PORT, first open https://IP:PORT/index.html in your browser and manually make the user click "Proceed to IP (unsafe). After that you can open a websocket to same IP:PORT.

aaafdb05-cd7e-47d4-ad64-8bfd47e6f721-image.png

This is for me enough to test my app. In production should use a valid certificate.

Another option for testing might be to use the qtwasmserver described in https://doc.qt.io/qt-6/wasm.html#running-applications but I personally have not tried it.

@jhayar If you want to report a bug use the Qt bug tracker: https://bugreports.qt.io/secure/Dashboard.jspa

I have found the answer using emscripten , will mark this as solved

@Pradson said in Unable to include 'Windows.h' in Qt WebAssembly project.:

Please suggest how should I include Windows API into the WebAssembly project?

I would assume you cannot, e.g. read https://github.com/emscripten-core/emsdk/issues/153

Emscripten is a cross-compiler, it compiles code to the web - it can't compile windows-specific code, as those APIs are not implemented on the web platform.

Anyone ?

I want to know what variable can we use in .pro in creating webapp ? when i check the documentation regarding the variables there's no webassembly on the docs .

i need this to separate android,ios,windows,linux included path to webassembly includedpath , so i can use one project on all platform
what i need to know in webassembly is

What variable in .pro file to separate webapp to other project like , android{} , ios{} win{} is it wasm{}? or web{} ? or any other ?

How can i call javascript method from QML ? or c++ ?

What variable in .pro file that can add javascript file to my project

What variable in .pro file that can add folders only for webassembly project ?

Sometimes using qrc resource file is not needed to import qml custom control from other folders i try this on my self that i can use "/where/is/the/custom/control/path" as NameSpaceAlias on my other project without saving it into .qrc , but on the webassembly eventhough i define the file in .pro in DISTFILES, after compilation the files from distfiles are not included on the folder where compiled wasm located , so this gives me error

@Pradson
As of 2020 at least it does not look good: https://forum.qt.io/topic/119516/python-backend-qml-frontend-can-i-convert-to-webassembly

@lorn-potter is the expert guy, he may see this and comment if there is any update....

@Pradson said in Qt for WebAssembly package is not available with Qt/MSVC binaries.:

VisualStudio_2017 compatible Qt5.15.10

You installed using Offline Installer, right?
In that case you need to download offline installer for Qt for Web Assembly or use Qt Online Installer.

Actually, if you use QWebSockets (there is an example client wsclient in the QWebSockets examples) it can work without asyncify.

@Renio I have not tried Qt6. In Qt5, I have to use qml for virtual keyboard display. In mobile(Android), native keyboard is used. On Linux, Qt keyboard is applied. No issues like yours.
keyboard needs to be hidden when focus is false on a line edit or text input.

Or you could fix it yourself if you happen to be running linux with GNU bash.. just make a new shell file

** WARNING ** may cause your Qt installation to have unexpected behavior as this is not a supported fix but merely a workaround to get the compiler to a state of being able to compile.

fix_qt_paths.sh

#!/bin/bash export QTPATH=/usr/local/qt/6.4.0/wasm_32 cd $QTPATH grep -rLi /home/qt/work | xargs -i@ sed -i \ s+/home/qt/work/qt/qtmultimedia/build/target+` echo $QTPATH`+g @ grep -rLi /home/qt/work | xargs -i@ sed -i \ s+/home/qt/work/qt/qtdeclarative/build/target+`echo $QTPATH`+g @

Obviously replace QTPATH with the path to the Qt installation you wish to modify.
and voila all is working.

This may be an incomplete fix as well.