Qt for WebAssembly on mobile devices

Qt for WebAssembly on mobile devices, specifically phones, has lacked an essential feature - support for the native keyboard. It may or may not have worked. If it worked, it did not work very well. The tricky issue is opening the keyboard when needed and closing when it wasn't. There is no simple API for doing that on any platform we target - iOS, Android and Windows.

Although it feels a bit hacky to me to open the keyboard using javascript , we use Emscripten's C++ interface to create a hidden javascript text input element and set focus to that, which opens the platform keyboard.

Emscripten on Android had one other issue - the usual Emscripten input event API was not working. Nothing being typed on the native virtual keyboard was being handled like on other platforms. I found I could utilize the hidden input element that is used to pop up the keyboard, to listen for input characters and then send them to Qt. 

As it is, this patch adds support for native mobile keyboard for iOS, Android and Windows on Qt for WebAssembly. (now merged into dev as 66a76a5def46d0e4a330f7130ad440c639b87cf7), too late to make it into 6.3.

Other issues on mobile are memory (as usual). Up until recently, Safari limits browser memory to much less than the other browsers. 

Other areas that Qt covers for mobile devices that do not work on Qt for WebAssembly yet are sensors and bluetooth connectivity. Although there is a patch for some sensors support, it has not been merged and probably needs updating. It may not work at all, either.

Bluetooth connectivity for javascript is currently only supported on the Chrome browser and is currently experimental. While I could probably add this support to Qt WebAssembly, it would not get merged and the API might be too changey.

Any areas you find Qt WebAssembly is lacking on mobile, please report to https://bugreports.qt.io/

Qt Multimedia has a new friend...

 QtMultimedia just got a new platform to run on - Qt for WebAssembly!

I am happy to announce a new platform contribution for Qt Multimedia.

As of change https://codereview.qt-project.org/c/qt/qtmultimedia/+/348150 and very much thanks to Qt contributor, Raffaele Pertile, we now have audio play and record on the WebAssembly platform for Qt 6.2.

This is possible  as Emscripten has built-in support for OpenAL, which this patch uses to push audio data around. So now, all your Qt webAssembly apps can have sound effects! \0/

 

 

  

Qt WebAssembly: prompt on exit

 I sometimes get asked if there is a way to let a Qt app ask the user if they really want to close the app when the browser tab or window gets closed by the user.

The answer is yes and no. Yes, in that there is, and no in that it won't be your own Qt dialog/prompt.

We can use javascript in Qt webassembly apps, so the prompt will be opened by the browsers javascript. 

How?

There are two ways to run javascript. By using emscripten macro EM_ASM, or including emscripten/val.h and using straight c++.

EM_ASM:

The is the easiest way but uses a macro.

#include <emscripten.h>

Just add something like this, in your app constructor function:

    EM_ASM(

           window.onbeforeunload = function (e) {

                e = e || window.event;

                return 'Sure';

            };

    );

C++:

This is a bit more complicated, and involves a global static function.

#include <emscripten/bind.h>

#include <emscripten/val.h>

#include <emscripten.h>

static emscripten::val mybrowserBeforeUnload(emscripten::val e)
{
   return emscripten::val("Sure");
}


EMSCRIPTEN_BINDINGS(app) // must be unique name!
{
    function("myBrowserBeforeUnload", &mybrowserBeforeUnload);
}

and in the c'tor:

 emscripten::val::global("window").set("onbeforeunload", emscripten::val::module_property("myBrowserBeforeUnload"));


The key is to return a string. Any string will do.
and it looks something like this:

Qt 6 WebAssembly QtQuick3d or, NOT April fools

 I am so happy right now! As of sha 4972fdb350fe79e18b0413e74028cd9b9803f96b (1 April), you can build Qt 6 for WebAssembly!

Not only that, because QtQuick3d in Qt 6 now supports OpenGL ES2/3, it will run in a web browser!

Here is a video of the helloquick3d example, running in Firefox: [edit] running at 62 fps

 

 

if that does not work, try this link:

https://vimeo.com/manage/videos/532206713

 

Now I can get on with my life and stop working on build system stuff!

Qt 6 WebAssembly

ahhh well now. We all know that in Qt6, qmake was ditched for cmake for the build system of Qt itself, and we are playing catch-up in the WebAssembly platform.

History

First a little history of the Qt build system.

tmake was a perl script that generates Makefiles. If I recall correctly, it was originally written by Sam Magnuson. (I am sure someone who started in Trolltech before me will correct me if I am wrong). I met Sam when he was working at Trolltech's Brisbane office when I was hired as Qtopia Community Liasion. (Briefly, as he soon moved back to the US, after he sold me some furnature and gave me his cat! Still have the Ikea chair.)

qmake was tmake re-written in c++, which was started around 2000. (OMG - its 21 years old! - so old, it farts dust!)

qmake was added on, hacked up to tackle all kinds of things, which brings us to Qt 6.

cmake: The behemoth.

Knowing next to nothing about cmake made this journey a bit bumpy. Add in all the stuff that Qt implements in cmake and on top of that, the special arguments we use for WebAssembly means I am glad this patch is about finished!

Some things are not yet working, such as using cmake to build Qt WebAssembly applications, luckily qmake for app builds is still there... for now.

First off, until this change gets integrated into the git repo, you can grab it here:

https://codereview.qt-project.org/c/qt/qtbase/+/313243

You will need:

• Emscripten version 2.0.12 (others in the 2.0.x range should also work)
• Ninja build tool (optional but highly recommended)
• cmake (3.19 at least, I think)

Host build

One of the differences between Qt5 and Qt6 is that you will need a host build with the same versioning, since Qt WebAssembly is a cross platform build. In the near future, you will be able to install Qt binary release and use that, but for now, you need to build your host Qt yourself (to get the same version as the git repo).

You need a host build of both QtBase and QtDeclarative if you are to use declarative in your Qt WebAssembly apps.

WebAssembly build

On all platforms, you will need to set CMAKE_TOOLCHAIN_FILE and QT_HOST_PATH. Emscripten comes with a convient cmake toolchain file, so set the CMAKE_TOOLCHAIN_FILE to where ever it is installed. QT_HOST_PATH is set to where the Qt 6 host directory is.

Windows:

Just like with Qt5, you will need the Mingw toolchain installed.

On windows, we can use the mingw toolchain that gets installed with Qt binaries, so make sure mingw32-make is in your PATH. I usually do this after I run emsdk_env.bat to set up the Emscripten toolchain. To configure Qt, I use something like:

cmake -DCMAKE_GENERATOR=Ninja  -DCMAKE_TOOLCHAIN_FILE=H:\development\emsdk\upstream\emscripten\cmake\Modules\Platform\Emscripten.cmake -DFEATURE_developer_build=ON -DFEATURE_headersclean=OFF -DWARNINGS_ARE_ERRORS=OFF -DQT_BUILD_EXAMPLES=OFF -DQT_BUILD_TESTS=OFF -DQT_HOST_PATH=H:\development\platforms\desktop\qtbase H:\development\depot\qt\qt5\qtbase

Linux/Mac:

You will need gcc on Linux and Xcode 10.15 or greater on Mac.

cmake -DFEATURE_developer_build=ON

-DFEATURE_headersclean=OFF

-DWARNINGS_ARE_ERRORS=OFF

-DQT_BUILD_EXAMPLES=OFF

-DQT_BUILD_TESTS=OFF

-DCMAKE_GENERATOR=Ninja

-DQT_HOST_PATH=/development/platforms/desktop/qtbase

-DCMAKE_TOOLCHAIN_FILE=/emsdk/upstream/emscripten/cmake/Modules/Platform/Emscripten.cmake

/depot/qt/qt5/qtbase

There are a couple experimental features you can configure Qt for, such as

• threads:  -DFEATURE_threads=On

I have probably forgotten something important, but this will get someone started that is interested. I have tested this build on Linux, Mac and Windows.

QtDeclarative:

To configure declarative using cmake, it's fairly straight forward. In the qtbase/bin directory is a helper tool:

qt-configure-module ~/depot/qt/qt5/qtdeclarative

Application builds:

For now, you can use qmake in the old fashioned way to configure applications.

See also the Qt WebAssembly wiki: https://wiki.qt.io/Qt_for_WebAssembly