Qt WebGL Streaming Plugin介绍



  • 从Qt5开始,引入QPA即“平台抽象层”的概念。“平台”是一个具体的显示输出和用户输入的集合。“平台抽象层”实际上是一种平台的插件机制。通过在启动命令后加入不同的启动参数,选择运行的“平台”,即选择如何显示程序和接受怎样的输入设备。

    Qt WebGL Streaming Plugin(QtWebGL)是Qt5.10中新加入的QPA插件。
    这个平台插件主要是干什么的呢?
    简单来说:运行在QtWebGL平台上的Qt程序,并不使用本地的显卡渲染(当然也不可能在本地显示器上显示)。而是把GL的指令的调用(可以理解是OpenGL指令流)发送给远程计算机的浏览器,使用远程浏览器的WebGL API进行渲染。而远程计算机的浏览器接受鼠标、键盘、触摸的输入,再返回到本地计算机的Qt程序中。
    再简单的说,用Qt写的程序,可以使用浏览器打开了。。

    几个技术细节:
    1、当某个Qt程序在QtWebGL平台上启动后,Qt程序并不运行,而是先在本地计算机启动一个WebServer,等待远程浏览器连接。一旦有一个连接进入,QtWebGL平台就会起动一个独立进程的Qt程序,供其访问。即一个访问连接对应一个独立的Qt程序。因此,QtWebGL可以支持多用户连接,每个用户独立进程,互不干扰。但是同时访问的数量多了,会造成本地计算机负荷大。(目前Qt5.10中,QtWebGL处于 Technical Preview状态,多用户现在没有完成,未来完善版本会加入)
    2、QtWebGL平台运行的程序,仍然在本地计算机上运行。远程浏览器只负责图形渲染工作。因此客户端和服务端分摊运行压力。渲染复杂的页面和3D场景,其速度会快于Html。
    3、网络传输的数据量,小于VNC那种视频流,但是大于Html。因为Html是一次读取,就地运行。因此如果网络带宽不够的情况下,VNC最卡、WebGL也会有丢帧。
    4、加载耗时远小于Html,但加载时还有一部分消耗在等待程序的启动过程中。
    5、QtWebGL是一个平台插件。运行在其上的程序不需要特殊编译或重新编译。程序要运行在WebGL上,只需要在启动时添加一个 -platform webgl 参数即可。
    6、只能支持使用显卡渲染的Qt程序。也就是说,如果用C++ QWidget写的代码,用CPU绘图,那就无法运行在QtWebGL插件上。
    7、相同网络带宽条件下,VNC是有损压缩,QtWebGL和Html是无损的渲染画质。

    refer to: https://zhuanlan.zhihu.com/p/31972532

    WebGL和Wasm比较:
    1、资源消耗:WebGL程序运行在Server端,多开后Server端资源消耗大。Wasm程序完全运行在Client端。Server端没有负荷。
    2、画面效果:Wasm更流畅。WebGL和Wasm底层都是基于WebGL的API,因此功能应该没有大的区别。都可以进行3D复杂场景绘制,都是无损画质。但是WebGl会受到网络延时以及本地GPU绘图能力的影响,会有丢帧和卡顿。Wasm本地运行,是否卡顿只取决于本地GPU绘图能力。
    3、打开时间:WebGL打开速度更快。Wasm要一次下载所有的代码才能运行。第一次等待时间非常长。对于大型3D程序,这可能是一个关键制约因素。
    4、人机交互:WebGL接受的鼠标、键盘、触摸等输入,都要发送回Server端才能处理,有卡顿和延时。Wasm本地处理,无卡顿。
    5、后台数据交互:这点可能是WebGL的核心优势。WebGL不需要再开发后台交互逻辑,因为程序实际运行在Server端。通过WebGL可以很方便地在Client端操作Server端的文件、数据以及IO硬件。而Wasm与H5一样,需要开发后端交互逻辑。

    WebGL最大的特点就是可以很方便地访问Server端的本地资源。特别是对于一些嵌入式设备,例如,路由器。WebGL可以替代路由器的配置H5页面,它可以方便地修改盒子内配置文件,硬件参数的修改。还能运行一些实时的状态监测软件。当然未来可以还有更多的丰富应用可以开发。



  • @linbin823 现在可能做的是1对1的视频直播。希望能够推出新的技术,支持1对多的视频直播,那样用途就更广泛了。



  • @jiangcaiyang123 是的,510版只有单开。但是我得到的消息是,511就会有多开功能。这还成为战胜Html的一个卖点。



  • 这个很神奇呀!!!



  • @linbin823 我也希望有新的技术,将Qt客户端的技术向Html5的技术衔接。



  • @linbin823 好奇一下,你从哪里得到的“消息”?



  • @linbin823Qt WebGL Streaming Plugin介绍 中说:

    Qt WebGL

    Qt WebGL 和WebASM的不同点在哪里??前者交互性更强一点、更偏重3D?



  • @stlcours 实现方式不同。WebGL Streaming Plugin将OpenGL绘图指令变成二进制流传输给远程的浏览器进行渲染。因为OpenGL被设定为C-S模式,也就是说客户端和服务器可以不是在一台机器上的。结合了Chromium这个广泛使用的浏览器,WebGL Streaming技术得以普及。



  • WebGL Streaming Plugin,在测试阶段有很多人问怎么操作。作者的用途是把它放到包含chrome的嵌入式板子上。所以并发性能并不是需要关心的。但是我们还是希望以后能够提升并发性,这样一种新的直播形式就可以诞生了。



  • 请问一下如果原Qt桌面软件支持拖拽外部文件进去(比如把在用资源管理器里的一张图片拖拽到软件界面上就会显示这张图片),转成Webassembly之后这种拖拽操作还是否有效?劳烦大佬帮我试试看,可以的话我就学QML了


Log in to reply
 

走马观花

最近的回复

  • C

    Qt for MCU需要商业授权的

    read more
  • Qt for MCUs

    搭建Qt for MCUs PC端开发环境。qt for mcus提供了一个完整的图形框架和工具包,包含了在MCUs上设计、开发和部署gui所需的一切。它允许您在裸机或实时操作系统上运行应用程序。

    先决条件

    开发主机环境支持仅限于Windows 10

    MSVC compiler v19.16 (Visual Studio 2017 15.9.9 or newer) x64

    CMake v3.13 or newer (you can install it using the Qt Online installer) x64

    使用Qt联机安装程序安装Qt for MCUs,该安装程序可通过Qt帐户下载

    安装Qt 5.14和Qt Creator 4.11 or higher

    安装链接

    › Qt: https://account.qt.io/downloads
    › CMake: https://cmake.org/download/
    › Python 2.7 32-bit: https://www.python.org/downloads/release/python-2716/
    › Arm GCC: https://developer.arm.com/tools-and-software/open-source-software/developer-tools/gnutoolchain/gnu-rm/downloads
    › J-Link Software Pack: https://www.segger.com/downloads/jlink/JLink_Windows.exe
    › J-Link OpenSDA Firmware: https://www.segger.com/downloads/jlink/OpenSDA_MIMXRT1050-EVKHyperflash
    › STM32CubeProgrammer: https://www.st.com/en/development-tools/stm32cubeprog.html
    › STM32 ST-LINK Utility: https://www.st.com/en/development-tools/stsw-link004.html​​​​​​​

    Qt Creator设置 启用Qt Creator插件 选择“帮助>关于插件”,然后从列表中选择“MCU支持(实验性)”插件,重新启动Qt Creator以应用更改
    替代文字 为MCU创建Qt工具包

    选择工具>选项>设备>MCU

    选择Qt for MCUs-Desktop 32bpp作为目标

    如果尚未设置,请提供Qt for MCUs安装目录的路径。

    单击Apply应用。

    替代文字

    替代文字
    替代文字

    注意:

    编译器要选X64,Qt版本要选64bit,CMake Tool选x64

    打开恒温器项目demo

    选择文件>打开文件或项目。。。

    打开CMakefiles.txt文件来自thermo文件夹的文件。

    选择Qt作为MCU-桌面32bpp套件。

    单击“配置项目”以完成。

    替代文字

    问题

    开发主机环境支持仅限于Windows 10

    C++编译失败,文本大字体.pixelSize.

    文本类型无法正确呈现需要复杂文本布局的unicode序列。对复杂文本使用StaticText

    read more
  • H

    hi 有问题请教你,方便加个联系方式吗

    read more
  • boost.asio是一个很棒的网络库,这回儿我也开始系统地学习起来了。想想当年接触boost,也有八年多了。这次开始接触boost,觉得既熟悉又陌生。熟悉的是小写字母+下划线的命名方式、晦涩的模板、很慢的编译速度以及较大的程序体积,陌生的是asio的各种概念:io服务、接收器、套接字等等:我之前对网络编程不是非常了解。

    于是根据我的理解,参考《Boost.Asio C++网络编程》实现了这样一个简单的客户端和服务端通信的例子,例子非常简单,还不完善,但是幸运的是,可以在本机上互通了。
    下面是客户端的代码:

    #include <iostream> #include <boost/asio.hpp> #include <boost/proto/detail/ignore_unused.hpp> using namespace std; using namespace boost::asio; using namespace boost::system; using namespace boost::proto::detail;// 提供ignore_unused方法 void writeHandler( const boost::system::error_code& ec, size_t bytesTransferred ) { if ( ec ) { cout << "Write data error, code: " << ec.value( ) << "transferred: " << bytesTransferred << endl; } else { cout << "OK! " << bytesTransferred << "bytes written. " << endl; } } int main(int argc, char *argv[]) { ignore_unused( argc ); ignore_unused( argv ); io_service service; ip::tcp::socket sock( service ); ip::tcp::endpoint ep( ip::address::from_string( "127.0.0.1" ), 6545 ); boost::system::error_code ec; sock.connect( ep, ec ); if ( ec ) { cout << "Connect error, code: " << ec.value( ) << ", We will exit." << endl; return ec.value( ); } else { char buf[1024] = "Hello world!"; sock.async_write_some( buffer( buf ), writeHandler ); sock.close( ); } return service.run( ); }

    下面是服务端的代码:

    #include <iostream> #include <boost/asio.hpp> #include <boost/proto/detail/ignore_unused.hpp> using namespace std; using namespace boost::asio; using namespace boost::system; using namespace boost::proto::detail;// 提供ignore_unused方法 void acceptHandle( const boost::system::error_code& code ) { cout << "Accepted." << endl; } int main(int argc, char *argv[]) { ignore_unused( argc ); ignore_unused( argv ); io_service service; ip::tcp::endpoint ep( ip::address::from_string( "127.0.0.1" ), 6545 ); boost::system::error_code ec; ip::tcp::socket sock( service ); ip::tcp::acceptor acceptor( service, ep ); acceptor.async_accept( sock, acceptHandle ); if ( ec ) { cout << "There is an error in server. code: " << ec.value( ) << endl; } return service.run( );// 阻塞运行 }

    运行结果是这样的:
    78448d7b-b3ae-42fc-9e2e-4dd2fbdac2c2-image.png

    我对boost.asio中几个概念的理解:

    io_service,这就是一个类似事件循环的东西,它为io设备提供服务,故名。不管是套接字、文件还是串口设备,都要使用它的服务。它的run()函数相当于启动了一个事件循环。一旦有消息了,即进行响应。这也是实现异步编程的重要基础。 socket,这个类则是套接字,可以处理TCP或者是UDP请求。有同步以及异步的处理方式,也有带异常以及不带异常的处理方式。 acceptor,接收器,仅仅是服务端使用。相当于其余框架中的listener,作接收用的。

    比较浅显,如果有不当之处,敬请指正。

    read more

关注我们

微博
QQ群