Geekly Articles each Day

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オプションでアプリケーションを実行します。


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



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



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


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


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


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



Source: https://habr.com/ru/post/J430954/

More articles:


All Articles