视频显示方法、装置、电子设备和存储介质

技术领域

本申请涉及计算机技术领域，具体而言，涉及一种视频显示方法、装置、电子设备和存储介质。

背景技术

在现有技术中，监控相机输出的实时视频流在经过算法推理后产生的推理结果的展示通常需要经过服务器编码处理后形成新的视频流输出才能在浏览器上显示。然而，这种编码过程需要耗费大量时间，导致视频画面做不到可接受的实时，也会耗费大量计算资源。另一方面，这也导致一台服务器能处理的监控路数大量减少，性价比降低，并且可能导致视频质量的损失。

发明内容

本申请实施例的目的在于提供一种视频显示方法、装置、电子设备和存储介质，用以在不需要服务器对视频数据和结构化数据进行编码处理以新的视频流的前提下，使浏览器能够显示监控设备的视频数据和结构化数据。与现有技术相比，本申请能够避免因服务器编码导致耗费大量时间，同时，可降低服务器的计算资源的消耗，使服务器能够处理更多的监控路数，并降低视频质量的损失。

第一方面，本发明提供一种视频显示方法，所述方法应用于浏览器，所述方法包括：

基于WebRTC框架接收服务器发送的视频数据，其中，所述视频数据由实时监控设备产生，所述实时监控设备将所述视频数据发送至所述服务器；

基于WebSocket协议接收所述服务器发送的结构化数据，其中，所述结构化数据为所述服务器基于视频算法处理所述视频数据得到的处理结果；

基于所述视频数据生成视频画面；

将所述结构化数据绘制在所述视频画面中。

本申请第一方面能够基于WebRTC框架接收服务器发送的视频数据，其中，所述视频数据由实时监控设备产生，所述实时监控设备将所述视频数据发送至所述服务器，和能够基于WebSocket协议接收所述服务器发送的结构化数据，其中，所述结构化数据为所述服务器基于视频算法处理所述视频数据得到的处理结果，进而能够基于所述视频数据生成视频画面和将所述结构化数据绘制在所述视频画面中，这样一来，浏览器能够显示监控设备的视频数据和结构化数据。

与现有技术相比，本申请采用浏览器将结构化数据绘制在所述视频画面中，而不需要先通过服务器编码结构化和视频数据以形成新的视频流，进而，避免了服务器为了编码而耗费大量时间和计算资源，从而能够使结构化数据和视频数据及时发送给浏览器，提高浏览器显示结构化数据和视频数据的实时性。另一方面，通过避免服务器为了编码而耗费大量时间和计算资源，可使服务器能够处理更多的监控路数，并降低视频质量的损失。

在可选的实施方式中，所述将所述结构化数据绘制在所述视频画面中，包括：

获取配置文件，并从所述配置文件中读取所述结构化数据的显示样式参数；

基于所述结构化数据的显示样式参数将所述结构化数据绘制在所述视频画面中。

本可选的实施方式通过获取配置文件，并从所述配置文件中读取所述结构化数据的显示样式参数，进而能够基于所述结构化数据的显示样式参数将所述结构化数据绘制在所述视频画面中。

在可选的实施方式中，所述视频算法包括人物识别算法。

本可选的实施方式通过人物识别算法能够识别视频数据中的行人目标。

在可选的实施方式中，所述结构化数据包括基于所述人物识别算法处理所述视频数据得到的行人识别结果。

在可选的实施方式中，所述显示样式参数包括行人显示样式参数，所述行人显示样式参数表征使用红色将所述行人识别结果绘制在所述视频画面中。

本可选的实施方式通过行人显示样式参数，能够使用红色将所述行人识别结果绘制在所述视频画面中。

在可选的实施方式中，所述基于所述视频数据生成视频画面，包括：

将所述视频数据转换为预设格式的视频流，并基于所述预设格式的视频流生成所述视频画面，其中，所述预设格式为所述浏览器处理视频流采用的数据格式。

本可选的实施方式，能够将所述视频数据转换为预设格式的视频流，并基于所述预设格式的视频流生成所述视频画面，其中，所述预设格式为所述浏览器处理视频流采用的数据格式。

第二方面，本发明提供一种视频显示装置，所述装置应用于浏览器，所述装置包括：

第一接收模块，用于基于WebRTC框架接收服务器发送的视频数据，其中，所述视频数据由实时监控设备产生，所述实时监控设备将所述视频数据发送至所述服务器；

第二接收模块，用于基于WebSocket协议接收所述服务器发送的结构化数据，其中，所述结构化数据为所述服务器基于视频算法处理所述视频数据得到的处理结果；

生成模块，用于基于所述视频数据生成视频画面；

绘制模块，用于将所述结构化数据绘制在所述视频画面中。

本申请第二方面的装置通过执行视频显示方法，能够基于WebRTC框架接收服务器发送的视频数据，其中，所述视频数据由实时监控设备产生，所述实时监控设备将所述视频数据发送至所述服务器，和能够基于WebSocket协议接收所述服务器发送的结构化数据，其中，所述结构化数据为所述服务器基于视频算法处理所述视频数据得到的处理结果，进而能够基于所述视频数据生成视频画面和将所述结构化数据绘制在所述视频画面中，这样一来，浏览器能够显示监控设备的视频数据和结构化数据。

与现有技术相比，本申请采用浏览器将结构化数据绘制在所述视频画面中，而不需要先通过服务器编码结构化和视频数据以形成新的视频流，进而，避免了服务器为了编码而耗费大量时间和计算资源，从而能够使结构化数据和视频数据及时发送给浏览器，提高浏览器显示结构化数据和视频数据的实时性。另一方面，通过避免服务器为了编码而耗费大量时间和计算资源，可使服务器能够处理更多的监控路数，并降低视频质量的损失。

在可选的实施方式中，所述绘制模块执行所述将所述结构化数据绘制在所述视频画面中的具体方式为：

获取配置文件，并从所述配置文件中读取所述结构化数据的显示样式参数；

基于所述结构化数据的显示样式参数将所述结构化数据绘制在所述视频画面中。

本可选的实施方式通过获取配置文件，并从所述配置文件中读取所述结构化数据的显示样式参数，进而能够基于所述结构化数据的显示样式参数将所述结构化数据绘制在所述视频画面中。

第三方面，本发明提供一种电子设备，包括：

处理器；以及

存储器，配置用于存储机器可读指令，所述指令在由所述处理器执行时，执行如前述实施方式任一项所述的视频显示方法。

本申请第三方面的电子设备通过执行视频显示方法，能够基于WebRTC框架接收服务器发送的视频数据，其中，所述视频数据由实时监控设备产生，所述实时监控设备将所述视频数据发送至所述服务器，和能够基于WebSocket协议接收所述服务器发送的结构化数据，其中，所述结构化数据为所述服务器基于视频算法处理所述视频数据得到的处理结果，进而能够基于所述视频数据生成视频画面和将所述结构化数据绘制在所述视频画面中，这样一来，浏览器能够显示监控设备的视频数据和结构化数据。

与现有技术相比，本申请采用浏览器将结构化数据绘制在所述视频画面中，而不需要先通过服务器编码结构化和视频数据以形成新的视频流，进而，避免了服务器为了编码而耗费大量时间和计算资源，从而能够使结构化数据和视频数据及时发送给浏览器，提高浏览器显示结构化数据和视频数据的实时性。另一方面，通过避免服务器为了编码而耗费大量时间和计算资源，可使服务器能够处理更多的监控路数，并降低视频质量的损失。

第四方面，本发明提供一种存储介质，所述存储介质存储有计算机程序，所述计算机程序被处理器执行如前述实施方式任一项所述的视频显示方法。

本申请第四方面的存储介质通过执行视频显示方法，能够基于WebRTC框架接收服务器发送的视频数据，其中，所述视频数据由实时监控设备产生，所述实时监控设备将所述视频数据发送至所述服务器，和能够基于WebSocket协议接收所述服务器发送的结构化数据，其中，所述结构化数据为所述服务器基于视频算法处理所述视频数据得到的处理结果，进而能够基于所述视频数据生成视频画面和将所述结构化数据绘制在所述视频画面中，这样一来，浏览器能够显示监控设备的视频数据和结构化数据。

与现有技术相比，本申请采用浏览器将结构化数据绘制在所述视频画面中，而不需要先通过服务器编码结构化和视频数据以形成新的视频流，进而，避免了服务器为了编码而耗费大量时间和计算资源，从而能够使结构化数据和视频数据及时发送给浏览器，提高浏览器显示结构化数据和视频数据的实时性。另一方面，通过避免服务器为了编码而耗费大量时间和计算资源，可使服务器能够处理更多的监控路数，并降低视频质量的损失。

附图说明

为了更清楚地说明本申请实施例的技术方案，下面将对本申请实施例中所需要使用的附图作简单地介绍，应当理解，以下附图仅示出了本申请的某些实施例，因此不应被看作是对范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。

图1是本申请实施例公开的一种视频显示方法的流程示意图；

图2是本申请实施例公开的一种视频显示装置的结构示意图；

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

具体实施方式

下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行描述。

实施例一

请参阅图1，图1是本申请实施例公开的一种视频显示方法的流程示意图，其中，该方法应用于浏览器。如图1所示，本申请实施例的方法包括以下步骤：

101、基于WebRTC框架接收服务器发送的视频数据，其中，视频数据由实时监控设备产生，实时监控设备将视频数据发送至服务器；

102、基于WebSocket协议接收服务器发送的结构化数据，其中，结构化数据为服务器基于视频算法处理视频数据得到的处理结果；

103、基于视频数据生成视频画面；

104、将结构化数据绘制在视频画面中。

本申请实施例能够基于WebRTC框架接收服务器发送的视频数据，其中，视频数据由实时监控设备产生，实时监控设备将视频数据发送至服务器，和能够基于WebSocket协议接收服务器发送的结构化数据，其中，结构化数据为服务器基于视频算法处理视频数据得到的处理结果，进而能够基于视频数据生成视频画面和将结构化数据绘制在视频画面中，这样一来，浏览器能够显示监控设备的视频数据和结构化数据。

与现有技术相比，本申请实施例采用浏览器将结构化数据绘制在视频画面中，而不需要先通过服务器编码结构化和视频数据以形成新的视频流，进而，避免了服务器为了编码而耗费大量时间和计算资源，从而能够使结构化数据和视频数据及时发送给浏览器，提高浏览器显示结构化数据和视频数据的实时性。另一方面，通过避免服务器为了编码而耗费大量时间和计算资源，可使服务器能够处理更多的监控路数，并降低视频质量的损失。

在本申请实施例中，作为一种示例，对于现有技术而言，假设服务器获取到监控设备的原始视频数据，服务器需要先识别原始视频数据以得到结构化数据，并将结构化数据编码到原始视频数据中，且需要等到所有的原始视频数据都编码完成后才将编码得到的新视频流发送给浏览器，这样一来，如果数据量，则编码的时间会很长，例如需要20s，进而浏览器需要在20s后才能显示视频，另一方面，编码会占用服务器的计算资源，使服务器处理其他路数的数据能力降低和使服务器处理的质量降低。针对现有技术的缺点，本申请通过浏览器直接将结构化数据绘制在视频画面，这样一来，不需要通过服务器将结构化数据编码到原始视频数据中，从而省略了编码过程，使浏览器不需要在等待编码完成后才能显示，进而提高了视频显示的实时性。另一方面，通过省略编码过程，避免了因编码占用服务器的计算资源，进而可使服务器能够处理更多的监控路数，并降低视频质量的损失。

在本申请实施例中，浏览器可以是UC浏览器、谷歌浏览器等浏览器，对此本申请实施例不作限定。

在本申请实施例中，服务器与监控设备通信连接，进而能够获取监控设备产生的视频数据，同时，服务器与浏览器通信连接，进而能够与浏览器进行数据交互。需要说明的是，为基于WebRTC框架和WebSocket协议与浏览器进行数据交互，服务器上预先安装有WebRTC框架和WebSocket协议。

在本申请实施例中，WebRTC(Web Real-Time Communications)框架是一种支持网页浏览器进行实时语音对话或视频对话的技术，其中，该框架提供了API，通过调用API能够实现服务器与浏览器之间的视频数据的传输。需要说明的是，关于WebRTC框架具体如何实现服务器与浏览器之间的视频数据的传输，请参阅现有技术，本申请实施例对此不作赘述。

在本申请实施例中，WebSocket协议是一种全双工通讯协议，由HTML5定义，其可以在单个TCP连接上进行全双工通信12。WebSocket协议使得浏览器与服务器之间的数据交换变得更加简单，不需要经过HTTP协议的请求和响应过程，而是以二进制或者文本的形式在WebSocket通道中直接发送/接收数据。需要说明的是，关于WebSocket协议的具体通信机制，请参阅现有技术，本申请实施例对此不作限定。

在本申请实施例中，服务器发送的视频数据是指原始视频数据，即监控设备产生的原始视频数据，其中，监控设备可以是摄像头等设备。

在本申请实施例中，浏览器可基于渲染引擎渲染视频数据，从而生成视频画面。

在本申请实施例中，作为一种可选的实施方式，步骤：将结构化数据绘制在视频画面中，包括以下子步骤：

获取配置文件，并从配置文件中读取结构化数据的显示样式参数；

基于结构化数据的显示样式参数将结构化数据绘制在视频画面中。

本可选的实施方式通过获取配置文件，并从配置文件中读取结构化数据的显示样式参数，进而能够基于结构化数据的显示样式参数将结构化数据绘制在视频画面中。

针对上述可选的实施方式，配置文件可预先存在浏览器中的缓存中，从而可从浏览器的缓存中读取配置文件。

在本申请实施例中，作为一种可选的实施方式，视频算法包括人物识别算法，进而通过人物识别算法能够识别视频数据中的行人目标。相应地，结构化数据包括基于人物识别算法处理视频数据得到的行人识别结果。进一步地，显示样式参数包括行人显示样式参数，行人显示样式参数表征使用红色将行人识别结果绘制在视频画面中，从而通过行人显示样式参数，能够使用红色将行人识别结果绘制在视频画面中。

在本申请实施例中，作为一种可选的实施方式，视频算法包括车辆识别算法，进而通过车辆识别算法能够识别视频数据中的车辆目标。相应地，结构化数据包括基于车辆识别算法处理视频数据得到的车辆识别结果。进一步地，显示样式参数包括车辆显示样式参数，车辆显示样式参数表征使用蓝色将车辆识别结果绘制在视频画面中，从而通过车辆显示样式参数，能够使用红色将车辆识别结果绘制在视频画面中。

需要说明的是，视频算法还可以包括其他目标检测算法，对此本申请实施例不作限定。

在本申请实施例中，作为一种可选的实施方式，步骤：基于视频数据生成视频画面，包括以下子步骤：

将视频数据转换为预设格式的视频流，并基于预设格式的视频流生成视频画面，其中，预设格式为浏览器处理视频流采用的数据格式。

本可选的实施方式，能够将视频数据转换为预设格式的视频流，并基于预设格式的视频流生成视频画面，其中，预设格式为浏览器处理视频流采用的数据格式。

针对上述可选的实施方式，预设格式基于浏览器支持的视频格式确定。

实施例二

请参阅图2，图2是本申请实施例公开的一种视频显示装置的结构示意图，其中，该装置应用于浏览器。如图2所示，本申请实施例的装置包括以下功能模块：

第一接收模块201，用于基于WebRTC框架接收服务器发送的视频数据，其中，视频数据由实时监控设备产生，实时监控设备将视频数据发送至服务器；

第二接收模块202，用于基于WebSocket协议接收服务器发送的结构化数据，其中，结构化数据为服务器基于视频算法处理视频数据得到的处理结果；

生成模块203，用于基于视频数据生成视频画面；

绘制模块204，用于将结构化数据绘制在视频画面中。

本申请实施例的装置通过执行视频显示方法，能够基于WebRTC框架接收服务器发送的视频数据，其中，视频数据由实时监控设备产生，实时监控设备将视频数据发送至服务器，和能够基于WebSocket协议接收服务器发送的结构化数据，其中，结构化数据为服务器基于视频算法处理视频数据得到的处理结果，进而能够基于视频数据生成视频画面和将结构化数据绘制在视频画面中，这样一来，浏览器能够显示监控设备的视频数据和结构化数据。

与现有技术相比，本申请实施例采用浏览器将结构化数据绘制在视频画面中，而不需要先通过服务器编码结构化和视频数据以形成新的视频流，进而，避免了服务器为了编码而耗费大量时间和计算资源，从而能够使结构化数据和视频数据及时发送给浏览器，提高浏览器显示结构化数据和视频数据的实时性。另一方面，通过避免服务器为了编码而耗费大量时间和计算资源，可使服务器能够处理更多的监控路数，并降低视频质量的损失。

在可选的实施方式中，绘制模块204执行将结构化数据绘制在视频画面中的具体方式为：

获取配置文件，并从配置文件中读取结构化数据的显示样式参数；

基于结构化数据的显示样式参数将结构化数据绘制在视频画面中。

本可选的实施方式通过获取配置文件，并从配置文件中读取结构化数据的显示样式参数，进而能够基于结构化数据的显示样式参数将结构化数据绘制在视频画面中。

实施例三

请参阅图3，图3是本申请实施例公开的一种电子设备的结构示意图，如图3所示，本申请实施例的电子设备包括：

处理器301；以及

存储器302，配置用于存储机器可读指令，指令在由处理器执行时，执行如前述实施方式任一项的视频显示方法。

本申请实施例的电子设备通过执行视频显示方法，能够基于WebRTC框架接收服务器发送的视频数据，其中，视频数据由实时监控设备产生，实时监控设备将视频数据发送至服务器，和能够基于WebSocket协议接收服务器发送的结构化数据，其中，结构化数据为服务器基于视频算法处理视频数据得到的处理结果，进而能够基于视频数据生成视频画面和将结构化数据绘制在视频画面中，这样一来，浏览器能够显示监控设备的视频数据和结构化数据。

与现有技术相比，本申请实施例采用浏览器将结构化数据绘制在视频画面中，而不需要先通过服务器编码结构化和视频数据以形成新的视频流，进而，避免了服务器为了编码而耗费大量时间和计算资源，从而能够使结构化数据和视频数据及时发送给浏览器，提高浏览器显示结构化数据和视频数据的实时性。另一方面，通过避免服务器为了编码而耗费大量时间和计算资源，可使服务器能够处理更多的监控路数，并降低视频质量的损失。

实施例四

本申请实施例提供一种存储介质，存储介质存储有计算机程序，计算机程序被处理器执行如前述实施方式任一项的视频显示方法。

本申请实施例的存储介质通过执行视频显示方法，能够基于WebRTC框架接收服务器发送的视频数据，其中，视频数据由实时监控设备产生，实时监控设备将视频数据发送至服务器，和能够基于WebSocket协议接收服务器发送的结构化数据，其中，结构化数据为服务器基于视频算法处理视频数据得到的处理结果，进而能够基于视频数据生成视频画面和将结构化数据绘制在视频画面中，这样一来，浏览器能够显示监控设备的视频数据和结构化数据。

与现有技术相比，本申请实施例采用浏览器将结构化数据绘制在视频画面中，而不需要先通过服务器编码结构化和视频数据以形成新的视频流，进而，避免了服务器为了编码而耗费大量时间和计算资源，从而能够使结构化数据和视频数据及时发送给浏览器，提高浏览器显示结构化数据和视频数据的实时性。另一方面，通过避免服务器为了编码而耗费大量时间和计算资源，可使服务器能够处理更多的监控路数，并降低视频质量的损失。

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

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

再者，在本申请各个实施例中的各功能模块可以集成在一起形成一个独立的部分，也可以是各个模块单独存在，也可以两个或两个以上模块集成形成一个独立的部分。

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

在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。

以上仅为本申请的实施例而已，并不用于限制本申请的保护范围，对于本领域的技术人员来说，本申请可以有各种更改和变化。凡在本申请的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本申请的保护范围之内。