CN111327566B - 流媒体数据的确定方法、装置和系统 - Google Patents

Abstract

本申请公开了一种流媒体数据的确定方法、装置和系统。其中，该方法包括：获取目标页面中页面元素的可视化信息；对可视化信息进行渲染，得到帧图像；对帧图像采用流媒体协议进行封装，得到流媒体数据。本申请解决了现有的流媒体数据的时效性差的技术问题。

Description

流媒体数据的确定方法、装置和系统

技术领域

本申请涉及计算机领域，具体而言，涉及一种流媒体数据的确定方法、装置和系统。

背景技术

随着互联网技术的快速发展，人们可以通过终端设备(例如，电脑、手机等)进行直播，并与观看直播的观众进行互动，例如，游戏直播、商品直播等。

目前的基于H5的直播交互方案主要是通过HTML5语言编写的，程序开发人员通过HTML5语言编写各种样式的动画组件，并经过可视化操作之后，输出直播流，即流媒体数据。此外，还可通过导播技术，将输出的流媒体数据合成到其他的流媒体数据中。在上述过程中，程序开发人员使用H5脚本根据直播场景实时修改动画内容或布局。

然而，现有的直播交互方案中，需要用户通过PS(PhotoShop的简称)等专业软件制作素材，然后再通过导播技术合成流媒体数据。该方式仅能适用于小部分的直播场景，并且，在制作素材的过程中，特效素材的制作过程复杂，难以修改，专业制作素材的软件使用门槛较高，制作的素材展示效果差。另外，当制作的素材比较大时，需要占用较多的计算机资源，成本较高。最后，上述方案也不能适用于实时场景，无法制作适时性较高的素材，例如，时钟、比分板、倒计时、任务卡等。

针对上述的问题，目前尚未提出有效的解决方案。

发明内容

本申请实施例提供了一种流媒体数据的确定方法、装置和系统，以至少解决现有的流媒体数据的时效性差的技术问题。

根据本申请实施例的一个方面，提供了一种流媒体数据的确定方法，包括：获取目标页面中页面元素的可视化信息；对可视化信息进行渲染，得到帧图像；对帧图像采用流媒体协议进行封装，得到流媒体数据。

根据本申请实施例的另一方面，还提供了一种流媒体数据的确定装置，包括：解析模块，用于获取目标页面中页面元素的可视化信息；渲染模块，用于对可视化信息进行渲染，得到帧图像；确定模块，用于对帧图像采用流媒体协议进行封装，得到流媒体数据。

根据本申请实施例的另一方面，还提供了一种存储介质，该存储介质包括存储的程序，其中，在程序在被处理器执行时，使得处理器执行流媒体数据的确定方法。

根据本申请实施例的另一方面，还提供了一种处理器，该处理器用于运行程序，其中，程序运行时执行流媒体数据的确定方法。

根据本申请实施例的另一方面，还提供了一种流媒体数据的确定系统，包括：处理器；以及存储器，与处理器连接，用于为处理器提供处理以下处理步骤的指令：获取目标页面中页面元素的可视化信息；对可视化信息进行渲染，得到帧图像；对帧图像采用流媒体协议进行封装，得到流媒体数据。

在本申请实施例中，采用基于页面元素的可视化信息的渲染方式，通过获取目标页面中页面元素的可视化信息，然后对可视化信息进行渲染，得到帧图像，最后，对帧图像采用流媒体协议进行封装，得到流媒体数据。

在上述过程中，基于页面元素的可视化信息得到帧图像，进而根据帧图像得到流媒体数据，由此可见，页面元素的可视化信息建立了目标页面与流媒体数据之间的桥梁，用户可通过对目标页面进行编写，即可实现对流媒体数据的实时更改，从而提高了流媒体数据的时效性。

由此可见，本申请所提供的方案可以解决现有的流媒体数据的时效性差的技术问题。

附图说明

此处所说明的附图用来提供对本申请的进一步理解，构成本申请的一部分，本申请的示意性实施例及其说明用于解释本申请，并不构成对本申请的不当限定。在附图中：

图1是根据本申请实施例的一种用于实现流媒体数据的确定方法的计算机终端(或移动设备)的硬件结构框图；

图2是根据本申请实施例的一种流媒体数据的确定方法的流程图；

图3是根据本申请实施例的一种可选的基于流媒体数据的确定方法的框架图；

图4是根据本申请实施例的一种流媒体数据的确定装置的示意图；

图5是根据本申请实施例的一种计算机终端的结构框图；

图6是根据本申请实施例的一种可选的DOM树结构的示意图；

图7是根据本申请实施例的一种可选的CSSOM树结构的示意图；以及

图8是根据本申请实施例的一种可选的渲染树结构的示意图。

具体实施方式

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

需要说明的是，本申请的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本申请的实施例能够以除了在这里图示或描述的那些以外的顺序实施。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。

首先，在对本申请实施例进行描述的过程中出现的部分名词或术语适用于如下解释：

H5，HTML5的简称，是超文本标记语言(HTML，Hyper Text Markup Language的简称)的第五次修改后的前端编程语言，该语言可用于编写网页。

canvas，HTML5支持的一个属性，用于在网页上进行绘制。

DOM树，Document Object Model Tree，文档对象模型树，其可通过独立于平台和语言的方式访问和修改文档的内容和结构。

渲染树，即Render Tree，用于计算DOM树中可见元素的布局，并可作为将像素渲染到屏幕上的过程的输入。

实施例1

根据本申请实施例，还提供了一种流媒体数据的确定方法实施例，需要说明的是，在附图的流程图示出的步骤可以在诸如一组计算机可执行指令的计算机系统中执行，并且，虽然在流程图中示出了逻辑顺序，但是在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤。

本申请实施例一所提供的方法实施例可以在移动终端、计算机终端或者类似的运算装置中执行。图1示出了一种用于实现流媒体数据的确定方法的计算机终端(或移动设备)的硬件结构框图。如图1所示，计算机终端10(或移动设备10)可以包括一个或多个(图中采用102a、102b，……，102n来示出)处理器102(处理器102可以包括但不限于微处理器MCU或可编程逻辑器件FPGA等的处理装置)、用于存储数据的存储器104、以及用于通信功能的传输装置106。除此以外，还可以包括：显示器、输入/输出接口(I/O接口)、通用串行总线(USB)端口(可以作为I/O接口的端口中的一个端口被包括)、网络接口、电源和/或相机。本领域普通技术人员可以理解，图1所示的结构仅为示意，其并不对上述电子装置的结构造成限定。例如，计算机终端10还可包括比图1中所示更多或者更少的组件，或者具有与图1所示不同的配置。

应当注意到的是上述一个或多个处理器102和/或其他数据处理电路在本文中通常可以被称为“数据处理电路”。该数据处理电路可以全部或部分的体现为软件、硬件、固件或其他任意组合。此外，数据处理电路可为单个独立的处理模块，或全部或部分的结合到计算机终端10(或移动设备)中的其他元件中的任意一个内。如本申请实施例中所涉及到的，该数据处理电路作为一种处理器控制(例如与接口连接的可变电阻终端路径的选择)。

存储器104可用于存储应用软件的软件程序以及模块，如本申请实施例中的流媒体数据的确定方法对应的程序指令/数据存储装置，处理器102通过运行存储在存储器104内的软件程序以及模块，从而执行各种功能应用以及数据处理，即实现上述的流媒体数据的确定方法。存储器104可包括高速随机存储器，还可包括非易失性存储器，如一个或者多个磁性存储装置、闪存、或者其他非易失性固态存储器。在一些实例中，存储器104可进一步包括相对于处理器102远程设置的存储器，这些远程存储器可以通过网络连接至计算机终端10。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。

传输装置106用于经由一个网络接收或者发送数据。上述的网络具体实例可包括计算机终端10的通信供应商提供的无线网络。在一个实例中，传输装置106包括一个网络适配器(Network Interface Controller，NIC)，其可通过基站与其他网络设备相连从而可与互联网进行通讯。在一个实例中，传输装置106可以为射频(Radio Frequency，RF)模块，其用于通过无线方式与互联网进行通讯。

显示器可以例如触摸屏式的液晶显示器(LCD)，该液晶显示器可使得用户能够与计算机终端10(或移动设备)的用户界面进行交互。

此处需要说明的是，在一些可选实施例中，上述图1所示的计算机设备(或移动设备)可以包括硬件元件(包括电路)、软件元件(包括存储在计算机可读介质上的计算机代码)、或硬件元件和软件元件两者的结合。应当指出的是，图1仅为特定具体实例的一个实例，并且旨在示出可存在于上述计算机设备(或移动设备)中的部件的类型。

在上述运行环境下，本申请提供了如图2所示的流媒体数据的确定方法。图2是根据本申请实施例一的流媒体数据的确定方法的流程图，由图2可知，该方法包括如下步骤：

步骤S202，获取目标页面中页面元素的可视化信息。

需要说明的是，能够通过开发语言对页面进行开发的客户端可作为本实施例的执行主体，其中，上述客户端可以为但不限于电脑。另外，上述目标页面可以为但不限于HTML5页面，目标页面中的页面元素可以为但不限于canvas组件，例如，体育直播的比分板、计时器，教育直播的动态课件，新闻直播的标题栏等。

此外，还需要说明的是，可视化信息包括可视化逻辑结果，不同的直播场景对应不同的可视化信息，例如，体育直播页面中页面元素的可视化信息与教育直播页面中页面元素的可视化信息不同。

步骤S204，对可视化逻辑结构进行渲染，得到帧图像。

需要说明的是，通过步骤S202得到的可视化信息仅代表目标页面的信息，其并不是图像，因此，在得到目标页面中页面元素的可视化信息之后，还需要对可视化逻辑结构进行渲染，从而得到帧图像。

步骤S206，对帧图像采用流媒体协议进行封装，得到流媒体数据。

可选的，步骤S206中的流媒体协议包括但不限于HTTP协议、WEBM协议。需要说明的是，在对帧图像进行封装之前，还需要对帧图像进行编码。其中，对帧图像进行编码不仅对帧图像进行了压缩，保证了帧图像的传输速率，还可以对帧图像进行加密，保证了帧图像传输的可靠性。

基于上述步骤S202至步骤S206所限定的方案，可以获知，采用基于页面元素的可视化信息的渲染方式，通过对目标页面进行解析，得到目标页面中页面元素的可视化信息，然后对可视化信息进行渲染，得到帧图像，最后，对帧图像采用流媒体协议进行封装，得到流媒体数据。

容易注意到的是，基于页面元素的可视化信息得到帧图像，进而根据帧图像得到流媒体数据，由此可见，页面元素的可视化信息建立了目标页面与流媒体数据之间的桥梁，用户可通过对目标页面进行编写，即可实现对流媒体数据的实时更改，从而提高了流媒体数据的时效性。

由此可见，本申请所提供的方案可以解决现有的流媒体数据的时效性差的技术问题。

在一种可选的方案中，客户端可获取目标页面中页面元素的可视化信息。具体的，客户端首先确定目标页面中的页面元素，然后基于页面元素确定页面元素之间的文档对象模型结构，将该文档对象模型结构作为可视化逻辑结构。

需要说明的是，不同的直播场景对应不同的页面元素。其中，对于H5页面，其主要分为静态H5canvas页面、动态H5canvas页面以及混合H5canvas页面。在静态H5canvas页面中，页面元素canvas组件为静态组件，程序开发人员可采用纯HTML语句对canvas组件进行编写，主要编写canvas组件的静态属性，例如，canvas组件的布局、颜色、背景等；在动态H5canvas页面中，页面元素canvas组件为动态组件，程序开发人员可采用HTML语言与JS语言相结合的方式对动态组件canvas进行编写；在混合H5canvas页面中，包含canvas组件以及多种除canvas组件之外的其他页面元素，例如，CSS(Cascading Style Sheets，层叠样式表)、DIV(DIVision，图层)。

可选的，客户端可通过加载HTML5的URL(Uniform Resource Locator，统一资源定位符)地址来逐层加载资源(即页面元素)。具体的，客户端首先加载HTML文件，然后再加载HTML文件中所包含的所有JS脚本文件、HTML文件中所包含的CSS、DIV等页面元素以及HTML文件中所包含的图片等素材。其中，客户端优先加载已经缓存的页面元素，并下载客户端第一次访问该目标页面的数据，然后缓存加载的上述页面元素，以备后续使用。在完成对页面元素的加载之后，客户端对目标页面(即HTML页面)进行解析，主要对目标页面中所有的页面元素进行解析，然后根据每个页面元素的逻辑结构生成DOM树，即文档对象模型结构，其中，文档对象模型结构即为页面元素的可视化逻辑结构。

需要说明的是，在得到文档对象模型结构之后，客户端进一步调用JS解析引擎对文档对象模型结构进行JS解析，并将解析结果反馈给文档对象模型结构，以实现对文档对象模型结构的不断更新。

此外，还需要说明的是，目标页面对应的可视化逻辑结构代表了目标页面的逻辑结构，客户端还需要将可视化逻辑结构转换为可视化布局，才能得到目标页面对应的图像。

在一种可选的方案中，客户端获取可视化逻辑结构中各个元素间的显示布局关系，然后基于显示布局关系以及可视化逻辑结构中至少一个待绘制元素生成渲染树结构，并基于渲染树结构确定帧图像。其中，渲染树结构与帧图像是一一对应的。

具体的，客户端对可视化逻辑结构中的各个页面元素进行解析，可得到各个页面元素之间的显示布局关系，然后根据得到的显示布局关系将需要绘制的待绘制元素重新生成渲染树结构，即Render树结构。其中，每个渲染树结构在逻辑上代表了一个帧图像。

可选的，如图6所示的DOM树结构，在图6中，DOM树的每个节点对应一个元素，例如，节点html为节点head和节点body的父节点。图6中，文本节点“Hello,”、“students”为DOM树中的待绘制元素。客户端在得到DOM树之后，从DOM树的根节点开始对每个节点进行遍历，得到DOM树节点中的待绘制元素“Hello,”和“students”。图7示出了CSSOM树结构，CSSOM(CSSObject Model)树与DOM树类似，每个节点也对应一个元素，其中，CSSOM树可存储DOM树结构中元素的样式，例如，图7中节点“font-size：16px”对应的是DOM树中文本节点的样式。客户端同样对CSSOM树的根节点开始对每个节点进行遍历，得到CSSOM树节点中的绘制样式。然后，客户端将DOM树和CSSOM树进行结合，生成如图8所示的渲染树结构，在图8中，待绘制元素“Hello,”和“students”对应的绘制样式为加粗(如图8中的font-weight：bold)，字体大小为16px。

可选的，在基于可视化逻辑结构中的至少一个待绘制元素生成渲染树结构之后，客户端还确定可视化逻辑结构中的待绘制元素的展示配置信息，然后基于展示配置信息确定用于对渲染树结构中的节点进行更新的任务，并将任务存储至调度队列中。其中，展示配置信息包括但不限于各个待绘制元素的布局、相对位置以及展示时间等。

需要说明的是，待绘制元素为可视化逻辑结构中需要绘制的部分。其中，客户端基于可视化逻辑结构确定逻辑数据之后，将逻辑数据拆分为任务，并将任务注入至调度队列中。然后，客户端将渲染树结构中各个节点所包含的内容在任务的驱动下进行迭代更新。每次迭代更新后的任务所对应的图层将根据目标页面的画面特性来确定绘制引擎，进而在绘制引擎的驱动下生成帧图像。其中，绘制引擎可以包括但不限于二维绘制引擎和三维绘制引擎。可选的，当目标页面的分辨率低于预设分辨率，和/或帧率低于预设帧率时，采用二维绘制引擎生成帧图像，否则采用三维绘制引擎生成帧图像。

在一种可选的方案中，在基于渲染树结构确定帧图像之前，客户端还确定目标页面中与待绘制元素对应的至少一个canvas元素，然后控制canvas元素切换至同一页面的其他canvas元素，其中，不同的canvas元素对应不同的展示场景；或者控制canvas元素切换至目标canvas元素，目标canvas元素为对目标页面中的canvas元素进行重新编码后得到的，至少一个canvas元素用于生成至少一个图像的图像序列，该图像序列用于构建至少一个帧图像。例如，每个canvas元素与一个节目频道对应，则多个canvas元素与多个节目频道对应，每个节目频道对应的播放内容通过对应的canvas元素进行绘制。当对节目频道进行切换时，可以通过切换对应的canvas元素来得到切换频道的目的。

需要说明的是，canvas元素具有两个属性，即高度和宽度，其中，canvas元素的高度和宽度定义了固定大小的画布，通过一个或者多个渲染上下文(the renderingcontext)在画布上进行绘制从而得到待绘制元素。另外，canvas元素的动态切换是直播交互的关键，canvas元素的动态切换不仅可以基于JS脚本赋予canvas元素动态的效果，还可以在直播过程中动态切换canvas元素。

可选的，客户端的HTML5程序可加载多个canvas元素，每个canvas元素与帧图像一一对应，并且客户端缓存的是最新的帧图像，不同canvas元素之间的帧图像互不关联。基于上述内容，客户端在直播流媒体数据时，可对canvas元素进行切换。其中，客户端可将canvas元素切换为同一个H5页面中的其他canvas元素，从而实现canvas元素之间的场景切换；客户端也可对原始的H5页面中的canvas元素进行重写，并重新加载重新后的整个H5页面，从而保证下一个帧图像为重新后的H5页面。

需要说明的是，除上述两种canvas元素的切换方式外，客户端还可通过加载不同的H5程序来实现canvas元素的切换，或者通过防伪不同的URL的方式来实现canvas元素的切换。

在一种可选的方案中，在得到了目标页面对应的帧图像之后，客户端对帧图像对帧图像采用流媒体协议进行封装，得到流媒体数据。具体的，客户端确定帧图像的明亮度、色度和浓度数据，并对明亮度、色度和浓度数据采用流媒体协议进行封装，得到流媒体数据。

可选的，客户端首先对帧图像进行明亮度、色度和浓度数据的转换，在进行上述转换的过程中，帧图像保留了透明度信息。在得到转换后的帧图像之后，客户端对转换后的帧图像进行编码处理。然后再使用HTTP或WEBM协议对编码后的帧图像进行封装推流。

需要说明的是，对帧图像进行编码处理的编码格式包括但不限于VP8、Vp9、H264等编码格式。流媒体协议不限于上述HTTP或WEBM协议，还可以采用APNG、MOV、MP4等封装协议进行封装。客户端推送流媒体数据的推流协议可以采用HLS等流媒体协议。

此外，还需要说明的是，由于canvas元素的帧图像完全是由JS脚本驱动生成的，目标页面对应的帧率具有不稳定性。在正常情况下编码延时ts<＝1000ms/n fps，在高帧率的情况下，客户端可接受的编码延时较低，如果此时帧图像的分辨率较高，则编码速度将变慢，从而导致帧延时过大，画面卡顿。为避免上述问题，在对帧图像采用流媒体协议进行封装之后，客户端还需要对目标页面对应的帧率和分辨率进行调整。

可选的，客户端可采用最大帧率控制方法对帧图像的帧率进行调整。具体的，客户端首先检测流媒体数据的发送端设备的状态信息，并按照状态信息确定发送端设备的最大允许帧率。然后客户端检测发送端设备的当前帧率，并判断当前帧率是否大于最大允许帧率，然后在当前帧率大于最大允许帧率时，调整当前帧率至小于最大允许帧率。

可选的，客户端可采用最高分辨率控制方法对帧图像的分辨率进行调整。具体的，客户端首先检测流媒体数据的发送端设备的状态信息，并按照状态信息确定发送端设备的最大允许分辨率。然后客户端检测发送端设备的当前分辨率，并判断当前分辨率是否大于最大允许分辨率，在当前分辨率小于最大允许分辨率时，调整当前帧率小于最大允许分辨率。

需要说明的是，上述过程中，发送端设备的状态信息包括但不限于发送端设备的负载状况。可选的，发送端设备的负载越多，发送端设备的最大允许帧率越大。

此外，还需要说明的是，上述最大允许帧率可以为25fps，最大允许分辨率为1920×1080。在当前帧率大于最大允许帧率时，使用最大允许帧率输出流媒体数据，不仅保证了流媒体数据传输的低时延，还避免了编码的卡顿的问题。

在一种可选的方案中，图3示出了基于流媒体数据的确定方法的框架图。由图3可知，客户端对HTML5进行解析，得到H5页面中的canvas元素(如图3中的canvas1、canvas2、canvas3和canvas4)，然后在对H5页面中的canvas元素进行HTML加载、HTML可视化、canvas切换、canvas采集、canvas1编码，然后在将编码后的canvas1元素通过HTTP/WEBM协议进行封装，并以流媒体数据的形式输出。

需要说明的是，在上述过程中，在canvas采集部分，可以以RGBA、BGRA等像素格式采集canvas元素。

此外，还需要说明的是，本申请所提供的方案采用HTML5中的canvas元素实现了HTML5文本的直播化。另外，将HTML5技术与直播服务技术相结合，实现了高时效性的直播交互服务。进一步地，通过HTML5编写实现了实时定制化修改直播内容。

由上述内容可知，本申请所提供的方案操作简单灵活，只需要编写HTML5代码即可实现各种酷炫的定制化内容，而且可实时对直播内容进行修改，使用门槛低，效果好。另外，canvas脚本大多是文本文件，占用资源少，成本低。进一步的，采用JS脚本实现了特效的实时性。最后，本申请所提供的方案全面兼容HTML5的新特性，扩展性好。

需要说明的是，对于前述的各方法实施例，为了简单描述，故将其都表述为一系列的动作组合，但是本领域技术人员应该知悉，本申请并不受所描述的动作顺序的限制，因为依据本申请，某些步骤可以采用其他顺序或者同时进行。其次，本领域技术人员也应该知悉，说明书中所描述的实施例均属于优选实施例，所涉及的动作和模块并不一定是本申请所必须的。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到根据上述实施例的流媒体数据的确定方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质(如ROM/RAM、磁碟、光盘)中，包括若干指令用以使得一台终端设备(可以是手机，计算机，服务器，或者网络设备等)执行本申请各个实施例所述的方法。

实施例2

根据本申请实施例，还提供了一种用于实施上述流媒体数据的确定方法的流媒体数据的确定装置，如图4所示，该装置40包括：解析模块401、渲染模块403以及确定模块405。

其中，解析模块401，用于获取目标页面中页面元素的可视化信息；渲染模块403，用于对可视化信息进行渲染，得到帧图像；确定模块405，用于对帧图像采用流媒体协议进行封装，得到流媒体数据。

此处需要说明的是，上述解析模块401、渲染模块403以及确定模块405对应于实施例1中的步骤S202至步骤S206，三个模块与对应的步骤所实现的实例和应用场景相同，但不限于上述实施例一所公开的内容。需要说明的是，上述模块作为装置的一部分可以运行在实施例一提供的计算机终端10中。

在一种可选的方案中，可视化信息包括：可视化逻辑结构。其中，解析模块包括：第一确定模块以及处理模块。其中，第一确定模块，用于确定目标页面中的页面元素；处理模块，用于基于页面元素确定页面元素之间的文档对象模型结构，将该文档对象模型结构作为可视化逻辑结构。

在一种可选的方案中，渲染模块包括：获取模块、生成模块以及第二确定模块。其中，获取模块，用于获取可视化逻辑结构中各个元素间的显示布局关系；生成模块，用于基于显示布局关系以及可视化逻辑结构中的至少一个待绘制元素生成渲染树结构，其中，渲染树结构与帧图像是一一对应的；第二确定模块，用于基于渲染树结构确定帧图像。

在一种可选的方案中，流媒体数据的确定装置还包括：第三确定模块以及第四确定模块。其中，第三确定模块，用于确定可视化逻辑结构中的待绘制元素的展示配置信息；第四确定模块，用于基于展示配置信息确定用于对渲染树结构中的节点进行更新的任务，并将任务存储至调度队列中。

在一种可选的方案中，流媒体数据的确定装置还包括：第五确定模块以及切换模块。其中，第五确定模块，用于确定目标页面中与待绘制元素对应的至少一个canvas元素，其中，至少一个canvas元素用于生成至少一个图像的图像序列，该图像序列用于构建至少一个帧图像；切换模块，用于控制canvas元素切换至同一页面的其他canvas元素，其中，不同的canvas元素对应不同的展示场景；或者控制canvas元素切换至目标canvas元素，其中，目标canvas元素为对目标页面中的canvas元素进行重新编码后得到的。

在一种可选的方案中，流媒体数据的确定装置还包括：第一检测模块、第六确定模块、第二检测模块、第一判断模块以及第一调整模块。其中，第一检测模块，用于检测流媒体数据的发送端设备的状态信息；第六确定模块，用于按照状态信息确定发送端设备的最大允许帧率；第二检测模块，用于检测发送端设备的当前帧率；第一判断模块，用于判断当前帧率是否大于最大允许帧率；第一调整模块，用于在当前帧率大于最大允许帧率时，调整当前帧率至小于最大允许帧率。

在一种可选的方案中，流媒体数据的确定装置还包括：第三检测模块、第七确定模块、第四检测模块、第二判断模块以及第二调整模块。其中，第三检测模块，用于检测流媒体数据的发送端设备的状态信息；第七确定模块，用于按照状态信息确定发送端设备的最大允许分辨率；第四检测模块，用于检测发送端设备的当前分辨率；第二判断模块，用于判断当前分辨率是否大于最大允许分辨率；第二调整模块，用于在当前分辨率小于最大允许分辨率时，调整当前帧率小于最大允许分辨率。

在一种可选的方案中，确定模块包括：封装模块以及第八确定模块。其中第八确定模块，用于确定帧图像的明亮度、色度和浓度数据；封装模块，用于对明亮度、色度和浓度数据采用流媒体协议进行封装，得到流媒体数据。

实施例3

根据本申请实施例，还提供了一种用于实施上述流媒体数据的确定方法的流媒体数据的确定系统，其中，该系统包括：处理器以及存储器。

其中，存储器，与处理器连接，用于为处理器提供处理以下处理步骤的指令：获取目标页面中页面元素的可视化信息；对可视化信息进行渲染，得到帧图像；对帧图像采用流媒体协议进行封装，得到流媒体数据。

由上可知，采用基于页面元素的可视化信息的渲染方式，通过获取目标页面中页面元素的可视化信息，然后对可视化信息进行渲染，得到帧图像，最后，对帧图像采用流媒体协议进行封装，得到流媒体数据。

容易注意到的是，基于页面元素的可视化信息得到帧图像，进而根据帧图像得到流媒体数据，由此可见，页面元素的可视化信息建立了目标页面与流媒体数据之间的桥梁，用户可通过对目标页面进行编写，即可实现对流媒体数据的实时更改，从而提高了流媒体数据的时效性。

由此可见，本申请所提供的方案可以解决现有的流媒体数据的时效性差的技术问题。

在一种可选的方案中，处理器还用于确定目标页面中的页面元素，并基于页面元素确定页面元素之间的文档对象模型结构，将该文档对象模型结构作为可视化逻辑结构。

进一步地，在得到可视化逻辑结构之后，处理器获取可视化逻辑结构中各个元素间的显示布局关系，并基于显示布局关系以及可视化逻辑结构中的至少一个待绘制元素生成渲染树结构，然后基于渲染树结构确定帧图像。其中，渲染树结构与帧图像是一一对应的。

在一种可选的方案中，在将可视化逻辑结构中各个元素中的待绘制元素生成渲染树结构之后，处理器还用于确定可视化逻辑结构中的待绘制元素的展示配置信息，并基于展示配置信息确定用于对渲染树结构中的节点进行更新的任务，并将任务存储至调度队列中。

在一种可选的方案中，在基于渲染树结构确定帧图像之前，处理器还用于确定目标页面中与待绘制元素对应的至少一个canvas元素，并控制canvas元素切换至同一页面的其他canvas元素，其中，不同的canvas元素对应不同的展示场景；或者控制canvas元素切换至目标canvas元素，其中，目标canvas元素为对目标页面中的canvas元素进行重新编码后得到的，上述至少一个canvas元素用于生成至少一个图像的图像序列，该图像序列用于构建至少一个帧图像。

需要说明的是，由于canvas元素的帧图像完全是由JS脚本驱动生成的，目标页面对应的帧率具有不稳定性。在正常情况下编码延时ts<＝1000ms/n fps，在高帧率的情况下，客户端可接受的编码延时较低，如果此时帧图像的分辨率较高，则编码速度将变慢，从而导致帧延时过大，画面卡顿。为避免上述问题，在对帧图像采用流媒体协议进行封装之后，客户端还需要对目标页面对应的帧率和分辨率进行调整。可选的，客户端可采用最大帧率控制方法对帧图像的帧率进行调整。具体的，客户端首先检测流媒体数据的发送端设备的状态信息，并按照状态信息确定发送端设备的最大允许帧率。然后客户端检测发送端设备的当前帧率，并判断当前帧率是否大于最大允许帧率，然后在当前帧率大于最大允许帧率时，调整当前帧率至小于最大允许帧率。

可选的，客户端可采用最高分辨率控制方法对帧图像的分辨率进行调整。具体的，客户端首先检测流媒体数据的发送端设备的状态信息，并按照状态信息确定发送端设备的最大允许分辨率。然后客户端检测发送端设备的当前分辨率，并判断当前分辨率是否大于最大允许分辨率，在当前分辨率小于最大允许分辨率时，调整当前帧率小于最大允许分辨率。

在一种可选的方案中，在得到帧图像之后，处理器通过确定帧图像的明亮度、色度和浓度数据，并对明亮度、色度和浓度数据采用流媒体协议进行封装，得到流媒体数据。

实施例4

本申请的实施例可以提供一种计算机终端，该计算机终端可以是计算机终端群中的任意一个计算机终端设备。可选地，在本实施例中，上述计算机终端也可以替换为移动终端等终端设备。

可选地，在本实施例中，上述计算机终端可以位于计算机网络的多个网络设备中的至少一个网络设备。

在本实施例中，上述计算机终端可以执行流媒体数据的确定方法中以下步骤的程序代码：获取目标页面中页面元素的可视化信息；对可视化信息进行渲染，得到帧图像；对帧图像采用流媒体协议进行封装，得到流媒体数据。

可选地，图5是根据本申请实施例的一种计算机终端的结构框图。如图5所示，该计算机终端A可以包括：一个或多个(图中仅示出一个)处理器502、存储器504以及传输装置506。

其中，存储器可用于存储软件程序以及模块，如本申请实施例中的流媒体数据的确定方法和装置对应的程序指令/模块，处理器通过运行存储在存储器内的软件程序以及模块，从而执行各种功能应用以及数据处理，即实现上述的流媒体数据的确定方法。存储器可包括高速随机存储器，还可以包括非易失性存储器，如一个或者多个磁性存储装置、闪存、或者其他非易失性固态存储器。在一些实例中，存储器可进一步包括相对于处理器远程设置的存储器，这些远程存储器可以通过网络连接至终端A。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。

处理器可以通过传输装置调用存储器存储的信息及应用程序，以执行下述步骤：获取目标页面中页面元素的可视化信息；对可视化信息进行渲染，得到帧图像；对帧图像采用流媒体协议进行封装，得到流媒体数据。

可选的，上述处理器还可以执行如下步骤的程序代码：确定目标页面中的页面元素；基于页面元素确定页面元素之间的文档对象模型结构，将该文档对象模型结构作为可视化逻辑结构。其中，可视化信息包括：可视化逻辑结构。

可选的，上述处理器还可以执行如下步骤的程序代码：获取可视化逻辑结构中各个元素间的显示布局关系；基于显示布局关系以及可视化逻辑结构中的至少一个待绘制元素生成渲染树结构，其中，渲染树结构与帧图像是一一对应的；基于渲染树结构确定帧图像。

可选的，上述处理器还可以执行如下步骤的程序代码：确定可视化逻辑结构中的待绘制元素的展示配置信息；基于展示配置信息确定用于对渲染树结构中的节点进行更新的任务，并将任务存储至调度队列中。

可选的，上述处理器还可以执行如下步骤的程序代码：确定目标页面中与待绘制元素对应的至少一个canvas元素，其中，至少一个canvas元素用于生成至少一个图像的图像序列，该图像序列用于构建至少一个帧图像；控制canvas元素切换至同一页面的其他canvas元素，其中，不同的canvas元素对应不同的展示场景；或者控制canvas元素切换至目标canvas元素，其中，目标canvas元素为对目标页面中的canvas元素进行重新编码后得到的。

可选的，上述处理器还可以执行如下步骤的程序代码：检测流媒体数据的发送端设备的状态信息；按照状态信息确定发送端设备的最大允许帧率；检测发送端设备的当前帧率；判断当前帧率是否大于最大允许帧率；在当前帧率大于最大允许帧率时，调整当前帧率至小于最大允许帧率。

可选的，上述处理器还可以执行如下步骤的程序代码：检测流媒体数据的发送端设备的状态信息；按照状态信息确定发送端设备的最大允许分辨率；检测发送端设备的当前分辨率；判断当前分辨率是否大于最大允许分辨率；在当前分辨率小于最大允许分辨率时，调整当前帧率小于最大允许分辨率。

可选的，上述处理器还可以执行如下步骤的程序代码：确定帧图像的明亮度、色度和浓度数据；对明亮度、色度和浓度数据采用流媒体协议进行封装，得到流媒体数据。

本领域普通技术人员可以理解，图5所示的结构仅为示意，计算机终端也可以是智能手机(如Android手机、iOS手机等)、平板电脑、掌声电脑以及移动互联网设备(MobileInternet Devices，MID)、PAD等终端设备。图5其并不对上述电子装置的结构造成限定。例如，计算机终端A还可包括比图5中所示更多或者更少的组件(如网络接口、显示装置等)，或者具有与图5所示不同的配置。

本领域普通技术人员可以理解上述实施例的各种方法中的全部或部分步骤是可以通过程序来指令终端设备相关的硬件来完成，该程序可以存储于一计算机可读存储介质中，存储介质可以包括：闪存盘、只读存储器(Read-Only Memory，ROM)、随机存取器(RandomAccess Memory，RAM)、磁盘或光盘等。

实施例5

本申请的实施例还提供了一种存储介质。可选地，在本实施例中，上述存储介质可以用于保存上述实施例一所提供的流媒体数据的确定方法所执行的程序代码。

可选地，在本实施例中，上述存储介质可以位于计算机网络中计算机终端群中的任意一个计算机终端中，或者位于移动终端群中的任意一个移动终端中。

可选地，在本实施例中，存储介质被设置为存储用于执行以下步骤的程序代码：获取目标页面中页面元素的可视化信息；对可视化信息进行渲染，得到帧图像；对帧图像采用流媒体协议进行封装，得到流媒体数据。

可选地，在本实施例中，存储介质被设置为存储用于执行以下步骤的程序代码：确定目标页面中的页面元素；基于页面元素确定页面元素之间的文档对象模型结构，将该文档对象模型结构作为可视化逻辑结构。其中，可视化信息包括：可视化逻辑结构。

可选地，在本实施例中，存储介质被设置为存储用于执行以下步骤的程序代码：获取可视化逻辑结构中各个元素间的显示布局关系；基于显示布局关系以及可视化逻辑结构中的至少一个待绘制元素生成渲染树结构，其中，渲染树结构与帧图像是一一对应的；基于渲染树结构确定帧图像。

可选地，在本实施例中，存储介质被设置为存储用于执行以下步骤的程序代码：确定可视化逻辑结构中的待绘制元素的展示配置信息；基于展示配置信息确定用于对渲染树结构中的节点进行更新的任务，并将任务存储至调度队列中。

可选地，在本实施例中，存储介质被设置为存储用于执行以下步骤的程序代码：确定目标页面中与待绘制元素对应的至少一个canvas元素，其中，至少一个canvas元素用于生成至少一个图像的图像序列，该图像序列用于构建至少一个帧图像；控制canvas元素切换至同一页面的其他canvas元素，其中，不同的canvas元素对应不同的展示场景；或者控制canvas元素切换至目标canvas元素，其中，目标canvas元素为对目标页面中的canvas元素进行重新编码后得到的。

可选地，在本实施例中，存储介质被设置为存储用于执行以下步骤的程序代码：检测流媒体数据的发送端设备的状态信息；按照状态信息确定发送端设备的最大允许帧率；检测发送端设备的当前帧率；判断当前帧率是否大于最大允许帧率；在当前帧率大于最大允许帧率时，调整当前帧率至小于最大允许帧率。

可选地，在本实施例中，存储介质被设置为存储用于执行以下步骤的程序代码：检测流媒体数据的发送端设备的状态信息；按照状态信息确定发送端设备的最大允许分辨率；检测发送端设备的当前分辨率；判断当前分辨率是否大于最大允许分辨率；在当前分辨率小于最大允许分辨率时，调整当前帧率小于最大允许分辨率。

可选地，在本实施例中，存储介质被设置为存储用于执行以下步骤的程序代码：确定帧图像的明亮度、色度和浓度数据；对明亮度、色度和浓度数据采用流媒体协议进行封装，得到流媒体数据。

上述本申请实施例序号仅仅为了描述，不代表实施例的优劣。

在本申请的上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述的部分，可以参见其他实施例的相关描述。

在本申请所提供的几个实施例中，应该理解到，所揭露的技术内容，可通过其它的方式实现。其中，以上所描述的装置实施例仅仅是示意性的，例如所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，单元或模块的间接耦合或通信连接，可以是电性或其它的形式。

所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。

另外，在本申请各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。

所述集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可为个人计算机、服务器或者网络设备等)执行本申请各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、移动硬盘、磁碟或者光盘等各种可以存储程序代码的介质。

以上所述仅是本申请的优选实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本申请原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也应视为本申请的保护范围。

Claims (10)

1.一种流媒体数据的确定方法，其特征在于，包括：

获取目标页面中页面元素的可视化信息；

对所述可视化信息进行渲染，得到帧图像；

对所述帧图像采用流媒体协议进行封装，得到流媒体数据；

所述方法还包括：在对所述帧图像进行封装之前，对所述帧图像进行编码；

所述可视化信息包括：可视化逻辑结构；获取所述目标页面中页面元素的可视化信息，包括：确定所述目标页面中的页面元素；基于所述页面元素确定所述页面元素之间的文档对象模型结构，将该文档对象模型结构作为所述可视化逻辑结构；

所述方法还包括：在得到所述文档对象模型结构之后，调用JS解析引擎对所述文档对象模型结构进行解析，并将解析结果反馈给所述文档对象模型结构，以对所述文档对象模型结构进行更新；

在对所述帧图像采用流媒体协议进行封装之后，所述方法还包括：基于所述流媒体数据的发送端设备的状态信息，确定所述发送端设备的最大允许帧率和最大允许分辨率；基于所述最大允许帧率和所述最大允许分辨率分别对所述目标页面对应的帧率和分辨率进行调整，其中，所述发送端设备的状态信息至少包括所述发送端设备的负载状况。

2.根据权利要求1所述的方法，其特征在于，对所述可视化信息进行渲染，得到帧图像，包括：

获取所述可视化逻辑结构中各个元素间的显示布局关系；

基于所述显示布局关系以及所述可视化逻辑结构中的至少一个待绘制元素生成渲染树结构，其中，所述渲染树结构与所述帧图像是一一对应的；

基于所述渲染树结构确定所述帧图像。

3.根据权利要求2所述的方法，其特征在于，基于所述可视化逻辑结构中的至少一个待绘制元素生成渲染树结构之后，所述方法还包括：

确定所述可视化逻辑结构中所述待绘制元素的展示配置信息；

基于所述展示配置信息确定用于对所述渲染树结构中的节点进行更新的任务，并将所述任务存储至调度队列中。

4.根据权利要求2所述的方法，其特征在于，基于所述渲染树结构确定所述帧图像之前，所述方法还包括：

确定所述目标页面中与所述待绘制元素对应的至少一个canvas元素，其中，所述至少一个canvas元素用于生成至少一个图像的图像序列，该图像序列用于构建至少一个所述帧图像；

控制所述canvas元素切换至同一页面的其他canvas元素，其中，不同的canvas元素对应不同的展示场景；或者控制所述canvas元素切换至目标canvas元素，其中，所述目标canvas元素为对所述目标页面中的canvas元素进行重新编码后得到的。

5.根据权利要求1所述的方法，其特征在于，对所述帧图像采用流媒体协议进行封装之后，所述方法还包括：

检测所述流媒体数据的发送端设备的状态信息；

按照所述状态信息确定所述发送端设备的最大允许帧率；

检测所述发送端设备的当前帧率；

判断所述当前帧率是否大于最大允许帧率；

在所述当前帧率大于最大允许帧率时，调整所述当前帧率至小于所述最大允许帧率。

6.根据权利要求1所述的方法，其特征在于，对所述帧图像采用流媒体协议进行封装之后，所述方法还包括：

检测所述流媒体数据的发送端设备的状态信息；

按照所述状态信息确定所述发送端设备的最大允许分辨率；

检测所述发送端设备的当前分辨率；

判断所述当前分辨率是否大于所述最大允许分辨率；

在所述当前分辨率大于所述最大允许分辨率时，调整所述当前分辨率小于所述最大允许分辨率。

7.根据权利要求1至6中任意一项所述的方法，其特征在于，对所述帧图像采用流媒体协议进行封装包括：

确定所述帧图像的明亮度、色度和浓度数据；

对所述明亮度、色度和浓度数据采用流媒体协议进行封装，得到所述流媒体数据。

8.一种流媒体数据的确定装置，其特征在于，包括：

解析模块，用于获取目标页面中页面元素的可视化信息；

渲染模块，用于对所述可视化信息进行渲染，得到帧图像；

确定模块，用于对所述帧图像采用流媒体协议进行封装，得到流媒体数据；

所述装置还用于在对所述帧图像进行封装之前，对所述帧图像进行编码；

所述可视化信息包括：可视化逻辑结构；所述解析模块包括：第一确定模块，用于确定所述目标页面中的页面元素；处理模块，用于基于所述页面元素确定所述页面元素之间的文档对象模型结构，将该文档对象模型结构作为所述可视化逻辑结构；

所述装置还用于在得到所述文档对象模型结构之后，调用JS解析引擎对所述文档对象模型结构进行解析，并将解析结果反馈给所述文档对象模型结构，以对所述文档对象模型结构进行更新；

所述装置还用于在对所述帧图像采用流媒体协议进行封装之后，基于所述流媒体数据的发送端设备的状态信息，确定所述发送端设备的最大允许帧率和最大允许分辨率；基于所述最大允许帧率和所述最大允许分辨率分别对所述目标页面对应的帧率和分辨率进行调整，其中，所述发送端设备的状态信息至少包括所述发送端设备的负载状况。

9.一种存储介质，其特征在于，所述存储介质包括存储的程序，其中，在所述程序在被处理器执行时，使得所述处理器执行权利要求1至7中任意一项所述的流媒体数据的确定方法。

10.一种流媒体数据的确定系统，其特征在于，包括：

处理器；以及

存储器，与所述处理器连接，用于为所述处理器提供处理以下处理步骤的指令：

获取目标页面中页面元素的可视化信息；对所述可视化信息进行渲染，得到帧图像；对所述帧图像采用流媒体协议进行封装，得到流媒体数据；

所述处理器还用于在对所述帧图像进行封装之前，对所述帧图像进行编码；所述可视化信息包括：可视化逻辑结构；所述处理器还用于确定所述目标页面中的页面元素；基于所述页面元素确定所述页面元素之间的文档对象模型结构，将该文档对象模型结构作为所述可视化逻辑结构；

所述处理器还用于在得到所述文档对象模型结构之后，调用JS解析引擎对所述文档对象模型结构进行解析，并将解析结果反馈给所述文档对象模型结构，以对所述文档对象模型结构进行更新；

所述处理器还用于在对所述帧图像采用流媒体协议进行封装之后，基于所述流媒体数据的发送端设备的状态信息，确定所述发送端设备的最大允许帧率和最大允许分辨率；基于所述最大允许帧率和所述最大允许分辨率分别对所述目标页面对应的帧率和分辨率进行调整，其中，所述发送端设备的状态信息至少包括所述发送端设备的负载状况。

Images