CN113556579B

CN113556579B - 一种基于HTML5的web无插件播放安防实时视频的方法

Info

Publication number: CN113556579B
Application number: CN202110630561.XA
Authority: CN
Inventors: 谈鸿韬; 刘树惠; 廖乔治
Original assignee: Wuhan Zhongzhi Digital Technology Co ltd
Current assignee: Wuhan Zhongzhi Digital Technology Co ltd
Priority date: 2021-06-07
Filing date: 2021-06-07
Publication date: 2022-08-19
Anticipated expiration: 2041-06-07
Also published as: CN113556579A

Abstract

一种基于HTML5的web无插件播放安防实时视频的方法，包括：浏览器HTML5播放器、HTML5转码网关以及视频监控平台流媒体服务器，方法包括：浏览器HTML5播放器通过websocket向HTML5转码网关发送视频播放请求；HTML5转码网关基于浏览器HTML5播放器发送的请求，向视频监控平台流媒体服务器发起视频播放请求，将请求到的视频流转码成fMP4，并发送给对应的浏览器HTML5播放器；浏览器HTML5播放器接收到fMP4流后，通过浏览器MSE接口，将数据送进HTML5video标签，调用play接口进行视频播放。本发明能够无插件的在各种最新主流浏览器上低延迟(<500ms)的播放安防高清以上视频，兼顾一定的视频播放质量(Qos)处理，能够满足4kh265等超高清监控点位的实时播放需求。

Description

一种基于HTML5的web无插件播放安防实时视频的方法

技术领域

本发明安防和视频监控领域，具体涉及一种基于HTML5的web无插件播放安防实时视频的方法。

背景技术

在安防和视频监控领域，视频接入主要有两种方式，一种是基于公安部提出的GB/T28181标准，信令使用SIP协议，媒体使用RTP协议，一种是ONVIF标准，主要使用RTSP协议，两种标准前者属于国内行业标准，后者属于国外行业标准，国内安防设备厂商均提供支持，且在大的城市级视频监控系统建设中，以GB/T28181为主。在视频播放客户端架构上，两种标准都是以传统的C/S架构为主，客户端根据相应标准自行实现媒体和信令协议，全部的信令、收流、组帧、解码和渲染流程客户端自己独立实现。但随着web技术的火热发展，安防行业和客户对BS web端播放安防监控视频的需求也越来越迫切，相比C/S架构客户端，BS web端播放视频具有UI特性更丰富和简洁、开发成本低、无需安装庞大客户端安装包、用户观看体验较好等优点。但由于安防和互联网web技术发展历史、规范早期不一致、web对视频直播的原生支持滞后等原因，在web端播放视频一直没有特别好的方式，早期实现上具体以插件或者控件的形式提供，比如微软的ActiveX控件，网景的NPAPI插件，google的PPAPI插件，adobe的flashplayer等，随着时间和技术的发展以上插件技术都逐渐被淘汰：ActiveX只支持IE，NPAPI已被废弃，PPAPI几乎停止支持，flashplayer 2020年年底adobe正式停止支持。而最新解决以上问题的关键，就是HTML5。对于视频直播，HTML5提供MSE和WebRTC两种方式实现对实时视频流的支持，无需安装插件，即可利用浏览器自带的多媒体引擎解码和渲染播放，只要是支持HTML5特性的浏览器即可，为跨平台(IOS、安卓、PC桌面)视频直播成为可能。

但是，对于安防监控视频，应用HTML5还存在如下问题和障碍：监控点位视频编码类型众多，比如H264、H265、SVAC等，而HTML5只支持H264；封装类型视频监控以PS帧为主，而HTML5 MSE主要支持fMP4；视频分辨率方面，安防领域1080p为主流标配，4k等高分辨率也越发普及，特别是4k h265，对于播放器端的解码性能要求非常高；在播放时延敏感度方便，视频监控对时延要求非常高，一般在几百ms以内。这些条件限制使得直接应用HTML5技术播放监控实时视频存在较大的困难。

发明内容

鉴于现有技术中存在的技术缺陷和技术弊端，本发明实施例提供克服上述问题或者至少部分地解决上述问题的一种基于HTML5的web无插件播放安防实时视频的方法，具体方案如下：

一种基于HTML5的web无插件播放安防实时视频的方法，包括浏览器HTML5播放器、HTML5转码网关以及视频监控平台流媒体服务器，所述方法包括以下步骤：

步骤1，浏览器HTML5播放器通过websocket向HTML5转码网关发送视频播放请求；

步骤2，HTML5转码网关基于浏览器HTML5播放器发送的请求，向视频监控平台流媒体服务器发起视频播放请求，将请求到的视频流转码成fMP4，并发送给对应的浏览器HTML5播放器；

步骤3，浏览器HTML5播放器接收到fMP4流后，通过浏览器MSE接口，将数据送进HTML5 video标签，调用play接口进行视频播放。

进一步地，所述HTML5转码网关包括客户端代理、转码模块和转发模块，步骤2具体包括；

步骤2.1中，HTML5转码网关中的客户端代理接收到基于websocket的视频播放请求后，将请求信息翻译成GB28181中的SIP信令，向视频监控平台流媒体服务器发起SIP视频播放请求；

步骤2.2，监控平台流媒体服务器收到SIP视频播放请求时，向客户端代理回复200OK信令；

步骤2.3，客户端代理收到200OK信令后，向浏览器HTML5播放器发送websocket播放成功消息；

步骤2.4，客户端代理接收视频监控平台流媒体服务器发送过来的RTP媒体流数据，经过处理后，提取出帧数据，并传递给HTML5转码网关中的转码模块；

步骤2.5，转码网关将帧数据标准化成fMP4格式后，转发给转发模块；

步骤2.6，转发模块将fMP4流通过websocket向所有申请该点位的浏览器HTML5播放器进行发送。

进一步地，步骤2.4具体包括：

步骤2.41，初始化等I帧标志为false；

步骤2.42，将接收到的来自视频监控平台流媒体服务器的RTP包进行解析和缓存，得到RTP序号、时戳和SSRC信息，并基于RTP包序号从小到大(实际的发送包顺序)进行包排序，得到的缓存记为A

步骤2.43，检测当前接收的RTP包中是否含有帧首标志，如果有，添加到标志数组中，标志数组记为B，同时标志数组计数加一，如果没有，返回步骤2.42，继续接收下一个RTP包；

步骤2.44，当标志数组中计数达到阈值时，处理A中序号在B[0]<＝rtp序号<B[1]区间内的RTP包，进入步骤2.45；

步骤2.45，检测该区间内的RTP包序号是否连续，不连续，视为丢包，删除A中该区间内所有包缓存，同时B中B[1]到末尾位置整体向左移动一个位置，计数减一，等I帧标志置为true，返回步骤2.42，继续接收下一个RTP包；如果连续，进入步骤2.46；

步骤2.46，将该区间内所有RTP包的解析得到的PAYLOAD数据进行拼接，得到完整的PS帧，同时删除A中该区间内所有包缓存，同时B中B[1]到末尾位置整体向左移动一个位置，计数减一；判断该帧的类型，如果是I帧同时等I帧标志为true，重置等I帧标志为false；处理完成后，进入步骤2.47；

步骤2.47，如等I帧标志为false，将该帧数据传递给转码模块；如果为true，丢弃该帧，同时返回步骤2.42，继续接收下一个RTP包。

进一步地，步骤2.5具体包括：

步骤2.51，将收到的PS帧进行解封装，得到裸流ES数据；

步骤2.52，判断帧的编码类型：H264/h265/svac等；

步骤2.53，如果是H264，直接转封装成fMP4格式；进入步骤2.57

步骤2.54，如果是非H264，进入步骤2.55；

步骤2.55，判断是否是GPU支持的解码类型，如果是，则进行GPU解码；不是，则进行CPU解码，并进入步骤2.56；

步骤2.56，利用GPU将解码数据重新编码成H264类型；进入步骤2.53；

步骤2.57，将fMP4数据传递给转发模块。

进一步地，所述方法还包括：GPU利用Intel CPU自带的QSV硬件加速功能进行解码和编码硬件加速。

进一步地，步骤3具体包括：

步骤3.1，创建MediaSource，以及跟MediaSource绑定的url，将url设置为video标签的src；

步骤3.2，播放器通过websocket接收HTML5转码网关发送的数据；

步骤3.3，判断数据类型，如果是非媒体类的信令数据，进行相应的控制操作；

步骤3.4，如果是媒体数据fMP4，添加到数组ArrayBuffer中去；同时进入步骤3.5；

步骤3.5，根据MediaSource创建SourceBuffer，同时调用SourceBuffer的appendBuffer接口将ArrayBuffer数据送进浏览器；

步骤3.6，调用video标签的play方法，完成播放。

进一步地，所述视频播放请求中包括请求需要的前端点位PUID和视频通道号。

进一步地，步骤3中，将请求到的视频流转码成fMP4并发送给所有申请对应前端点位PUID的浏览器HTML5播放器。

进一步地，HTML5转码网关是部署在后台服务器或客户端PC中，HTML5转码网关和浏览器在同一机器节点，以操作系统中后台服务进程形式存在。

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

本发明的可支持多种前端视频编码(h264/h265/svac)以及分辨率类型(1080p/4k)，通过智能化转码/转封装策略以及GPU硬件加速，将性能消耗最重的转码环节放在后端处理，前端播放器只是简单的收流不做任何处理，最大程度的加快视频网关环节的处理，降低转码延迟(500ms以内)，同时兼顾一定的Qos质量，对常见的由于丢包、乱序造成的视频播放问题能够有效处理；理论上也可以进行桌面(win)/移动端(IOS/android)全平台覆盖和支持；开发和部署较为简单，转码网关即可部署在后台(完全无插件体验播放)，也可以客户端服务进程形式，通过websocket和浏览器进行交互，几乎无播放器开发成本(无自定义视频绘制等)，避免了WebAssembly等复杂编译转换技术带来的转码端和播放端带来的高额开发成本，比较有效的适应安防和视频监控行业在最新web端的视频播放需求。

附图说明

图1为本发明实施例提供的基于HTML5的web无插件播放安防实时视频的系统结构图；

图2为本发明实施例提供的基于HTML5的web无插件播放安防实时视频的方法流程图；

图3为本发明实施例提供的客户端代理模块的处理流程图；

图4为本发明实施例提供的转码模块的处理流程图；

图5为本发明实施例提供的HTML5播放器的处理流程图；

图6为本发明实施例提供的客户端系统结构图。

具体实施方式

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

如图1所示，作为本发明的第一实施例，提供一种基于HTML5播放GB28181实时监控视频流的架构部署图，系统包括HTML5转码网关、浏览器HTML5播放器两个核心组件，其中，HTML5转码网关又包括客户端代理、转码模块、转发模块三个子模块。

客户端代理负责按照相应的取流协议(GB28181)向视频监控平台或者前端点位拉取实时视频流，并提取成帧数据。

转码模块负责将客户端代理提取的帧数据进行解封装和重新转码/转封装，转化成fMP4格式，其中，转码模块中的GPU平台基于nvidia平台的Tesla P4型号。

转发模块负责将fMP4媒体流向多个申请该同一点位的客户端以websocket形式进行复制转发。

浏览器HTML5播放器通过以websocket方式接收fMP4流，并通过浏览器MSE接口将数据送进浏览器，通过浏览器自带的多媒体引擎内核进行解码和视频播放。

如2所示，为本实例系统部署架构下面，基于HTML5的视频播放请求和交互流程，具体包括如下步骤：

步骤1，浏览器HTML5播放器通过websocket向HTML5转码网关发送监控视频点位播放请求，发送信息中包括GB28181请求需要的前端点位PUID和视频通道号等信息；

步骤2，HTML5转码网关中的客户端代理接收到websocket播放请求后，将请求信息翻译成GB28181中的SIP信令，向视频监控平台流媒体服务器发起SIP视频播放请求；

步骤3，监控平台流媒体服务器收到SIP视频播放请求时，向客户端代理回复200OK信令；

步骤4，客户端代理收到200OK后，向浏览器HTML5播放器发送websocket播放成功消息；

步骤5，客户端代理接收视频监控平台流媒体服务器发送过来的RTP媒体流数据，经过处理后，提取出帧数据，并传递给HTML5转码网关中的转码模块；

步骤6，转码网关将帧数据标准化成fMP4格式后，传递给转发模块；

步骤7，转发模块将fMP4流通过websocket向所有申请该点位的浏览器HTML5播放器进行发送；

步骤8，浏览器HTML5播放器接收到fMP4流后，通过浏览器MSE接口，将数据送进HTML5 video标签，调用play接口进行视频播放。

如图3所示，其中，步骤5中，客户端代理处理媒体数据的详细步骤具体如下：

(1)初始化等I帧标志为false；

(2)将接收到的RTP包进行解析和缓存，得到RTP序号、时戳、SSRC等信息，并基于RTP包序号从小到大(实际的发送包顺序)进行包排序，得到的缓存记为A；其中，对序号翻转处位置的大小比较需要编写特殊的比较函数，保证序号翻转不影响实际的接收顺序，后续的排序都需要进行此操作，不再赘述；

(3)检测当前接收的RTP包中是否含有帧首标志(比如PS封装开头的000001BA)，如果有，添加到标志数组中，标志数组记为B(添加过程同样基于RTP序号进行排序)，同时标志数组计数加一(初始计数为0)，如果没有，返回(2)，继续接收下一个RTP包；

(4)当标志数组中计数达到阈值时(默认值设定为3，缓存到第三帧时开始处理第一帧缓存)，处理A中序号在B[0]<＝rtp序号<B[1]区间内的RTP包，进入(5)；

(5)检测该区间内的RTP包序号是否连续，不连续，视为丢包，删除A中该范围内所有包缓存，同时B中B[1]到末尾位置整体向左移动一个位置，计数减一，等I帧标志置为true，返回(2)，继续接收下一个RTP包；如果连续，进入(6)；

(6)将该区间内所有RTP包的解析得到的PAYLOAD数据进行拼接，得到完整的一组帧数据，即PS帧，同时删除A中该范围内所有包缓存，同时B中B[1]到末尾位置整体向左移动一个位置，计数减一；判断该帧的类型，如果是I帧同时等I帧标志为true，重置等I帧标志为false；处理完成后，进入(7)；

(7)如等I帧标志为false,将该帧数据传递给转码模块；如果为true，丢弃该帧，同时返回步骤(2)，继续接收下一个RTP包。

如图4所示，其中，步骤6中，转码模块的处理流程具体如下：

(1)将收到的PS帧进行解封装，得到裸流ES数据；

(2)判断帧的编码类型：H264/h265/svac等；

(3)如果是H264，直接转封装成fMP4格式；进入(7)

(4)如果是非H264，进入(5)；

(5)判断是否是GPU支持的解码类型，如果是，进行GPU解码，不是，进行CPU解码；进入(6)；

(6)利用GPU将解码数据重新编码成H264类型；进入(3)；

(7)将fMP4数据传递给转发模块。

如图5所示，其中，步骤8中，HTML5播放器的处理流程具体如下：

(1)创建MediaSource，以及跟MediaSource绑定的url，将url设置为video标签的src；

(2)播放器通过websocket接收HTML5转码网关发送的数据

(3)判断数据类型，如果是非媒体类的信令数据，进行相应的控制操作；

(4)如果是媒体数据fMP4，添加到数组ArrayBuffer中去；同时进入(5)；

(5)根据MediaSource创建SourceBuffer，同时调用SourceBuffer的appendBuffer接口将ArrayBuffer数据送进浏览器；

(6)调用video标签的play方法，完成播放。

上述实施例中，HTML5转码网关以后台服务的形式提供，不需要安装任何播放插件。

作为本发明的第二实施例，所述HTML5转码网关是部署在后台服务器中，但是其部署方式并不是一成不变的，同样可以部署在客户端PC中，跟浏览器在同一机器节点，以操作系统中后台服务进程形式存在，如图6所示，GPU加速平台可以利用Intel CPU自带的QSV硬件加速功能，目前主流Intel CPU基本都支持，跟后台服务器部署方式相比，并发量虽然小，但是比较节约硬件资源，不需要专门的GPU服务器

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

Claims

1.一种基于HTML5的web无插件播放安防实时视频的方法，其特征在于，包括浏览器HTML5播放器、HTML5转码网关以及视频监控平台流媒体服务器，所述方法包括以下步骤：

步骤3，浏览器HTML5播放器接收到fMP4流后，通过浏览器MSE接口，将数据送进HTML5video标签，调用play接口进行视频播放；

其中，所述HTML5转码网关包括客户端代理、转码模块和转发模块，步骤2具体包括；

步骤2.1中，HTML5转码网关中的客户端代理接收到基于websocket的视频播放请求后，将请求信息翻译成GB28181中的SIP信令，向视频监控平台流媒体服务器发起SIP视频播放请求，视频播放请求中包括请求需要的前端点位PUID；

步骤2.6，转发模块将fMP4流通过websocket向所有申请该点位的浏览器HTML5播放器进行发送；

其中，步骤2.4具体包括：

步骤2.41，初始化等I帧标志为false;

步骤2.42，将接收到的来自视频监控平台流媒体服务器的RTP包进行解析和缓存，得到RTP序号、时戳和SSRC信息，并基于RTP包序号从小到大进行包排序，得到的缓存记为A；

步骤2.43，检测当前接收的RTP包中是否含有帧首标志，如果有，添加到标志数组中，标志数组记为B，添加过程同样基于RTP序号进行排序，同时标志数组计数加一，如果没有，返回步骤2.42，继续接收下一个RTP包；

步骤2.44，当标志数组中计数达到阈值时，处理A中序号在B[0]<=rtp序号<B[1]区间内的RTP包，进入步骤2.45;

步骤2.45，检测该区间内的RTP包序号是否连续，不连续，视为丢包，删除A中该区间内所有包缓存，同时B中B[1]到末尾位置整体向左移动一个位置，计数减一，等I帧标志置为true，返回步骤2.42，继续接收下一个RTP包；如果连续，进入步骤2.46;

2.根据权利要求1所述的基于HTML5的web无插件播放安防实时视频的方法，其特征在于，步骤2.5具体包括：

步骤2.51，将收到的PS帧进行解封装，得到裸流ES数据；

步骤2.52，判断帧的编码类型：H264/h265/svac；

步骤2.53，如果是H264，直接转封装成fMP4格式；进入步骤2.57

步骤2.54，如果是非H264，进入步骤2.55；

步骤2.56，利用GPU将解码数据重新编码成H264类型；进入步骤2.53;

步骤2.57，将fMP4数据传递给转发模块。

3.根据权利要求2所述的基于HTML5的web无插件播放安防实时视频的方法，其特征在于，所述方法还包括：GPU利用Intel CPU自带的QSV硬件加速功能进行解码和编码硬件加速。

4.根据权利要求1所述的基于HTML5的web无插件播放安防实时视频的方法，其特征在于，步骤3具体包括：

步骤3.2，播放器通过websocket接收HTML5转码网关发送的数据；

步骤3.6，调用video标签的play方法，完成播放。

5.根据权利要求1所述的基于HTML5的web无插件播放安防实时视频的方法，其特征在于，所述视频播放请求中还包括请求需要的视频通道号。

6.根据权利要求4所述的基于HTML5的web无插件播放安防实时视频的方法，其特征在于，步骤3中，将请求到的视频流转码成fMP4并发送给所有申请对应前端点位PUID的浏览器HTML5播放器。

7.根据权利要求1所述的基于HTML5的web无插件播放安防实时视频的方法，其特征在于，HTML5转码网关是部署在后台服务器或客户端PC中，HTML5转码网关和浏览器在同一机器节点，以操作系统中后台服务进程形式存在。