Qt Everywhere: WebAssembly e WebGL Streaming

Qt Everywhere - este é o nome dos arquivos com fontes Qt. O WebAssembly e o WebGL streaming serão entregues na 5.12.0 e em todos os lugares parecerão diferentes. Então, pediu para prototipar alguma coisa. Um protótipo de bate-papo nos soquetes da Web foi rapidamente implantado para testar o suporte de rede. Sob o código, haverá instruções para montar e iniciar um projeto no WebAssembly, um exemplo de chamada de JavaScript do C ++.

Montagem Qt com WebAssembly

Primeiro você precisa colocar o emscripten da cadeia de ferramentas, que coletaremos o Qt. Lembre-se de definir variáveis ​​de ambiente para que o qmake encontre o emcc. O script de configure foi executado com os seguintes 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 

Além disso, como em outros lugares:

 $ make $ make install 

Montagem e lançamento do projeto

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

Código Dependente da Plataforma

Costurar o URL no qual o backend fica pendurado não é muito bom, porque deseja executar em uma porta arbitrária. No caso de trabalho no navegador, você precisa levar location.hostname e location.port para determinar onde o back-end está sendo executado. Para fazer isso, você precisará escrever um pouco em JavaScript.

Para os amantes de define, existe Q_OS_WASM , mas eu prefiro retirar o código no pimpl e em arquivos individuais. Pimpl é supérfluo aqui, mas vou espalhar o código em arquivos diferentes

Vamos pegar algum tipo de configuração

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

e duas implementações

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

Resta registrar no arquivo pro

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

EM_ASM_ é EM_ASM_ mágica EM_ASM_ que permite chamar o código JavaScript do C ++. Embora isso possa ser feito sem JavaScript

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

Suporte do navegador

Navegadores de desktop: ele inicia e funciona no Chrome, Firefox, Safari, Edge (aqui eu tive que ativar as funções experimentais de JavaScript). Dependendo do hardware, pode haver atrasos significativos na compilação do WebAssembly.

No Chrome no Andorid, pode levar alguns minutos para compilar o WebAssembly. Percebi imediatamente a falta de suporte para navegadores móveis, ou seja, não há chamada para o teclado do sistema ao tentar digitar texto.

Safari no iOS 12 aqui, o aplicativo trava na fase de compilação do WebAssembly e eu não me debati. Teoricamente, você pode mudar para asm.js, mas isso requer um estudo separado.

Qt Quick WebGL

O blog se posicionou como VNC em soquetes da web com renderização no WebGL. Das dependências Qt WebSockets e Qt compiladas com suporte para OpenGL ES 2, ou seja, Dirigir em hardware sem uma GPU será doloroso. Para suportá-lo, basta colocar o Qt WebGL Streaming Plugin no instalador online e executar o aplicativo com a opção -platform webgl ou -platform webgl:port=80 , se você precisar especificar a porta.

Mas essa tecnologia tem suas limitações:

• atrasos ou atraso notório na entrada;
• falta de suporte a aplicativos nos Qt Widgets;
• falta de transmissão de som;
• uma conexão de usuário por processo, ou seja, na segunda guia não entrar mais, o pré-carregador girará.

Também notei fps caindo ao animar o StackView em transições entre telas. Vantagem do streaming WebGL:

• servidor embutido;
• esforço mínimo. Não tive que compilar o Qt a partir das fontes e reconstruir separadamente o aplicativo existente.

Utilizações para WebAssembly e WebGL Streaming

Alternativa Wt, quando existe um aplicativo pronto em C ++ e você precisa fixar a interface da Web a ele. Por exemplo, a interface da web para a cadeira de balanço de torrent.

Interface da Web para uma casa inteligente. Não é à toa que o MQTT foi entregue ao Qt, mas um exemplo mqtt_simpleclient em msorvig / qt-webassembly-examples . Você pode ter um código de interface do usuário comum que funcione no tablet e no navegador.

O código está disponível no GitHub , binários preparados no mesmo local.