CN117675780A - 一种云端实时h5流式渲染的方法和系统 - Google Patents

Abstract

一种云端实时H5流式渲染的方法和系统，当H5流式渲染服务器收到H5流请求消息时，包括有：H5流式渲染服务器从H5流请求消息中提取请求访问的H5页面URL和视频流推送地址URL；H5流式渲染服务器获取一个虚拟屏幕，启动浏览器及其驱动，并指示浏览器根据请求访问的H5页面URL下载并完成对应H5页面的渲染，然后将渲染后的H5页面输出到虚拟屏幕的帧缓冲区中，再从帧缓冲区中将H5页面数据编码生成视频文件或视频流，最后将生成的视频文件或视频流推送至视频流推送地址URL。本发明涉及通信网络领域，能满足用户对于实时可视化展示和交互的需求，解决当前手机终端在通话中不支持Web展示的问题。

Description

一种云端实时H5流式渲染的方法和系统

技术领域

本发明涉及一种云端实时H5流式渲染的方法和系统，涉及通信网络领域。

背景技术

在当前基于IMS网络的通话过程中，用户手机终端通常不支持直接展示H5页面内容，而只能通过DTMF按键进行简单的交互操作，这限制了用户在通话中获取实时信息、共享数据和进行更复杂的可视化交互的能力。然而，对于一些应用场景，如客户服务、在线教育、远程协作等，可视化内容和交互是至关重要的。传统的通话方式无法满足用户对于实时可视化展示和交互的需求，需要一种新的解决方案来克服这一限制。

因此，如何满足用户对于实时可视化展示和交互的需求，解决当前手机终端在通话中不支持Web展示的问题，已成为技术人员重点关注的技术问题。

发明内容

有鉴于此，本发明的目的是提供一种云端实时H5流式渲染的方法和系统，能满足用户对于实时可视化展示和交互的需求，解决当前手机终端在通话中不支持Web展示的问题。

为了达到上述目的，本发明提供了一种云端实时H5流式渲染的方法，当H5流式渲染服务器收到H5流请求消息时，包括有：

步骤一、H5流式渲染服务器从H5流请求消息中提取请求访问的H5页面URL和视频流推送地址URL；

步骤二、H5流式渲染服务器获取一个虚拟屏幕，启动浏览器及其驱动，并指示浏览器根据请求访问的H5页面URL下载并完成对应H5页面的渲染，然后将渲染后的H5页面输出到虚拟屏幕的帧缓冲区中，再从帧缓冲区中将H5页面数据编码生成视频文件或视频流，最后将生成的视频文件或视频流推送至视频流推送地址URL。

为了达到上述目的，本发明还提供了一种云端实时H5流式渲染的系统，包括有：

H5流式渲染服务器，用于从接收到的H5流请求消息中提取请求访问的H5页面URL和视频流推送地址URL，获取一个虚拟屏幕，启动浏览器及其驱动，并指示浏览器根据请求访问的H5页面URL下载并完成对应H5页面的渲染，然后将渲染后的H5页面输出到虚拟屏幕的帧缓冲区中，再从帧缓冲区中将H5页面数据编码生成视频文件或视频流，最后将生成的视频文件或视频流推送至视频流推送地址URL。

与现有技术相比，本发明的有益效果是：本发明通过云端实时的H5流式渲染技术，将渲染后的H5页面流实时编码成适用于VoLTE/VoNR视频通话的视频流，这样视频流可以通过云端实时传输到手机终端，解决了当前手机终端在通话中不支持Web展示的问题，为用户提供了实时的可视化体验和交互功能；本发明将动态的H5页面在云端实时渲染成指定编码格式和分辨率的视频流，实时渲染具备高刷新率、高分辨率的展示效果，支持主流的视频编码格式，支持高效能的渲染计算所需的算力分配与调度，支持低处理时延，提高渲染效率和响应速度。

附图说明

图1是本发明第一实施例提出的一种云端实时H5流式渲染的方法的流程图。

图2是本发明第二实施例提出的一种云端实时H5流式渲染的系统的结构示意图。

具体实施方式

为使本发明的目的、技术方案和优点更加清楚，下面结合附图对本发明作进一步的详细描述。

图1是本发明第一实施例提出的一种云端实时H5流式渲染的方法的流程图。如图1所示，当H5流式渲染服务器收到H5流请求消息时，包括有：

步骤一、H5流式渲染服务器从H5流请求消息中提取请求访问的H5页面URL和视频流推送地址URL；

步骤二、H5流式渲染服务器获取一个虚拟屏幕，启动浏览器及其驱动，并指示浏览器根据请求访问的H5页面URL下载并完成对应H5页面的渲染，然后将渲染后的H5页面输出到虚拟屏幕的帧缓冲区中，再从帧缓冲区中将H5页面数据编码生成视频文件或视频流，最后将生成的视频文件或视频流推送至视频流推送地址URL。

由于在当前基于IMS网络的通话过程中，用户手机终端通常不支持直接展示H5页面内容，而只能通过DTMF按键进行简单的交互操作，这限制了用户在通话中获取实时信息、共享数据和进行更复杂的可视化交互的能力。在一种可能的实施例中，本发明中H5流请求消息的发送方可以是客户服务、在线教育、远程协作等业务平台。对于一些应用场景，如客户服务、在线教育、远程协作等，可视化内容和交互是至关重要的，传统的通话方式无法满足用户对于实时可视化展示和交互的需求，因此，客户服务、在线教育、远程协作等业务平台发出H5流请求消息后，H5流式渲染服务器将生成的视频文件或视频流推送至视频流推送地址URL，业务平台再通过和用户手机终端之间的视频通话通道，将H5页面对应的视频文件或视频流推送给用户手机终端。

本发明可以预先由虚拟显示服务器启动多个虚拟屏幕，并根据需要，还可以将大分辨率的虚拟屏幕分为多个小分辨率的虚拟屏幕，并为每个虚拟屏幕设置一个编码ID，每一个编码ID对应唯一的一个虚拟屏幕及其参数信息，由所有编码ID和虚拟屏幕分别构成编码池和虚拟屏幕池，步骤二中，H5流式渲染服务器获取一个虚拟屏幕，可以进一步包括有：

从编码池中获取一个编码ID，从而获得对应的虚拟屏幕，

当步骤二完成后，还包括有：关闭浏览器及其驱动，并释放编码ID和虚拟屏幕到资源池中。

虚拟显示服务器可以启动虚拟屏幕，并设置屏幕大小、环境变量和显示端口，其原理是创建一个虚拟的内存空间，模拟出一个完整的显示环境，将图形界面操作转换为对应的内存操作，将每一帧的显示情况存储在内存的帧缓冲区中，其他应用程序可以随时从帧缓冲区中获取图像数据，从而实现对画面的捕捉和录制。虚拟屏幕的分辨率可以在创建时进行设置，最高可设置为7680*4320，因此还可以将其拆分为6*6个1080*720分辨率的小屏幕，同样也可以设置1080p等多种分辨率的小屏幕，并将每个小屏幕作为一个虚拟屏幕进行分配使用。

步骤二可以进一步包括有：

步骤21、根据编码ID获得对应虚拟屏幕的端口、以及浏览器及其驱动的启动端口，启动浏览器及其驱动，并设置虚拟屏幕的环境变量，然后建立浏览器驱动和浏览器的会话，浏览器驱动向浏览器发出导航命令，并提供请求访问的H5页面URL，浏览器根据请求访问的H5页面URL，下载并解析相应的H5页面资源，对H5页面进行渲染；

步骤22、将H5页面渲染后的图形输出绘制到虚拟屏幕的帧缓冲区中，然后将虚拟屏幕的帧缓冲区中的页面数据编码成视频文件或视频流，并将生成的视频文件或视频流推送至视频流推送地址URL。其原理是将虚拟屏幕存储在内存的图像数据转为帧数据，然后利用编解码器对其进行编码压缩后得到视频文件或视频流。

本发明还可以包括有负载均衡器，负载均衡器维护一个服务列表，所述服务列表由若干个流录制器构成，包括有：

负载均衡器根据H5流请求消息中的虚拟屏幕分辨率，确定负载动态值w，然后从服务列表中所有流录制器的负载值中挑选最小值，将H5流请求消息转发给最小值对应的流录制器，即由最小值对应的流录制器完成步骤二，并更新所挑选的流录制器的负载值：f^‘＝f+w，其中，f、f^‘分别是所挑选的流录制器更新前、更新后的负载值，流录制器的负载值可以初始化为0，w可以根据H5流请求消息中的虚拟屏幕分辨率来设置，例如当虚拟屏幕分辨率是720p时，w是1；当虚拟屏幕分辨率是1080p时，w是2.25；当虚拟屏幕分辨率是4k时，w是4，

当流录制器完成步骤二后，向负载均衡器返回响应消息，还包括有：

负载均衡器根据流录制器已执行完的H5流请求消息中的虚拟屏幕分辨率，确定负载动态值w，并调整该流录制器的负载值：f^‘’＝f^‘-w，其中，f^‘、f^‘’分别是流录制器调整前、后的负载值。

图2是本发明第二实施例提出的一种云端实时H5流式渲染的系统的结构示意图。如图2所示，本发明一种云端实时H5流式渲染的系统包括有H5流式渲染服务器，其中：

H5流式渲染服务器，用于从接收到的H5流请求消息中提取请求访问的H5页面URL和视频流推送地址URL，获取一个虚拟屏幕，启动浏览器及其驱动，并指示浏览器根据请求访问的H5页面URL下载并完成对应H5页面的渲染，然后将渲染后的H5页面输出到虚拟屏幕的帧缓冲区中，再从帧缓冲区中将H5页面数据编码生成视频文件或视频流，最后将生成的视频文件或视频流推送至视频流推送地址URL。

在一种可能的实施例中，本发明中H5流请求消息的发送方可以是客户服务、在线教育、远程协作等业务平台。客户服务、在线教育、远程协作等业务平台发出H5流请求消息后，H5流式渲染服务器将生成的视频文件或视频流推送至视频流推送地址URL，业务平台再通过和用户手机终端之间的视频通话通道，将H5页面对应的视频文件或视频流推送给用户手机终端。

H5流式渲染服务器进一步包括有：

虚拟显示服务器，用于启动多个虚拟屏幕，并为每个虚拟屏幕设置一个编码ID，由所有编码ID和虚拟屏幕分别构成编码池和虚拟屏幕池；虚拟显示服务器还可以将大分辨率的虚拟屏幕分为多个小分辨率的虚拟屏幕；

流录制器，用于根据编码ID获得对应虚拟屏幕的端口、以及浏览器及其驱动的启动端口，启动浏览器及其驱动，并设置虚拟屏幕的环境变量，然后建立浏览器驱动和浏览器的会话，浏览器驱动向浏览器发出导航命令，并提供请求访问的H5页面URL，浏览器根据请求访问的H5页面URL，下载并解析相应的H5页面资源，对H5页面进行渲染，再将H5页面渲染后的图形输出绘制到虚拟屏幕的帧缓冲区中，最后将虚拟屏幕的帧缓冲区中的页面数据编码成视频文件或视频流，并推送至视频流推送地址URL；

负载均衡器，用于维护一个服务列表，所述服务列表由若干个流录制器构成，并将H5流请求消息转发给服务列表中的一个流录制器。

负载均衡器可以进一步包括有：

负载动态值确定装置，用于根据H5流请求消息中的虚拟屏幕分辨率，确定负载动态值w，例如当虚拟屏幕分辨率是720p时，w是1；当虚拟屏幕分辨率是1080p时，w是2.25；当虚拟屏幕分辨率是4k时，w是4；

负载选择装置，从服务列表中所有流录制器的负载值中挑选最小值，然后将H5流请求消息转发给最小值对应的流录制器，并更新所挑选的流录制器的负载值：f^‘＝f+w，其中，f、f^‘分别是所挑选的流录制器更新前、后的负载值，每个流录制器的负载值可以初始化为0；当接收到流录制器返回的响应消息时，调整该流录制器的负载值：f^‘’＝f^‘-w，其中，f^‘、f^‘’分别是流录制器调整前、后的负载值。

以上所述仅为本发明的较佳实施例而已，并不用以限制本发明，凡在本发明的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在本发明保护的范围之内。

Claims (12)

1.一种云端实时H5流式渲染的方法，其特征在于，当H5流式渲染服务器收到H5流请求消息时，包括有：

步骤一、H5流式渲染服务器从H5流请求消息中提取请求访问的H5页面URL和视频流推送地址URL；

步骤二、H5流式渲染服务器获取一个虚拟屏幕，启动浏览器及其驱动，并指示浏览器根据请求访问的H5页面URL下载并完成对应H5页面的渲染，然后将渲染后的H5页面输出到虚拟屏幕的帧缓冲区中，再从帧缓冲区中将H5页面数据编码生成视频文件或视频流，最后将生成的视频文件或视频流推送至视频流推送地址URL。

2.根据权利要求1所述的方法，其特征在于，H5流请求消息的发送方是业务平台，业务平台发出H5流请求消息后，H5流式渲染服务器将生成的视频文件或视频流推送至视频流推送地址URL，业务平台再通过和用户手机终端之间的视频通话通道，将H5页面对应的视频文件或视频流推送给用户手机终端。

3.根据权利要求1所述的方法，其特征在于，虚拟显示服务器启动多个虚拟屏幕，并为每个虚拟屏幕设置一个编码ID，由所有编码ID和虚拟屏幕分别构成编码池和虚拟屏幕池，步骤二中，H5流式渲染服务器获取一个虚拟屏幕，进一步包括有：

从编码池中获取一个编码ID，从而获得对应的虚拟屏幕，

当步骤二完成后，还包括有：关闭浏览器及其驱动，并释放编码ID和虚拟屏幕到资源池中。

4.根据权利要求3所述的方法，其特征在于，虚拟显示服务器将大分辨率的虚拟屏幕分为多个小分辨率的虚拟屏幕。

5.根据权利要求1所述的方法，其特征在于，步骤二进一步包括有：

步骤21、根据编码ID获得对应虚拟屏幕的端口、以及浏览器及其驱动的启动端口，启动浏览器及其驱动，并设置虚拟屏幕的环境变量，然后建立浏览器驱动和浏览器的会话，浏览器驱动向浏览器发出导航命令，并提供请求访问的H5页面URL，浏览器根据请求访问的H5页面URL，下载并解析相应的H5页面资源，对H5页面进行渲染；

步骤22、将H5页面渲染后的图形输出绘制到虚拟屏幕的帧缓冲区中，然后将虚拟屏幕的帧缓冲区中的页面数据编码成视频文件或视频流，并将生成的视频文件或视频流推送至视频流推送地址URL。

6.根据权利要求1所述的方法，其特征在于，还包括有负载均衡器，负载均衡器维护一个服务列表，所述服务列表由若干个流录制器构成，包括有：

负载均衡器根据H5流请求消息中的虚拟屏幕分辨率，确定负载动态值w，然后从服务列表中所有流录制器的负载值中挑选最小值，将H5流请求消息转发给最小值对应的流录制器，即由最小值对应的流录制器完成步骤二，并更新所挑选的流录制器的负载值：f^‘＝f+w，其中，f、f^‘分别是所挑选的流录制器更新前、后的负载值，w根据H5流请求消息中的虚拟屏幕分辨率来设置，

当流录制器完成步骤二后，向负载均衡器返回响应消息，还包括有：

负载均衡器根据流录制器已执行完的H5流请求消息中的虚拟屏幕分辨率，确定负载动态值w，并调整该流录制器的负载值：f^‘’＝f^‘-w，其中，f^‘、f^‘’分别是流录制器调整前、后的负载值。

7.一种云端实时H5流式渲染的系统，其特征在于，包括有：

H5流式渲染服务器，用于从接收到的H5流请求消息中提取请求访问的H5页面URL和视频流推送地址URL，获取一个虚拟屏幕，启动浏览器及其驱动，并指示浏览器根据请求访问的H5页面URL下载并完成对应H5页面的渲染，然后将渲染后的H5页面输出到虚拟屏幕的帧缓冲区中，再从帧缓冲区中将H5页面数据编码生成视频文件或视频流，最后将生成的视频文件或视频流推送至视频流推送地址URL。

8.根据权利要求7所述的系统，其特征在于，H5流请求消息的发送方是业务平台，业务平台发出H5流请求消息后，H5流式渲染服务器将生成的视频文件或视频流推送至视频流推送地址URL，业务平台再通过和用户手机终端之间的视频通话通道，将H5页面对应的视频文件或视频流推送给用户手机终端。

9.根据权利要求7所述的系统，其特征在于，H5流式渲染服务器包括有：

虚拟显示服务器，用于启动多个虚拟屏幕，并为每个虚拟屏幕设置一个编码ID，由所有编码ID和虚拟屏幕分别构成编码池和虚拟屏幕池。

10.根据权利要求9所述的系统，其特征在于，虚拟显示服务器将大分辨率的虚拟屏幕分为多个小分辨率的虚拟屏幕。

11.根据权利要求7所述的系统，其特征在于，H5流式渲染服务器包括有：

流录制器，用于根据编码ID获得对应虚拟屏幕的端口、以及浏览器及其驱动的启动端口，启动浏览器及其驱动，并设置虚拟屏幕的环境变量，然后建立浏览器驱动和浏览器的会话，浏览器驱动向浏览器发出导航命令，并提供请求访问的H5页面URL，浏览器根据请求访问的H5页面URL，下载并解析相应的H5页面资源，对H5页面进行渲染，再将H5页面渲染后的图形输出绘制到虚拟屏幕的帧缓冲区中，最后将虚拟屏幕的帧缓冲区中的页面数据编码成视频文件或视频流，并推送至视频流推送地址URL。

12.根据权利要求7所述的系统，其特征在于，H5流式渲染服务器包括有：

负载均衡器，用于维护一个服务列表，所述服务列表由若干个流录制器构成，并将H5流请求消息转发给服务列表中的一个流录制器，

负载均衡器进一步包括有：

负载动态值确定装置，用于根据H5流请求消息中的虚拟屏幕分辨率，确定负载动态值w；

负载选择装置，从服务列表中所有流录制器的负载值中挑选最小值，然后将H5流请求消息转发给最小值对应的流录制器，并更新所挑选的流录制器的负载值：f^‘＝f+w，其中，f、f^‘分别是所挑选的流录制器更新前、后的负载值；当接收到流录制器返回的响应消息时，调整该流录制器的负载值：f^‘’＝f^‘-w，其中，f、f^‘分别是流录制器调整前、后的负载值。