Qt Everywhere: WebAssembly und WebGL-Streaming

Qt Everywhere - Dies ist der Name der Archive mit Qt-Quellen. WebAssembly und WebGL-Streaming werden in 5.12.0 bereitgestellt und klingen überall anders. Also gebeten, etwas zu prototypisieren. Ein Chat-Prototyp auf Web-Sockets wurde schnell bereitgestellt, um die Netzwerkunterstützung zu testen. Unter der Katze finden Sie Anweisungen zum Erstellen und Starten eines Projekts in WebAssembly, ein Beispiel für das Aufrufen von JavaScript aus C ++.

Qt-Assembly mit WebAssembly

Zuerst müssen Sie die Toolchain emscripten setzen , die wir Qt sammeln werden. Denken Sie daran, Umgebungsvariablen so festzulegen, dass qmake emcc findet. Das configure wurde mit den folgenden Parametern ausgeführt:

 ./configure \ -prefix /home/dmitry/Qt/5.12.0/wasm \ -xplatform wasm-emscripten \ -confirm-license -opensource \ -nomake tests \ -c++std c++1z \ -nomake examples \ -release \ -no-dbus \ -skip qtxmlpatterns \ -skip qttools 

Weiter wie anderswo:

 $ make $ make install 

Montage und Start des Projekts

 $ ~/Qt/5.12.0/wasm/bin/qmake $ make $ emrun chat.html 

Plattformabhängiger Code

Das Nähen der URL, an der das Backend hängt, ist nicht sehr gut, weil möchte auf einem beliebigen Port laufen. Bei Arbeiten über den Browser müssen Sie location.hostname und location.port um festzustellen, wo das Backend ausgeführt wird. Dazu müssen Sie ein wenig in JavaScript schreiben.

Für Liebhaber von Q_OS_WASM gibt es Q_OS_WASM , aber ich ziehe es vor, den Code in Pimpl und einzelnen Dateien herauszunehmen. Pimpl ist hier überflüssig, aber ich werde den Code in verschiedene Dateien verteilen

Lassen Sie uns eine Art Konfiguration bekommen

 //config.h #pragma once #include <QtCore/QUrl> class Config { public: static QUrl wsUrl(); }; 

und zwei Implementierungen

 //config.cpp #include <QtCore/QCoreApplication> #include <QtCore/QCommandLineParser> #include "config.h" QUrl Config::wsUrl() { QCommandLineParser parser; QCommandLineOption wsOption(QStringList() << "u" << "url" , "WebSocket url" , "url" , "ws://localhost:1234"); parser.addOption(wsOption); parser.process(*QCoreApplication::instance()); return QUrl(parser.value(wsOption)); } 

 //config_wasm.cpp #include <QtCore/QByteArray> #include <emscripten/emscripten.h> #include <emscripten/html5.h> #include "config.h" QUrl Config::wsUrl() { QByteArray buff(1024, 0); EM_ASM_({ var url = "ws://"+ window.location.hostname + ":" + window.location.port + "/ws"; stringToUTF8(url, $0, $1); }, buff.data(), buff.size()); return QUrl(QString::fromUtf8(buff)); } 

Es bleibt in der Pro-Datei zu registrieren

 wasm { SOURCES += config_wasm.cpp } else { SOURCES += config.cpp } 

EM_ASM_ ist eine EM_ASM_ Magie, mit der Sie JavaScript-Code aus C ++ aufrufen können. Obwohl es ohne JavaScript möglich wäre

 emscripten::val location = emscripten::val::global("location"); auto host = QString::fromStdString(location["host"].as<string>()); auto protocol = QString::fromStdString(location["protocol"].as<string>()); 

Browser-Unterstützung

Desktop-Browser: Es startet und funktioniert in Chrome, Firefox, Safari, Edge (hier musste ich experimentelle JavaScript-Funktionen aktivieren). Abhängig von der Hardware kann es zu erheblichen Verzögerungen beim Kompilieren von WebAssembly kommen.

In Chrome unter Andorid kann das Kompilieren von WebAssembly Minuten dauern. Ich bemerkte sofort die mangelnde Unterstützung für mobile Browser, nämlich, dass beim Versuch, Text einzugeben, die Systemtastatur nicht aufgerufen wird.

Safari unter iOS 12 hier stürzt die Anwendung in der Phase der Kompilierung von WebAssembly ab und ich habe nicht debazhit. Theoretisch können Sie zu asm.js wechseln, dies erfordert jedoch eine separate Studie.

Qt Quick WebGL

Der Blog positionierte sich als VNC auf Web-Sockets mit Rendering auf WebGL. Von den Abhängigkeiten Qt WebSockets und Qt, die mit Unterstützung für OpenGL ES 2 kompiliert wurden, d.h. Das Fahren auf Hardware ohne GPU ist schmerzhaft. Um dies zu unterstützen, -platform webgl Sie einfach das Qt WebGL Streaming Plugin in das Online-Installationsprogramm ein und führen Sie die Anwendung mit der -platform webgl oder -platform webgl:port=80 wenn Sie einen Port angeben müssen.

Diese Technologie hat jedoch ihre Grenzen:

• Verzögerungen oder die berüchtigte Eingangsverzögerung;
• mangelnde Anwendungsunterstützung für Qt-Widgets;
• mangelnde Schallübertragung;
• eine Benutzerverbindung pro Prozess, d.h. Wenn Sie die zweite Registerkarte nicht mehr eingeben, dreht sich der Preloader.

Ich bemerkte auch, dass die fps beim Animieren von StackView bei Übergängen zwischen Bildschirmen nachgaben. Vorteil des WebGL-Streamings:

• eingebauter Server;
• minimaler Aufwand. Ich musste Qt nicht aus den Quellen kompilieren und die vorhandene Anwendung separat neu erstellen.

Wird für WebAssembly und WebGL-Streaming verwendet

Eine Alternative, wenn es in C ++ eine vorgefertigte Anwendung gibt und Sie die Weboberfläche daran befestigen müssen. Zum Beispiel die Webschnittstelle zum Torrent-Schaukelstuhl.

Webinterface für ein Smart Home. Nicht umsonst wurde MQTT an Qt geliefert, sondern ein Beispiel für mqtt_simpleclient in msorvig / qt-webassembly-examples . Sie können einen allgemeinen UI-Code verwenden, der auf dem Tablet und im Browser funktioniert.

Der Code ist auf GitHub verfügbar, vorbereitete Binärdateien an derselben Stelle.