CN117972259A - 一种Web页面显示方法、装置、电子设备及存储介质 - Google Patents

Abstract

本发明公开了一种Web页面显示方法、装置、电子设备及存储介质，该方法包括：根据Web网页的网页地址获取Web网页的代码内容，并将代码内容渲染成位图数据，并将位图数据输出到内存中，形成位图资源库；获取目标位图数据并对目标位图数据进行视频编码，得到目标编码画面；将目标编码画面发送给目标客户端，以使目标客户端对目标编码画面进行解码后显示。本发明实施例本发明实施例只需要配置一台普通电脑即可产生一个或多个Web页面，无需配置价格高昂的图形工作站，而且本发明实施例渲染产生的网页分辨率不受电脑屏幕限制，可以根据需求自由定义分辨率，由于不产生浏览器窗口，系统集成度高，避免被关闭窗口导致异常。

Description

一种Web页面显示方法、装置、电子设备及存储介质

技术领域

本发明涉及页面显示技术领域，具体涉及一种Web页面显示方法、装置、电子设备及存储介质。

背景技术

在指挥中心控制室调度中，存在需要将网页Web页面在显示大屏上呈现的场景。传统的调度方式有以下方式：(1)配置高分图形工作站，在高分图形工作站中使用浏览器或特殊软件打开Web页面，图形工作站的显卡输出到信号处理器显示，该方式需要配置高昂的图形工作站及采集设备，成本高昂；(2)抓屏投屏的方式，该方式在电脑使用浏览器上打开一个或多个Web页面，使用抓屏软件抓取Web页面窗口画面数据，并编码投送到信号处理器上解码呈现，该方式节省一台图形工作站，调度方式灵活，但Web页面分辨率大小受运行的电脑及浏览器限制，灵活性不足。

发明内容

为了克服现有技术的不足，本发明实施例的目的在于提供一种Web页面显示方法、装置、电子设备及存储介质，其可以降低成本，并且可以根据需求自由定义分辨率。

为解决上述问题，本发明实施例第一方面公开一种Web页面显示方法，其包括以下步骤：

根据Web网页的网页地址获取Web网页的代码内容，将所述代码内容渲染成位图数据并输出到内存中，形成位图资源库；

获取目标位图数据并对所述目标位图数据进行视频编码，得到目标编码画面；

将所述目标编码画面发送给目标客户端，以使目标客户端对所述目标编码画面进行解码后显示。

本发明实施例第二方面公开了一种Web页面显示装置，其包括：

Web内容产生模块，用于根据Web网页的网页地址获取Web网页的代码内容，将所述代码内容渲染成位图数据并输出到内存中，形成位图资源库；

视频编码模块，用于获取目标位图数据并对所述目标位图数据进行视频编码，得到目标编码画面；

协议发送模块，用于将所述目标编码画面发送给目标客户端，以使目标客户端对所述目标编码画面进行解码后显示。

本发明实施例第三方面公开一种电子设备，包括：存储有可执行程序代码的存储器；与所述存储器耦合的处理器；所述处理器调用所述存储器中存储的所述可执行程序代码，用于执行本发明实施例第一方面公开的一种Web页面显示方法。

本发明实施例第四方面公开一种计算机可读存储介质，其存储计算机程序，其中，所述计算机程序使得计算机执行本发明实施例第一方面公开的一种Web页面显示方法。

本发明实施例第五方面公开一种计算机程序产品，当所述计算机程序产品在计算机上运行时，使得所述计算机执行本发明实施例第一方面公开的一种Web页面显示方法。

本发明实施例第六方面公开一种应用发布平台，所述应用发布平台用于发布计算机程序产品，其中，当所述计算机程序产品在计算机上运行时，使得所述计算机执行本发明实施例第一方面公开的一种Web页面显示方法。

本发明实施例只需要配置一台普通电脑即可产生一个或多个Web页面，无需配置价格高昂的图形工作站，而且本发明实施例渲染产生的网页分辨率不受电脑屏幕限制，可以根据需求自由定义分辨率，而且不产生浏览器窗口，系统集成度高，避免被关闭窗口导致异常。

附图说明

图1是本发明实施例公开的一种Web页面显示方法的流程示意图；

图2是本发明实施例公开的一种Web页面显示装置的结构示意图；

图3是本发明实施例公开的一种电子设备的结构示意图。

具体实施方式

本具体实施方式仅仅是对本发明的解释，其并不是对本发明的限制，本领域技术人员在阅读完本说明书后可以根据需要对本实施例做出没有创造性贡献的修改，但只要在本发明的权利要求范围内都受到专利法的保护。

为使本发明的目的、技术方案和优点更加清楚，下面将结合本发明中的附图，对本发明中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

本申请的说明书和权利要求书中的术语“包括”以及它的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。

在本发明实施例中，“示例性地”或者“例如”等词用于表示作例子、例证或说明。本发明实施例中被描述为“示例性地”或者“例如”的任何实施例或设计方案不应被解释为比其它实施例或设计方案更优选或更具优势。确切而言，使用“示例性地”或者“例如”等词旨在以具体方式呈现相关概念。

本发明实施例只需要配置一台普通电脑即可产生一个或多个Web页面，无需配置价格高昂的图形工作站，而且本发明实施例渲染产生的网页分辨率不受电脑屏幕限制，可以根据需求自由定义分辨率，而且不产生浏览器窗口，系统集成度高，避免被关闭窗口导致异常，以下结合附图进行详细描述。

实施例一

请参阅图1，图1是本发明实施例公开的一种Web页面显示方法的流程示意图。本发明实施例的执行主体为硬件和软件的结合，其中，硬件采用价格远低于高分图形工作站的普通PC，其可以是具有一定的数据处理能力、网络传输能力以及图片渲染能力的任意电子设备，在本发明较佳的实施例中，优选采用普通的台式机或者笔记本电脑等，软件主要为服务器端软件，其一方面用于接收输入数据例如通过编辑模块输入的各种参数等，以根据输入数据获取Web网页的页面内容并对页面进行渲染以及编码等，其另一方面用于实现与客户端的交互，包括但不限于接收客户端的认证请求、数据传输请求以及向客户端发送相应的目标编码画面等。

如图1所示，一种Web页面显示方法，其包括以下步骤：

S110、根据Web网页的网页地址获取Web网页的代码内容，将所述代码内容渲染成位图数据并输出到内存中，形成位图资源库。

在获取Web网页的代码内容之前，还需要通过编辑模块设置相应的参数数据，参数数据主要用于设置Web网页的网页地址(即URL地址，uniform resource locator)、设置Web页面(在本发明实施例中，Web画面以及Web页面均指代Web网页的页面画面)的分辨率、以及编码方式和传输协议等。

其中，设置Web网页的网页地址主要用于获取目标画面的内容，可以根据目标客户端的需求确定，同样地，Web页面的分辨率也是根据目标客户端的显示需求进行设置，而编码方式以及传输协议是双方根据约定进行设定，编码方式可以是H.264或H.265等，同时设置相应的编码参数，例如帧率，I帧间隔等。传输协议可以是TCP/IP、NetBEUI等。

编辑模块输入上述参数数据的方式有多种，示例性地，可以通过物理键盘或者虚拟键盘等逐个输入，或/和，通过下拉框选择相应的参数数据。

获取Web网页的代码内容可以根据编辑模块设置的Web网页的网页地址进行，示例性地，可以基于浏览器引擎根据URL地址获取网页的html/css/js代码内容。浏览器引擎包括但不限于搜索引擎、布局引擎、渲染引擎以及js引擎等，其中，可以基于搜索引擎根据URL地址获取网页的html/css/js代码内容，然后使用渲染引擎将代码内容渲染成位图数据，位图数据即为所述Web网页的页面画面。

位图数据的分辨率为编辑模块设置的Web页面的分辨率，位图数据存储于内存中，即将代码内容渲染成位图数据后，直接输出到内存中，而不是输出到显示屏幕上，因此，渲染后的内容在服务器端是不可见的。换言之，渲染后的位图数据不受执行主体的屏幕分辨率限制。

示例性地，一台1920×1080分辨率的电脑(执行主体)可以产生3840×2160分辨率的Web页面内容，也可以产生1080×1920这种竖屏显示的Web页面内容。

而且，因为本发明实施例的渲染方式并不产生浏览器窗口(即不会直接输出到执行主体的显示屏幕上)，系统集成度高，避免被关闭浏览器窗口而导致的异常，系统稳定性高。

位图数据存储到内存中，形成位图资源库，执行主体可以根据一个或多个客户端的需求，将每个客户端需求下的一个或多个Web页面画面均渲染后存储于位图资源库中，待客户端需要时，例如某目标客户端发送传输请求时，将根据传输请求确定目标位图数据，并将目标位图数据进行编码后，发送给该目标客户端。

S120、获取目标位图数据并对所述目标位图数据进行视频编码，得到目标编码画面。

获取目标位图数据可以通过位图抓取模块实现，在本发明较佳的实施例中，为每个位图数据进行定位，当接收到目标客户端的传输请求时，确定其要显示的目标位图数据的定位信息，并基于该定位信息获取目标位图数据，从而在对目标位图数据进行编码。

对目标位图数据进行编码主要是为了减少位图数据传输过程中的数据量，根据编辑模块输入的编码方式对目标位图数据进行编码，例如可采用H.264/H.265等有损编码方式，或者采用无损编码方式，前者适用于网络带宽受限的网络环境，最终呈现效果一般；后者适用于网络带宽较高的网络环境，图像画面呈现效果最好。

S130、将所述目标编码画面发送给目标客户端，以使目标客户端对所述目标编码画面进行解码后显示。

目标客户端对应安装于相应的调度中心或者监控中心或者指挥中心等，当然，也可以是管理人员自己的显示设备中，目标客户端运行于信号处理器，即目标客户端可以与上述的服务器端进行交互，用于接收目标编码画面，从而可以通过信号处理器对目标编码画面进行解码后显示。

目标客户端和服务器端优选采用长连接方式连接，例如可以通过socket套接字方式建立目标客户端和服务器端的连接，从而可以保证网络视频流持续向目标客户端发送。

在本发明较佳的实施例中，采用请求制方式实现二者的通讯，即目标客户端向服务器端发送传输请求，传输请求包括目标客户端的唯一标识、请求对应的目标图像，以及时效。唯一标识可以是目标客户端对应的终端MAC地址或者其他信息，例如注册码等，服务器端可以基于唯一标识对目标客户端是否具有权限接收其请求的目标图像，时效也即是目标图像向客户端传送的起始时间和终止时间，在该起始时间和终止时间之间，目标客户端和服务器端建立持续的长连接。

当验证通过且目标客户端具有显示权限，则服务器端可以将目标编码画面发送给目标客户端，从而目标客户端通过信号处理器对目标编码画面进行解码并在输出通道中显示，当然，也可以将解码后的目标编码画面输出到显示大屏上进行显示。

服务器端可以同时与多个客户端建立连接，并同时向这些客户端发送不同的目标编码画面。

实施例二

请参阅图2，图2是本发明实施例公开的一种Web页面显示装置的结构示意图。如图2所示，该Web页面显示装置200可以包括：

Web内容产生模块220，用于根据Web网页的网页地址获取Web网页的代码内容，将所述代码内容渲染成位图数据并输出到内存中，形成位图资源库；

视频编码模块230，用于获取目标位图数据并对所述目标位图数据进行视频编码，得到目标编码画面；

协议发送模块240，用于将所述目标编码画面发送给目标客户端，以使目标客户端对所述目标编码画面进行解码后显示。

目标客户端主要由信号处理器310以及显示大屏320组成，其中，信号处理器用于对目标编码画面进行解码并可在输出通道显示解码后得到的目标画面，或者将目标画面发送到显示大屏中进行显示。

所述装置还包括：

编辑模块210，用于接收输入参数，所述输入参数包括Web网页的网页地址、网页分辨率、视频编码方式以及发送协议。

优选地，Web内容产生模块220，可以包括：

搜索单元，用于基于浏览器引擎根据所述Web网页的网页地址获取Web网页的html或/和css或/和js的代码内容；

渲染单元，用于根据所述网页分辨率将所述代码内容渲染成位图数据，所述位图数据为所述Web网页的页面画面。

优选地，视频编码模块230，可以包括：

位图抓取单元，用于获取所述目标位图数据；

编码单元，用于采用所述视频编码方式对所述目标位图进行视频编码，得到所述目标编码画面。

优选地，协议发送模块240，可以包括：

基于所述发送协议通过网络将所述目标编码画面发送给目标客户端，以使目标客户端通过信号处理器对所述目标编码画面进行解码，并把解码后的Web页面在显示大屏中进行显示。

实施例三

请参阅图3，图3示出了可以用来实施本发明实施例的电子设备的结构示意图。电子设备旨在表示各种形式的数字计算机，诸如，膝上型计算机、台式计算机、工作台、个人数字助理、和其它适合的计算机。电子设备还可以表示各种形式的移动装置，诸如，个人数字处理、蜂窝电话、智能电话、可穿戴设备(如头盔、眼镜、手表等)和其它类似的计算装置。本文所示的部件、它们的连接和关系、以及它们的功能仅仅作为示例，并且不意在限制本文中描述的或/和者要求的本发明实施例的实现。

如图3所示，电子设备包括至少一个处理器410，以及与至少一个处理器410通信连接的存储器，如ROM(只读存储器)420、RAM(随机访问存储器)430等，其中，存储器存储有可被至少一个处理器执行的计算机程序，处理器410可以根据存储在ROM 420中的计算机程序或者从存储单元480加载到随机访问存储器RAM 430中的计算机程序，来执行各种适当的动作和处理。在RAM 430中，还可存储电子设备操作所需的各种程序和数据。处理器410、ROM420以及RAM 430通过总线440彼此相连。I/O(输入/输出)接口450也连接至总线440。

电子设备中的多个部件连接至I/O接口450，包括：输入单元460，例如键盘、鼠标等；输出单元470，例如各种类型的显示器、扬声器等；存储单元480，例如磁盘、光盘等；以及通信单元490，例如网卡、调制解调器、无线通信收发机等。通信单元490允许电子设备通过诸如因特网的计算机网络或/和各种电信网络与其他设备交换信息/数据。

处理器410可以是各种具有处理和计算能力的通用或/和专用处理组件。处理器410的一些示例包括但不限于中央处理单元(CPU)、图形处理单元(GPU)、各种专用的人工智能(AI)计算芯片、各种运行机器学习模型算法的处理器、数字信号处理器(DSP)、以及任何适当的处理器、控制器、微控制器等。处理器410执行上文实施例一描述的一种Web页面显示方法的一个或多个步骤。

在一些实施例中，一种Web页面显示方法可被实现为计算机程序，其被有形地包含于计算机可读存储介质，例如存储单元480。在一些实施例中，计算机程序的部分或者全部可以经由ROM 420或/和通信单元490而被载入或/和安装到电子设备上。当计算机程序加载到RAM 430并由处理器410执行时，可以执行上文实施例一描述的一种Web页面显示方法的一个或多个步骤。备选地，在其他实施例中，处理器410可以通过其他任何适当的方式(例如，借助于固件)而被配置为执行一种Web页面显示方法。

本文中以上描述的系统和技术的各种实施方式可以在数字电子电路系统、集成电路系统、场可编程门阵列(FPGA)、专用集成电路(ASIC)、专用标准产品(ASSP)、芯片上系统的系统(SOC)、负载可编程逻辑设备(CPLD)、计算机硬件、固件、软件、或/和它们的组合中实现。这些各种实施方式可以包括：实施在一个或者多个计算机程序中，该一个或者多个计算机程序可在包括至少一个可编程处理器的可编程系统上执行或/和解释，该可编程处理器可以是专用或者通用可编程处理器，可以从存储系统、至少一个输入装置、和至少一个输出装置接收数据和指令，并且将数据和指令传输至该存储系统、该至少一个输入装置、和该至少一个输出装置。

用于实施本发明实施例的方法的计算机程序可以采用一个或多个编程语言的任何组合来编写。这些计算机程序可以提供给通用计算机、专用计算机或其他可编程数据处理装置的处理器，使得计算机程序当由处理器执行时使流程图或/和框图中所规定的功能/操作被实施。计算机程序可以完全在机器上执行、部分地在机器上执行，作为独立软件包部分地在机器上执行且部分地在远程机器上执行或完全在远程机器或服务器上执行。

在本发明实施例的上下文中，计算机可读存储介质可以是有形的介质，其可以包含或存储以供指令执行系统、装置或设备使用或与指令执行系统、装置或设备结合地使用的计算机程序。计算机可读存储介质可以包括但不限于电子的、磁性的、光学的、电磁的、红外的、或半导体系统、装置或设备，或者上述内容的任何合适组合。备选地，计算机可读存储介质可以是机器可读信号介质。机器可读存储介质的更具体示例会包括基于一个或多个线的电气连接、便携式计算机盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦除可编程只读存储器(EPROM或快闪存储器)、光纤、便捷式紧凑盘只读存储器(CD-ROM)、光学储存设备、磁储存设备、或上述内容的任何合适组合。

为了提供与用户的交互，可以在电子设备上实施此处描述的系统和技术，该电子设备具有：用于向用户显示信息的显示装置(例如，CRT(阴极射线管)或者LCD(液晶显示器)监视器)；以及键盘和指向装置(例如，鼠标或者轨迹球)，用户可以通过该键盘和该指向装置来将输入提供给电子设备。其它种类的装置还可以用于提供与用户的交互；例如，提供给用户的反馈可以是任何形式的传感反馈(例如，视觉反馈、听觉反馈、或者触觉反馈)；并且可以用任何形式(包括声输入、语音输入或者、触觉输入)来接收来自用户的输入。

可以将此处描述的系统和技术实施在包括后台部件的计算系统(例如，作为数据服务器)、或者包括中间件部件的计算系统(例如，应用服务器)、或者包括前端部件的计算系统(例如，具有图形用户界面或者网络浏览器的用户计算机，用户可以通过该图形用户界面或者该网络浏览器来与此处描述的系统和技术的实施方式交互)、或者包括这种后台部件、中间件部件、或者前端部件的任何组合的计算系统中。可以通过任何形式或者介质的数字数据通信(例如，通信网络)来将系统的部件相互连接。通信网络的示例包括：局域网(LAN)、广域网(WAN)、区块链网络和互联网。

计算系统可以包括客户端和服务器。客户端和服务器一般远离彼此并且通常通过通信网络进行交互。通过在相应的计算机上运行并且彼此具有客户端-服务器关系的计算机程序来产生客户端和服务器的关系。服务器可以是云服务器，又称为云计算服务器或云主机，是云计算服务体系中的一项主机产品，以解决了传统物理主机与VPS服务中，存在的管理难度大，业务扩展性弱的缺陷。

以上对本发明公开的一种Web页面显示方法、装置、电子设备及存储介质进行了详细介绍，本文中应用了具体个例对本发明的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本发明的方法及其核心思想；同时，对于本领域的一般技术人员，依据本发明的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本发明的限制。

Claims (10)

1.一种Web页面显示方法，其特征在于，其包括以下步骤：

根据Web网页的网页地址获取Web网页的代码内容，将所述代码内容渲染成位图数据并输出到内存中，形成位图资源库；

获取目标位图数据并对所述目标位图数据进行视频编码，得到目标编码画面；

将所述目标编码画面发送给目标客户端，以使目标客户端对所述目标编码画面进行解码后显示。

2.根据权利要求1所述的Web页面显示方法，其特征在于，所述方法，还包括：

接收输入参数，所述输入参数包括Web网页的网页地址、网页分辨率、视频编码方式以及发送协议。

3.根据权利要求2所述的Web页面显示方法，其特征在于，根据Web的网页地址获取Web网页的代码内容，并将所述代码内容渲染成位图数据，包括：

基于浏览器引擎根据所述Web网页的网页地址获取Web网页的html或/和css或/和js的代码内容；

根据所述网页分辨率将所述代码内容渲染成位图数据，所述位图数据为所述Web网页的页面画面。

4.根据权利要求2所述的Web页面显示方法，其特征在于，获取目标位图数据并对所述目标位图数据进行视频编码，得到目标编码画面，包括：

获取所述目标位图数据；

采用所述视频编码方式对所述目标位图进行视频编码，得到所述目标编码画面。

5.根据权利要求2所述的Web页面显示方法，其特征在于，将所述目标编码画面发送给目标客户端，包括：

基于所述发送协议通过网络将所述目标编码画面发送给目标客户端。

6.根据权利要求1-5任一项所述的Web页面显示方法，其特征在于，目标客户端对所述目标编码画面进行解码后显示，包括：

目标客户端通过信号处理器对所述目标编码画面进行解码，并把解码后的Web页面在显示大屏中进行显示。

7.一种Web页面显示装置，其特征在于，其包括：

Web内容产生模块，用于根据Web网页的网页地址获取Web网页的代码内容，将所述代码内容渲染成位图数据并输出到内存中，形成位图资源库；

视频编码模块，用于获取目标位图数据并对所述目标位图数据进行视频编码，得到目标编码画面；

协议发送模块，用于将所述目标编码画面发送给目标客户端，以使目标客户端对所述目标编码画面进行解码后显示。

8.根据权利要求7所述的Web页面显示装置，其特征在于，所述装置还包括：

编辑模块，用于接收输入参数，所述输入参数包括Web网页的网页地址、网页分辨率、视频编码方式以及发送协议。

9.一种电子设备，其特征在于，其包括：存储有可执行程序代码的存储器；与所述存储器耦合的处理器；所述处理器调用所述存储器中存储的所述可执行程序代码，用于执行权利要求1-6任一项所述的Web页面显示方法。

10.一种计算机可读存储介质，其特征在于，其存储计算机程序，其中，所述计算机程序使得计算机执行权利要求1-6任一项所述的Web页面显示方法。