一种动环系统低延迟视频监控图像显示方法及系统

技术领域

本申请涉及动环系统低延迟视频监控图像显示技术领域，特别是涉及一种动环系统低延迟视频监控图像显示方法及系统。

背景技术

视频监控在目前国内的日常生活中，几乎处处可见，在国内的众多行业都发挥着重要的作用，如今又搭上了互联互通，快速发展的网络信息时代。

目前主流的DICM系统都需要对IDC或末端节点的视频监控系统进行同步监控，故需要在页面进行网络摄像头视频流的同步显示。但是，由于各个厂家的摄像头输出的标准视频流为RTSP格式，无法在浏览器直接解码播放，目前主要的解决方案有以下两种：

(1)、使用浏览器插件，但是由于安全性问题，目前新版本的浏览器全部取消了对此类插件的支持，如果必须使用，就要使用旧版本的浏览器进行访问，会有很严重的安全隐患和系统兼容性问题。

(2)、使用流媒体服务器进行转发，但是流媒体服务器需要一直对视频流进行解码转译，会占用更多的系统资源，且延迟较高，一般都在30秒左右，实时性较差，无法适用于网络监控摄像头的场景。

发明内容

基于此，针对上述技术问题，提供一种动环系统低延迟视频监控图像显示方法及系统，能够解决现有方案中系统兼容性较低、对流媒体服务器的依赖性较强切实时性过低和系统资源占用高等问题。

第一方面，一种动环系统低延迟视频监控图像显示方法，所述方法包括：

浏览器在待显示视频监控界面建立canvas画布区；

响应浏览器的输入，建立与浏览器的数据通道；

实时获取所述视频监控设备输入的视频流数据；

对所述视频流数据进行切片处理，得到所述视频流数据对应的关键帧数据；

将所述关键帧数据按照视频流数据切片顺序生成连续的关键帧图片数据；

将所述关键帧图片数据实时转换为二进制数据，并实时通过所述数据通道发送给浏览器；

所述浏览器根据所述二进制数据在所述canvas画布区实时进行图像绘制，生成绘制图像，并根据所述绘制图像在浏览器待显示视频监控界面实时展示。

上述方案中，可选的，所述响应浏览器的输入，建立与浏览器的数据通道，具体为：接收浏览器发送的建立websocket数据通道请求，并建立与浏览器的websocket数据通道。

上述方案中，进一步可选的，所述视频监控设备输入的视频流数据具体为RTSP视频流数据。

上述方案中，进一步可选的，所述方法还包括：在所述浏览器内待显示视频监控关闭后，所述数据通道关闭，终止相关处理线程。

上述方案中，进一步可选的，所述终止相关处理线程包括：终止发送二进制数据给浏览器、终止获取所述视频监控设备输入的视频流数据和终止对所述视频流数据进行切片处理。

第二方面，一种动环系统低延迟视频监控图像显示系统，所述系统包括：

建立画布区模块：用于浏览器在待显示视频监控界面建立canvas画布区；

后台处理模块：用于响应浏览器的输入，建立与浏览器的数据通道；实时获取所述视频监控设备输入的视频流数据；对所述视频流数据进行切片处理，得到所述视频流数据对应的关键帧数据；将所述关键帧数据按照视频流数据切片顺序生成连续的关键帧图片数据；将所述关键帧图片数据实时转换为二进制数据；

发送模块：用于实时通过所述数据通道发送给浏览器；

显示模块：用于所述浏览器根据所述二进制数据在所述canvas画布区实时进行图像绘制，生成绘制图像，并根据所述绘制图像在浏览器待显示视频监控界面实时展示。

第三方面，一种计算机设备，包括存储器和处理器，所述存储器存储有计算机程序，所述处理器执行所述计算机程序时实现以下步骤：

浏览器在待显示视频监控界面建立canvas画布区；

响应浏览器的输入，建立与浏览器的数据通道；

实时获取所述视频监控设备输入的视频流数据；

对所述视频流数据进行切片处理，得到所述视频流数据对应的关键帧数据；

将所述关键帧数据按照视频流数据切片顺序生成连续的关键帧图片数据；

将所述关键帧图片数据实时转换为二进制数据，并实时通过所述数据通道发送给浏览器；

所述浏览器根据所述二进制数据在所述canvas画布区实时进行图像绘制，生成绘制图像，并根据所述绘制图像在浏览器待显示视频监控界面实时展示。

第四方面，一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现以下步骤：

浏览器在待显示视频监控界面建立canvas画布区；

响应浏览器的输入，建立与浏览器的数据通道；

实时获取所述视频监控设备输入的视频流数据；

对所述视频流数据进行切片处理，得到所述视频流数据对应的关键帧数据；

将所述关键帧数据按照视频流数据切片顺序生成连续的关键帧图片数据；

将所述关键帧图片数据实时转换为二进制数据，并实时通过所述数据通道发送给浏览器；

所述浏览器根据所述二进制数据在所述canvas画布区实时进行图像绘制，生成绘制图像，并根据所述绘制图像在浏览器待显示视频监控界面实时展示。

本发明至少具有以下有益效果：

本发明基于对现有技术问题的进一步分析和研究，认识到现有方案中存在系统兼容性较低、对流媒体服务器的依赖性较强切实时性过低和系统资源占用高等问题，本发明通过浏览器在待显示视频监控界面建立canvas画布区，后台建立与浏览器的数据通道，并实时获取所述视频监控设备输入的视频流数据，对视频流数据进行切片处理，得到所述视频流数据对应的关键帧数据，将所述关键帧数据按照视频流数据切片顺序生成连续的关键帧图片数据，将关键帧图片数据实时转换为二进制数据，并实时通过所述数据通道发送给浏览器。浏览器根据所述二进制数据在所述canvas画布区实时进行图像绘制，生成绘制图像，并根据所述绘制图像在浏览器待显示视频监控界面实时展示。本发明在浏览器页面显示的视频实际上是一张不断更新的canvas画布，并且利用直接对RTSP视频流进行切片、转换，避免了使用流媒体服务器对视频进行转码，这种处理不但延迟低，并且可以按需处理，节省资源并且兼容性好能覆盖主流的浏览器和视频监控设备，

本发明与现有技术相比，无需使用第三方插件，无需限定使用带有安全漏洞的旧版本浏览器，无需使用额外的流媒体服务器，延迟可控制在3秒内，并且兼容任何标准的视频监控设备，并且能自由的将监控视频嵌入到各种综合监控网页中。

附图说明

图1为本发明一个实施例提供的动环系统低延迟视频监控图像显示方法的流程示意图；

图2为本发明一个实施例提供的动环系统低延迟视频监控图像显示方法的具体框架示意图；

图3为一个实施例中计算机设备的内部结构图。

具体实施方式

为了使本申请的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本申请进行进一步详细说明。应当理解，此处描述的具体实施例仅仅用以解释本申请，并不用于限定本申请。

在一个实施例中，如图1所示，提供了一种动环系统低延迟视频监控图像显示方法，包括以下步骤：

浏览器在待显示视频监控界面建立canvas画布区；其中，浏览器在待显示视频监控界面为浏览器web页面。

响应浏览器的输入，建立与浏览器的数据通道；

实时获取所述视频监控设备输入的视频流数据；

对所述视频流数据进行切片处理，得到所述视频流数据对应的关键帧数据；

在一个实施例中，对所述视频流数据进行切片处理是以opencv技术为基础加入了所需处理逻辑用来实现对视频流的切片和转换，并且加入了对切片评率和图像质量的控制，以便适配不同的算力场景。

按设置好的频率截取视频流中的关键帧，然后把它转换为设定好分辨率的图像，再转换为二进制数据流通过websocket传递到页面，页面通过持续接收websocket中的二进制流刷新图像达到类似视频播放的效果。

将所述关键帧数据按照视频流数据切片顺序生成连续的关键帧图片数据；

将所述关键帧图片数据实时转换为二进制数据，并实时通过所述数据通道发送给浏览器；

所述浏览器根据所述二进制数据在所述canvas画布区实时进行图像绘制，生成绘制图像，并根据所述绘制图像在浏览器待显示视频监控界面实时展示。

在一个实施例中，所述响应浏览器的输入，建立与浏览器的数据通道，具体为：接收浏览器发送的建立websocket数据通道请求，并建立与浏览器的websocket数据通道。

在一个实施例中，所述视频监控设备输入的视频流数据具体为RTSP视频流数据。

在一个实施例中，在所述浏览器内待显示视频监控关闭后，所述数据通道关闭，终止相关处理线程。

在一个实施例中，所述终止相关处理线程包括：终止发送二进制数据给浏览器、终止获取所述视频监控设备输入的视频流数据和终止对所述视频流数据进行切片处理。

本实施例通过浏览器在待显示视频监控界面建立canvas画布区，后台建立与浏览器的数据通道，并实时获取所述视频监控设备输入的视频流数据，对视频流数据进行切片处理，得到所述视频流数据对应的关键帧数据，将所述关键帧数据按照视频流数据切片顺序生成连续的关键帧图片数据，将关键帧图片数据实时转换为二进制数据，并实时通过所述数据通道发送给浏览器。浏览器根据所述二进制数据在所述canvas画布区实时进行图像绘制，生成绘制图像，并根据所述绘制图像在浏览器待显示视频监控界面实时展示。本实施例在浏览器页面显示的视频实际上是一张不断更新的canvas画布，并且利用直接对RTSP视频流进行切片、转换，避免了使用流媒体服务器对视频进行转码，这种处理不但延迟低，并且可以按需处理，其中，所述按需处理具体为：可以根据具体情况调整切片的分辨率和频率，以适应不同算力情况下的使用场景。还能够节省资源并且兼容性好能覆盖主流的浏览器和视频监控设备，本实施例与现有技术相比，无需使用第三方插件，无需限定使用带有安全漏洞的旧版本浏览器，无需使用额外的流媒体服务器，延迟可控制在3秒内，并且兼容任何标准的视频监控设备，并且能自由的将监控视频嵌入到各种综合监控网页中。

在一个实施例中，如图2所示，提供了一种动环系统低延迟视频监控图像显示方法的具体框架示意图：具体包括以下步骤：

(1)在需要展示视频监控的web页面建立一个canvas画布区，为显示图像做准备。

(2)页面就绪后，与后端处理进程建立websocket数据通道。

(3)后端进程在捕捉到websocket数据通道建立后，向网络摄像头或硬盘录像机拉取RTSP视频流。

(4)对RTSP视频流进行切片处理，将关键帧转换为连续的图片。

(5)将关键帧图片转换为二进制数据，并通过websocket数据通道推送到浏览器页面，并在canvas画布区对图像进行绘制。

(6)不断推送和重绘图片，以达到连续的图像显示效果，视觉上即为实时视频流显示。

(7)当页面关闭，websocket数据通道随之关闭，后台进程监控到websocket数据通道关闭后终止相关处理线程。

应该理解的是，虽然图1的流程图中的各个步骤按照箭头的指示依次显示，但是这些步骤并不是必然按照箭头指示的顺序依次执行。除非本文中有明确的说明，这些步骤的执行并没有严格的顺序限制，这些步骤可以以其它的顺序执行。而且，图1中的至少一部分步骤可以包括多个步骤或者多个阶段，这些步骤或者阶段并不必然是在同一时刻执行完成，而是可以在不同的时刻执行，这些步骤或者阶段的执行顺序也不必然是依次进行，而是可以与其它步骤或者其它步骤中的步骤或者阶段的至少一部分轮流或者交替地执行。

在一个实施例中，提供了一种动环系统低延迟视频监控图像显示系统，包括以下程序模块：

建立画布区模块：用于浏览器在待显示视频监控界面建立canvas画布区；

后台处理模块：用于响应浏览器的输入，建立与浏览器的数据通道；实时获取所述视频监控设备输入的视频流数据；对所述视频流数据进行切片处理，得到所述视频流数据对应的关键帧数据；将所述关键帧数据按照视频流数据切片顺序生成连续的关键帧图片数据；将所述关键帧图片数据实时转换为二进制数据；

发送模块：用于实时通过所述数据通道发送给浏览器；

显示模块：用于所述浏览器根据所述二进制数据在所述canvas画布区实时进行图像绘制，生成绘制图像，并根据所述绘制图像在浏览器待显示视频监控界面实时展示。

关于动环系统低延迟视频监控图像显示系统的具体限定可以参见上文中对于动环系统低延迟视频监控图像显示方法的限定，在此不再赘述。上述动环系统低延迟视频监控图像显示系统中的各个模块可全部或部分通过软件、硬件及其组合来实现。上述各模块可以硬件形式内嵌于或独立于计算机设备中的处理器中，也可以以软件形式存储于计算机设备中的存储器中，以便于处理器调用执行以上各个模块对应的操作。

在一个实施例中，目前主流的DICM系统都需要对IDC或末端节点的视频监控系统进行同步监控，故需要在web页面进行网络摄像头视频流的同步显示。

由于各个厂家的摄像头输出的标准视频流为RTSP格式，无法在浏览器直接解码播放，目前主要的解决方案为使用第三方解码插件或者是经由流媒体服务器转码转发。

目前主流方案一是使用浏览器插件，但是由于安全性问题，目前新版本的浏览器全部取消了对此类插件的支持，如果必须使用，就要使用旧版本的浏览器进行访问，会有很严重的安全隐患和系统兼容性问题。

其次就是使用流媒体服务器进行转发，但是流媒体服务器需要一直对视频流进行解码转译，会占用更多的系统资源，且延迟较高，一般都在30秒左右，实时性较差，无法适用于网络监控摄像头的场景。

本实施例的目的就是提供一种能够兼容主流的最新版本浏览器、不依赖流媒体服务器且实时性较高、系统资源占用低的监控视频展示方案。

本实施例的处理思路和方法如下：(1)在需要展示视频监控的web页面建立一个canvas画布区，为显示图像做准备。(2)页面就绪后，与后端处理进程建立websocket数据通道。(3)后端进程在捕捉到websocket数据通道建立后，向网络摄像头或硬盘录像机拉取RTSP视频流。(4)对RTSP视频流进行切片处理，将关键帧转换为连续的图片。(5)将关键帧图片转换为二进制数据，并通过websocket数据通道推送到浏览器页面，并在canvas画布区对图像进行绘制。(6)不断推送和重绘图片，以达到连续的图像显示效果，视觉上即为实时视频流显示。(7)当页面关闭，websocket数据通道随之关闭，后台进程监控到websocket数据通道关闭后终止相关处理线程。

本实施例在浏览器页面显示的视频实际上是一张不断更新的canvas画布，并且利用直接对RTSP视频流进行切片、转换，避免了使用流媒体服务器对视频进行转码，这种处理不但延迟低(3秒内)，并且可以按需处理，节省资源并且兼容性好能覆盖主流的浏览器和视频监控设备。与现有技术相比，此发明无需使用第三方插件，无需限定使用带有安全漏洞的旧版本浏览器，无需使用额外的流媒体服务器，延迟可控制在3秒内，并且兼容任何标准的视频监控设备。能自由的将监控视频嵌入到各种综合监控网页中。

在一个实施例中，提供了一种计算机设备，该计算机设备可以是终端，其内部结构图可以如图3所示。该计算机设备包括通过系统总线连接的处理器、存储器、通信接口、显示屏和输入系统。其中，该计算机设备的处理器用于提供计算和控制能力。该计算机设备的存储器包括非易失性存储介质、内存储器。该非易失性存储介质存储有操作系统和计算机程序。该内存储器为非易失性存储介质中的操作系统和计算机程序的运行提供环境。该计算机设备的通信接口用于与外部的终端进行有线或无线方式的通信，无线方式可通过WIFI、运营商网络、NFC(近场通信)或其他技术实现。该计算机程序被处理器执行时以实现一种动环系统低延迟视频监控图像显示方法。该计算机设备的显示屏可以是液晶显示屏或者电子墨水显示屏，该计算机设备的输入系统可以是显示屏上覆盖的触摸层，也可以是计算机设备外壳上设置的按键、轨迹球或触控板，还可以是外接的键盘、触控板或鼠标等。

本领域技术人员可以理解，图3中示出的结构，仅仅是与本申请方案相关的部分结构的框图，并不构成对本申请方案所应用于其上的计算机设备的限定，具体的计算机设备可以包括比图中所示更多或更少的部件，或者组合某些部件，或者具有不同的部件布置。

在一个实施例中，提供了一种计算机设备，包括存储器和处理器，存储器中存储有计算机程序，涉及上述实施例方法中的全部或部分流程。

在一个实施例中，提供了一种计算机可读存储介质，其上存储有计算机程序，涉及上述实施例方法中的全部或部分流程。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的计算机程序可存储于一非易失性计算机可读取存储介质中，该计算机程序在执行时，可包括如上述各方法的实施例的流程。其中，本申请所提供的各实施例中所使用的对存储器、存储、数据库或其它介质的任何引用，均可包括非易失性和易失性存储器中的至少一种。非易失性存储器可包括只读存储器(Read-OnlyMemory，ROM)、磁带、软盘、闪存或光存储器等。易失性存储器可包括随机存取存储器(Random AccessMemory，RAM)或外部高速缓冲存储器。作为说明而非局限，RAM可以是多种形式，比如静态随机存取存储器(StaticRandomAccessMemory，SRAM)或动态随机存取存储器(DynamicRandomAccessMemory，DRAM)等。

以上实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。

以上所述实施例仅表达了本申请的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对发明专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本申请构思的前提下，还可以做出若干变形和改进，这些都属于本申请的保护范围。因此，本申请专利的保护范围应以所附权利要求为准。