Qt Everywhere: WebAssembly dan WebGL Streaming

Qt Everywhere - ini adalah nama arsip dengan sumber Qt. WebAssembly dan streaming WebGL akan dikirim dalam 5.12.0 dan di mana-mana terdengar berbeda. Jadi diminta untuk membuat prototipe sesuatu. Prototipe obrolan pada soket web dengan cepat dikerahkan untuk menguji dukungan jaringan. Di bawah potongan akan ada instruksi untuk membangun dan meluncurkan proyek di WebAssembly, contoh memanggil JavaScript dari C ++.

Qt assembly dengan WebAssembly

Pertama, Anda perlu meletakkan toolchain emscripten , yang akan kami kumpulkan Qt. Ingatlah untuk mengatur variabel lingkungan agar qmake menemukan emcc. Script configure dijalankan dengan parameter berikut:

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

Selanjutnya seperti di tempat lain:

 $ make $ make install 

Perakitan dan peluncuran proyek

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

Platform Dependent Code

Menjahit url di mana backend hang tidak bagus, karena ingin berjalan pada port arbitrer. Dalam hal bekerja dari browser, Anda perlu mengambil location.hostname dan location.port untuk menentukan di mana backend berjalan. Untuk melakukan ini, Anda harus menulis sedikit dalam JavaScript.

Untuk pecinta definisi, ada Q_OS_WASM , tapi saya lebih suka untuk mengambil kode dalam file pimpl dan individual. Pimpl berlebihan di sini, tetapi saya akan menyebarkan kode ke file yang berbeda

Mari kita cari konfigurasi

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

dan dua implementasi

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

Tetap mendaftar di file pro

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

EM_ASM_ adalah sihir EM_ASM_ yang memungkinkan Anda untuk memanggil kode JavaScript dari C ++. Meskipun bisa dilakukan tanpa JavaScript

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

Dukungan Browser

Browser desktop: dimulai dan berfungsi di Chrome, Firefox, Safari, Edge (di sini saya harus mengaktifkan fungsi JavaScript eksperimental). Tergantung pada perangkat kerasnya, mungkin ada penundaan yang signifikan dalam mengkompilasi WebAssembly.

Di Chrome pada Andorid, mungkin dibutuhkan beberapa menit untuk mengkompilasi WebAssembly. Saya langsung memperhatikan kurangnya dukungan untuk browser seluler, yaitu tidak ada panggilan ke keyboard sistem ketika mencoba memasukkan teks.

Safari di iOS 12 di sini aplikasi crash pada tahap kompilasi WebAssembly dan saya tidak debazhit. Secara teoritis, Anda dapat beralih ke asm.js, tetapi ini membutuhkan studi terpisah.

Qt Quick WebGL

Blog memposisikan dirinya sebagai VNC di soket web dengan rendering di WebGL. Ketergantungan Qt WebSockets dan Qt disusun dengan dukungan untuk OpenGL ES 2 yaitu Mengemudi di perangkat keras tanpa GPU akan terasa menyakitkan. Untuk mendukungnya, cukup masukkan Qt WebGL Streaming Plugin di installer online dan jalankan aplikasi dengan -platform webgl atau -platform webgl:port=80 opsi, jika Anda perlu menentukan port.

Tetapi teknologi ini memiliki keterbatasan:

• keterlambatan atau keterlambatan input yang terkenal;
• kurangnya dukungan aplikasi pada Qt Widgets;
• kurangnya transmisi suara;
• satu koneksi pengguna per proses yaitu pada tab kedua tidak lagi masuk, preloader akan berputar.

Saya juga melihat fps kendur saat menjiwai StackView pada transisi antar layar. Keuntungan streaming WebGL:

• server bawaan;
• upaya minimum. Saya tidak perlu mengkompilasi Qt dari sumber dan secara terpisah membangun kembali aplikasi yang ada.

Penggunaan untuk WebAssembly dan WebGL Streaming

Wt alternatif ketika ada aplikasi yang sudah jadi di C ++ dan Anda perlu mempercepat antarmuka web untuk itu. Misalnya, antarmuka web ke kursi goyang torrent.

Antarmuka web untuk beberapa rumah pintar. Bukan untuk apa-apa bahwa MQTT dikirim ke Qt, tetapi sebuah contoh mqtt_simpleclient pada msorvig / qt-webassembly-example . Anda dapat memiliki kode UI umum yang berfungsi di tablet dan di browser.

Kode tersedia di GitHub , menyiapkan binari di tempat yang sama.