Qt Everywhere: WebAssembly و WebGL Streaming

Qt Everywhere - هذا هو اسم الأرشيف بمصادر Qt. سيتم تسليم WebAssembly وبث WebGL في الإصدار 5.12.0 وفي كل مكان يبدو مختلفًا. لذا طُلب منه وضع نموذج أولي لشيء ما. تم نشر نموذج أولي chatik على مآخذ الويب بسرعة لاختبار دعم الشبكة. تحت القطة ، ستكون هناك تعليمات لتجميع وإطلاق مشروع على WebAssembly ، مثال على استدعاء JavaScript من C ++.

تجميع Qt مع WebAssembly

تحتاج أولاً إلى وضع emscripten toolchain ، الذي سنقوم بجمع Qt. تذكر تعيين متغيرات البيئة بحيث يجد 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 لتحديد مكان تشغيل الخلفية. للقيام بذلك ، سيكون عليك كتابة القليل في JavaScript.

لمحبي Q_OS_WASM ، هناك Q_OS_WASM ، لكنني أفضل إخراج الشفرة في ملفات pimpl والملفات الفردية. Pimpl غير ضروري هنا ، لكنني سوف أنشر الكود في ملفات مختلفة

دعونا نحصل على نوع من التكوين

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

وتنفيذين

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

يبقى للتسجيل في ملف الموالية

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

EM_ASM_ هو سحر EM_ASM_ الذي يسمح لك باستدعاء رمز JavaScript من C ++. على الرغم من أنه يمكن القيام به بدون جافا سكريبت

 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.

في Chrome على Andorid ، قد يستغرق تجميع WebAssembly دقائق. لاحظت على الفور عدم وجود دعم لمتصفحات الجوال ، أي أنه لا يوجد اتصال بلوحة مفاتيح النظام عند محاولة إدخال النص.

Safari على iOS 12 هنا يتعطل التطبيق في مرحلة تجميع WebAssembly ولم أكن debazhit. نظريًا ، يمكنك التبديل إلى asm.js ، لكن هذا يتطلب دراسة منفصلة.

Qt Quick WebGL

وضعت المدونة نفسها على أنها VNC على مآخذ الويب مع العرض على WebGL. من التبعيات Qt WebSockets و Qt المترجمة مع دعم OpenGL ES 2 ، أي القيادة على الأجهزة بدون GPU ستكون مؤلمة. لدعمه ، فقط ضع Qt WebGL Streaming Plugin في المثبت عبر الإنترنت وقم بتشغيل التطبيق باستخدام -platform webgl أو -platform webgl:port=80 الخيار إذا كنت بحاجة إلى تحديد منفذ.

لكن هذه التكنولوجيا لها حدودها:

• التأخيرات أو تأخر الإدخال سيئة السمعة ؛
• نقص دعم التطبيق على أدوات Qt Widgets ؛
• نقص انتقال الصوت ؛
• اتصال مستخدم واحد لكل عملية ، أي في علامة التبويب الثانية لم تعد تدخل ، سوف تدور أداة التحميل المسبق.

لاحظت أيضًا انخفاضًا في الثانية في الثانية عند تحريك StackView على التحولات بين الشاشات. الاستفادة من تدفق WebGL:

• خادم مدمج ؛
• الحد الأدنى من الجهد. لم يكن لدي لترجمة Qt من المصادر وإعادة بناء التطبيق الحالي بشكل منفصل.

استخدامات WebAssembly وبث WebGL

Wt البديل عندما يكون هناك تطبيق جاهز في C ++ وتحتاج إلى ربط واجهة الويب به. على سبيل المثال ، واجهة الويب لكرسي هزاز سيل.

واجهة ويب لبعض المنزل الذكي. ليس لشيء تم تسليم MQTT إلى Qt ، ولكن كمثال mqtt_simpleclient على msorvig / qt-webassembly-أمثلة . يمكنك الحصول على رمز واجهة مستخدم شائع يعمل على الجهاز اللوحي والمتصفح.

الكود متاح على GitHub ، ثنائيات معدة في نفس المكان.