Überall überall: WebAssembly- und WebGL-Streaming

    Qt Everywhere - so werden Qt-Quellarchive benannt. Ab 5.12.0 werden WebAssembly- und WebGL-Streaming ausgeliefert, und es klingt überall anders. Also bat ich um etwas zum Prototypen. Ein Prototyp- Chat auf Websockeln wurde schnell eingesetzt , um die Netzwerkunterstützung zu testen. Unter dem Schnitt gibt es eine Anweisung zum Erstellen und Ausführen eines Projekts in WebAssembly, ein Beispiel für das Aufrufen von JavaScript aus C ++.


    Qt mit WebAsse Assembly erstellen


    Zuerst müssen Sie die Toolchain emscripten setzen , die Qt sammeln wird. Vergessen Sie nicht, die Umgebungsvariablen zu schreiben, die qmake emcc finden würde. Das Skript wurde configuremit 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

    Wie auch anderswo:


    $ make 
    $ make install

    Erstellen Sie das Projekt und führen Sie es aus


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

    Plattformspezifischer Code


    Das Nähen der URL, an der das Backend hängt, ist nicht sehr gut, weil auf einem beliebigen Port laufen wollen. Im Falle des Browsers Sie ergreifen müssen , location.hostnameund location.portwas würde bestimmen , welche ist das Backend läuft. Dies wird ein wenig pinkeln in JavaScript.


    Für Fans von Q_OS_WASMDefines möchte ich es vorziehen, den Code in Pimpl und separate Dateien zu speichern. Pimpl ist hier überflüssig, aber ich werde den Code in verschiedene Dateien aufteilen.


    Lassen Sie uns etwas Konfig bekommen


    //config.h#pragma once#include<QtCore/QUrl>classConfig
    {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 muss noch in der Pro-Datei registriert werden


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

    EM_ASM_Dies ist die emscripten-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: läuft und arbeitet in Сhrome, Firefox, Safari, Edge (hier mussten die experimentellen Funktionen von JavaScript aktiviert werden). Je nach Hardware kann es zu erheblichen Verzögerungen beim Kompilieren von WebAssembly kommen.


    In Chrome kann Andorid für die Kompilierung von WebAssembly einige Minuten benötigen. Sofort bemerkte die mangelnde Unterstützung für mobile Browser, dass nämlich die Systemtastatur beim Aufruf von Text nicht aufgerufen wird.


    Safari auf iOS 12 hier stürzt die Anwendung bei der WebAssembly-Kompilierungsphase ab und ich habe nicht debugiert. Theoretisch können Sie zu asm.js wechseln, dies erfordert jedoch eine separate Studie.


    Qt Quick WebGL


    Das Blog wurde als VNC in Web-Sockets mit Rendering in WebGL positioniert. Von Qt WebSockets und Qt abhängige Abhängigkeiten, die mit OpenGL ES 2 kompiliert wurden, unterstützen i. Hardware ohne GPU zu fahren, wird schmerzhaft sein. Um dies zu unterstützen, reicht es aus, das Qt WebGL Streaming Plugin in das Online-Installationsprogramm aufzunehmen und die Anwendung mit dem Parameter -platform webgloder -platform webgl:port=80, falls Sie den Port angeben müssen, auszuführen .


    Diese Technologie hat jedoch ihre Grenzen:


    • Verzögerungen oder notorische Eingangsverzögerung;
    • Es gibt keine Unterstützung für Qt-Widgets.
    • fehlende Tonübertragung;
    • eine Benutzerverbindung pro Prozess i. In der zweiten Registerkarte, nicht mehr gehen, dreht sich der Preloader.

    Ich habe auch während der StackView-Animation bei den Übergängen zwischen Bildschirmen einen Abfall in fps festgestellt. Die Würde des WebGL-Streamings:


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

    Möglichkeiten, WebAssembly und WebGL-Streaming zu verwenden


    Alternative zu Wt, wenn in C ++ eine fertige Anwendung vorhanden ist und Sie eine Webschnittstelle daran befestigen müssen. Zum Beispiel Web-Interface zum Torrent-Rocking.


    Weboberfläche für ein Smart Home. Nicht umsonst in MQTT in Qt und in msorvig / qt-webassembly-Beispielen ein Beispiel für mqtt_simpleclient . Sie können einen allgemeinen UI-Code haben, der auf dem Tablet und im Browser funktioniert.


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


    Jetzt auch beliebt: