Qt Everywhere：WebAssemblyとWebGLストリーミング

Qt Everywhere-これはQtソースを含むアーカイブの名前です。 WebAssemblyおよびWebGLストリーミングは5.12.0で配信され、どこでも異なるように聞こえます。 そこで、何かプロトタイプを作ってほしいと頼まれました。 ネットワークサポートをテストするために、Webソケット上のチャットプロトタイプがすぐに展開されました。 猫の下には、WebAssemblyでプロジェクトをビルドして起動するための指示があります。これは、C ++からJavaScriptを呼び出す例です。

WebAssemblyを使用したQtアセンブリ

まず、Qtを収集するツールチェーンemscriptenを配置する必要があります。 qmakeがemccを検出できるように、環境変数を設定することを忘れないでください。 configure



スクリプトは、次のパラメーターで実行されました。

 ./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
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

さらに他の場所：

 $ make $ make install
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

プロジェクトの組み立てと立ち上げ

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

プラットフォーム依存コード

バックエンドがハングするURLを縫うのはあまり良くありません。 任意のポートで実行したい。 ブラウザーからの作業の場合、 location.hostname



およびlocation.port



を取得して、バックエンドが実行されているlocation.port



を判別する必要があります。 これを行うには、JavaScriptを少し記述する必要があります。

定義が好きな人にはQ_OS_WASM



がありQ_OS_WASM



が、私はpimplおよび個々のファイルのコードを取り出すことを好みます。 Pimplはここでは不要ですが、コードを別のファイルに拡散します

何らかの設定を取得しましょう

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

および2つの実装

 //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)); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

proファイルに登録する必要があります

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

EM_ASM_



はEM_ASM_



マジックで、C ++からJavaScriptコードを呼び出すことができます。 JavaScriptなしでも実行できますが

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ブラウザのサポート

デスクトップブラウザ：Chrome、Firefox、Safari、Edgeで起動して動作します（ここでは、実験的なJavaScript機能を有効にする必要がありました）。 ハードウェアによっては、WebAssemblyのコンパイルに大幅な遅延が生じる場合があります。

Andorid上のChromeでは、WebAssemblyをコンパイルするのに数分かかる場合があります。 私はすぐに、モバイルブラウザのサポートが不足していることに気付きました。つまり、テキストを入力しようとすると、システムキーボードが呼び出されません。

iOS 12上のSafariでは、WebAssemblyのコンパイルの段階でアプリケーションがクラッシュし、私はdebazhitしませんでした。 理論的には、asm.jsに切り替えることができますが、これには別の調査が必要です。

Qt Quick WebGL

このブログは、WebGLでのレンダリングを備えたWebソケット上のVNCとして位置付けられました。 OpenGL ES 2のサポートでコンパイルされたQt WebSocketsおよびQtの依存関係 GPUなしでハードウェアを運転するのは苦痛です。 これをサポートするには、 Qt WebGL Streaming Pluginをオンラインインストーラーに配置し、ポートを指定する必要がある場合は、 -platform webgl



または-platform webgl:port=80



オプションでアプリケーションを実行します。

しかし、この技術には限界があります。

• 遅延または悪名高い入力遅延;
• Qtウィジェットでのアプリケーションサポートの欠如;
• 音の伝達の欠如;
• プロセスごとに1つのユーザー接続、つまり 2番目のタブに入らないと、プリローダーが回転します。

画面間の遷移でStackViewをアニメートすると、fpsがたわむことにも気付きました。 WebGLストリーミングの利点：

• 組み込みサーバー。
• 最小限の労力。 ソースからQtをコンパイルし、既存のアプリケーションを個別に再構築する必要はありませんでした。

WebAssemblyおよびWebGLストリーミングの使用

C ++で既製のアプリケーションがあり、それへのWebインターフェースを固定する必要がある場合の代替手段。 たとえば、トレントロッキングチェアへのWebインターフェイス。

スマートホーム用のWebインターフェイス。 MQTTがQtに配信されたということではなく、 msorvig / qt-webassembly-examplesのmqtt_simpleclientの例です。 タブレットとブラウザで機能する共通のUIコードを使用できます。

コードはGitHubで入手でき、同じ場所にバイナリが用意されています。