QtMultimedia for WebAssembly QtMultimedia for WebAssembly adds the ability for Qt based apps to use audio, camera and play videos in a web app. Deploy once, run everywhere that has a web browser that supports javascript and WebAssembly. There have been some improvements in QtMultimedia for WebAssembly lately. Specifically for the Qt 6.12 release and beyond. Probably the biggest one is that it now…
One of the most tedious tasks a developer will do is debugging a nagging bug. It's worse when it's a web app, and even worse when its a webassembly web app. The easiest way to debug Qt Webassembly is by configuring using the -g argument, or CMAKE_BUILD_TYPE=Debug . Emscripten embeds DWARF symbols in the wasm binaries. NOTE: Debugging wasm files with DWARF works only in the Chrome browser with the…
QtMultimedia in WebAssembly Since Qt 6.5.0, QtMultimedia has support for playing video in a QGraphicsVideoItem and QGraphicsScene , as well as recording from a camera. You can use Qt to play video, access the camera from a web browser, thus simplifying deployment. With anything WebAssembly, there are a few things that work differently from the desktop applications. The javascript function that is…
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…
Clipboard use on the desktop platforms is ubiquitous. Most people use it without thinking. Copy, Paste and Cut keyboard strokes are in-grained into muscle memory. On the web it can present security issues as someone could read or write to your clipboard without you knowing. Up until now, Qt for WebAssembly's clipboard was text only and only within the app itself. Qt 6.3 will have better clipboard…
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…
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…
In my last post Qt WebAssembly performance enhancement there were some impressive performance stat speedups. Unfortunately, as my collegue Morten pointed out, both builds were in debug mode. *sigh* So I rebuilt them in release mode, and added a few selected benchmarks from the Qt tests/benchmark source directory: tst_affectors tst_emission tst_QGraphicsScene tst_QGraphicsView tst_QGraphicsWidget…
SIMD is something related to performance stuff. It makes certain things go faster (simply put). Kind of like sticking laughing gas in your petrol car's fuel line. https://en.wikipedia.org/wiki/SIMD Emscripten, WebAssembly now have better support for SIMD (to various degrees) https://emscripten.org/docs/porting/simd.html Chrome and firefox also support SIMD (to various degrees) So for Qt 6.3, I…
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…
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…
Sometimes when I am building a larger project with Qt for WebAssembly, I get this type of message: wasm-ld: error: initial memory too small, 17553264 bytes needed and the build fails. This means that you need to tell Emscripten compiler to allocate more than the standard 1GB initial memory. Qt allows you to specify to add more initial memory by using QMAKE_TOTAL_MEMORY in your pro file. So it…
Debugging is often difficult in the best of times. Debugging Qt webassembly apps in the web browser is not something I want to do on a nice summer day, and certainly makes a person more appreciative of mature, gui based debugging. But sometimes you have to do what you have to do. If you have a crash on your Qt for WebAssembly app, you would see a not very human readable backtrace in the console…
Qt on RaspberryPi is really easy, but can be rather time consuming to build an image to run on raspberry pi with Qt 5. You can either do it up yourself manually grabbing the sources, tool chains, etc. You could also buy the Qt for device creation package which comes with great support, bells, whistles and commercial licensing, or build it yourself and use open source GPL licensing. To get started…
In the just released Qt 5.15-beta2 version, Qt for WebAssembly will require an Emscripten update from 1.38.27 to 1.39.8. Require because there are a few incompatible changes we needed in Qt. The update includes several improvements, including faster linking times, as Emscripten no longer has to transpile to javascript before it outputs wasm. It can build directly to wasm thanks to upstream wasm…
Admittedly, building Qt WebAssembly apps takes what seems like forever. Technically, it is the linking part that takes a huge amount of time, as that is where the magic happens. You may have missed my first blog regarding faster build times for Qt WebAssembly apps: http://qtandeverything.blogspot.com/2019/06/faster-link-time-for-qt-webassembly.html Here is how to get set up to use this now…
As some may know, I currently reside in Australia, which is undergoing an unprecedented bush fire season. Total burnt area is about the size of Demark, with no end in sight. Whole forests and towns are being incinerated. Millions of animals, both wild and farm are being killed and injured by the swiftly moving crown fire being whipped up by high dry winds. There are people that need help, and…
So I get a message regarding changes needed to Sensor Framework and QtSensors to add heart rate sensor support for AsteroidOS. AsteroidOS is an open source operating system for watches. It uses OpenEmbedded and Yocto to build the system image and kernel that you can flash to a small group of Android watches . The UI is based on Qt and Qml. I thought about it for approximately 30 seconds and I…
Qt for WebAssembly is an exciting new platform for Qt. It means that Qt applications can run in a web browser. This means that deploying a Qt application is as easy as copying the files to your properly configured web server and handing out the url, for your users to run in their web browser. Mqtt is a machine to machine communication protocol, which is used for messaging in IoT. Websocket is a…
The guys working on Emscripten have begun integrating the new llvm wasm backend into mainstream emscripten. Although it is still not the default, it is now heaps easier to install and use, as you no longer need to build llvm yourself. https://v8.dev/blog/emscripten-llvm-wasm The jist of it is: emsdk install latest-upstream emsdk activate latest-upstream According to the linked blog, there are code…
I have built Qt and various apps using emscripten so many times over the last couple of years, it isn't even funny. One detractor with building Qt applications for the web using Qt for WebAssembly, is the time it takes to build the client application. Especially during linking, it takes a huge amount of time to produce a binary for Qt WebAssembly. This is caused by all the magic that the linker in…
When porting applications to Qt for WebAssembly, there are a few issues to keep in mind. One big issue is that you do not have a full operating system underneath for you to utilize. What you get is the same sandbox in which javascript lives. In some aspects, it is somewhat similar to a single-threaded microcontroller where there is just one thread in which to operate, limited filesystem access and…
At times it was a bit painful juggling writing a book, doing my day job and running around doing the things that life throws. It's done and dusted now, you too can buy my book titled Hands-On Mobile and Embedded Development with Qt 5 ! It has a nice image of glacier ice on the cover, which I thought was appropriate for a technology founded in Norway and then continued in Finland.…
The project Qt 5 emscripten that Intopalo (who are doing tons of amazing stuff with some awesome talent) started as research for a client, has moved git repos. The new main git repo has been moved to a branch in Qt proper! and a new name - Qt for WebAssembly. git://code.qt.io/qt/qtbase.git in the 'wip/webassembly' branch, and can be downloaded here: git clone -b wip/webassembly…
So ya, I have been doing work for the up and coming Finnish company Intopalo getting Qt5 for WebAssembly using emscripten up and running. This is the 3rd Finnish company I have done work for, and the 4th Nordic company (Trolltech, Nokia, Jolla, Intopalo) This is very much a work in progress. Background: There was a Qt4 version, emscripten-qt and a related Qt5 for Native Client which do similar…