Qt Everywhere: WebAssembly y WebGL Streaming

Qt Everywhere: este es el nombre de los archivos con fuentes Qt. WebAssembly y WebGL streaming se entregarán en 5.12.0 y en todas partes suena diferente. Entonces le pedí que hiciera un prototipo de algo. Se implementó rápidamente un prototipo de chat en sockets web para probar el soporte de red. Debajo del gato habrá instrucciones para ensamblar y lanzar un proyecto en WebAssembly, un ejemplo de llamar a JavaScript desde C ++.

Qt ensamblado con WebAssembly

Primero debe colocar la cadena de herramientas emscripten , que recopilaremos Qt. Recuerde establecer variables de entorno para que qmake encuentre emcc. El script de configure se ejecutó con los siguientes parámetros:

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

Además como en otros lugares:

 $ make $ make install 

Montaje y lanzamiento del proyecto.

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

Código dependiente de plataforma

Coser la url en la que cuelga el backend no es muy bueno, porque quiere correr en un puerto arbitrario. En caso de trabajar desde el navegador, debe tomar location.hostname y location.port para determinar dónde se ejecuta el back-end. Para hacer esto, tendrás que escribir un poco en JavaScript.

Para los amantes de las definiciones, hay Q_OS_WASM , pero prefiero sacar el código en pimpl y archivos individuales. Pimpl es superfluo aquí, pero distribuiré el código en diferentes archivos

Consigamos algún tipo de configuración

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

y dos implementaciones

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

Queda por registrarse en el archivo pro

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

EM_ASM_ es EM_ASM_ magia EM_ASM_ que le permite llamar a código JavaScript desde C ++. Aunque podría hacerse sin JavaScript

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

Soporte de navegador

Navegadores de escritorio: se inicia y funciona en Chrome, Firefox, Safari, Edge (aquí tuve que habilitar las funciones experimentales de JavaScript). Dependiendo del hardware, puede haber retrasos significativos en la compilación de WebAssembly.

En Chrome en Andorid, puede tomar minutos compilar WebAssembly. Inmediatamente noté la falta de soporte para navegadores móviles, es decir, no hay llamadas al teclado del sistema cuando intento ingresar texto.

Safari en iOS 12 aquí la aplicación se bloquea en la etapa de compilación de WebAssembly y no discutí. Teóricamente, puede cambiar a asm.js, pero esto requiere un estudio por separado.

Qt Quick WebGL

El blog se posicionó como VNC en sockets web con renderizado en WebGL. De las dependencias Qt WebSockets y Qt compiladas con soporte para OpenGL ES 2, es decir Conducir en hardware sin una GPU será doloroso. Para -platform webgl , solo ponga Qt WebGL Streaming Plugin en el instalador en línea y ejecute la aplicación con la -platform webgl o -platform webgl:port=80 si necesita especificar un puerto.

Pero esta tecnología tiene sus limitaciones:

• retrasos o el notorio retraso de entrada;
• falta de soporte de aplicaciones en Qt Widgets;
• falta de transmisión de sonido;
• una conexión de usuario por proceso, es decir en la segunda pestaña ya no entra, el precargador girará.

También noté que FPS se hundía al animar StackView en las transiciones entre pantallas. Ventaja de la transmisión WebGL:

• servidor incorporado;
• mínimo esfuerzo No tuve que compilar Qt de las fuentes y reconstruir por separado la aplicación existente.

Usos para WebAssembly y WebGL Streaming

Wt alternativa cuando hay una aplicación lista para usar en C ++ y necesita sujetarle la interfaz web. Por ejemplo, la interfaz web de la mecedora torrent.

Interfaz web para algunos hogares inteligentes. No en vano, MQTT se entregó a Qt, sino un ejemplo mqtt_simpleclient en msorvig / qt-webassembly-examples . Puede tener un código de interfaz de usuario común que funcione en la tableta y en el navegador.

El código está disponible en GitHub , binarios preparados en el mismo lugar.