CN109889907A - 一种基于html5的视频osd的显示方法及装置 - Google Patents

Abstract

本发明实施例提供一种基于HTML5的视频OSD的显示方法及装置。其中方法包括：通过支持HTML5的浏览器与流媒体服务器建立基于WebSocket协议的数据通道，通过数据通道从流媒体服务器获取视频流数据和OSD数据；将获得到的私有协议视频数据转换成mp4格式的数据后缓存至视频缓冲池中，将OSD数据存储至OSD缓冲池中；当视频缓冲池满时，通过支持HTML5的浏览器对mp4格式的数据进行解码和渲染，从OSD缓冲池中筛选出与当前屏幕渲染的视频帧图像时间戳相等的OSD数据，根据与当前渲染的视频帧图像相匹配的OSD数据所携带的信息绘制成相应图像后叠加在所述当前渲染的视频帧图像的HTML5 video标签上。本发明实施例提供的视频OSD的显示方法及装置，能实现只通过浏览器同步显示视频和OSD信息图像。

Description

一种基于HTML5的视频OSD的显示方法及装置

技术领域

本发明涉及视频处理技术领域，更具体地，涉及一种基于HTML5的视频OSD信息的显示方法及装置。

背景技术

在视频监控的应用中通常会在视频监控画面中嵌入OSD(On Screen Display)信息，通过OSD数据，可以使该视频的观看者直观地了解视频序列中记录的事件发生的时间和地点等信息，记录这些信息极大的方便了对图像序列的辨识和图像内容的分析。当然OSD数据不局限于事件发生的时间和地点信息，还可以是业务场景需要的信息，例如人脸识别、车辆识别OSD数据，包含视频帧图像中的人脸、车辆出现的位置、尺寸等信息。

目前在浏览器里显示监控视频以及OSD数据的方法是在网页中安装插件，通过该插件播放视频流并显示OSD数据。常用的插件包括OCX插件(OLE Control eXtension，对象类别扩充组件)和flash插件。但是，OCX插件推广度低，在播放时，用户需要下载OCX插件，然后在浏览器中安装，而且在安装过程中需要进行验证，容易被安全软件拦截，甚至由于兼容性问题，可能引起注册模块调用失败等错误，导致安装失败，操作十分繁琐，而且只支持IE浏览器，chrome、firefox等浏览器均不能支持。Flash插件虽然能克服OCX插件的问题，但是微软宣布，将对VML、VB Script、ToolBars、BHOs、ActiveX等旧扩展程序不再支持，Chrome也放弃了NPAPI。各大浏览器厂商都降低了对flash插件的支持，flash插件也在逐步被主流浏览器淘汰。

发明内容

由于主流浏览器对各种旧扩展程序或插件的逐渐不支持和淘汰，导致浏览器上视频无法播放和OSD无法显示。为了解决这个问题，本发明实施例提供一种基于HTML5的视频OSD的显示方法及装置。

第一方面，本发明实施例提供一种基于HTML5的视频OSD的显示方法，包括：

通过支持HTML5的浏览器与流媒体服务器建立基于WebSocket协议的数据通道，通过所述基于WebSocket协议的数据通道从所述流媒体服务器获取视频流数据和OSD数据；

通过所述支持HTML5的浏览器将所述视频流数据转换成mp4格式的数据后缓存至视频缓冲池中，将所述OSD数据存储至OSD缓冲池中；

当所述视频缓冲池满时，通过所述支持HTML5的浏览器对所述mp4格式的数据进行解码和渲染，从所述OSD缓冲池中筛选出与当前渲染的视频帧图像时间戳相等的OSD数据，根据所述与当前渲染的视频帧图像相匹配的OSD数据所携带的信息绘制成相应图像后叠加在所述当前渲染的视频帧图像的HTML video标签上。

第二方面，本发明实施例提供一种基于HTML5的视频OSD的显示装置，包括：

数据获取模块，用于通过支持HTML5的浏览器与流媒体服务器建立基于WebSocket协议的数据通道，通过所述基于WebSocket协议的数据通道从所述流媒体服务器获取视频流数据和OSD数据；

数据缓冲模块，用于通过所述支持HTML5的浏览器将所述视频流数据转换成mp4格式的数据后缓存至视频缓冲池中，将所述OSD数据存储至OSD缓冲池中；

视频解码渲染和OSD显示模块，用于当所述视频缓冲池满时，通过所述支持HTML5的浏览器对所述mp4格式的数据进行解码和渲染，根据所述与当前渲染的视频帧图像相匹配的OSD数据所携带的信息绘制成相应图像后叠加在所述当前渲染的视频帧图像的HTML5video标签上。

第三方面，本发明实施例提供一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，执行所述程序时实现如第一方面的各种可能的实现方式中任一种可能的实现方式所提供的基于HTML5的视频OSD的显示方法的步骤。

第四方面，本发明实施例提供一种非暂态计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时实现如第一方面的各种可能的实现方式中任一种可能的实现方式所提供的基于HTML5的视频OSD的显示方法的步骤。

本发明实施例提供的视频OSD的显示方法及装置，通过支持HTML5的浏览器实现视频播放时OSD数据的同步显示，客户端无须安装插件，解决了OCX、FLASH等插件逐步被浏览器淘汰，视频无法播放和OSD无法显示的问题。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作一简单地介绍，显而易见地，下面描述中的附图是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1为根据本发明实施例提供的基于HTML5的视频OSD的显示方法的流程示意图；

图2为根据本发明实施例提供的基于HTML5的视频OSD的显示装置的结构示意图；

图3为根据本发明实施例提供的电子设备的实体结构示意图。

具体实施方式

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

为了克服现有技术的上述问题，本发明实施例提供一种基于HTML5的视频OSD的显示方法及装置，其发明构思是，利用HTML5支持网页端的音视频等多媒体功能的特性，基于支持HTML5的浏览器实现视频的播放和OSD的显示，而不需要安装插件来实现。

图1为根据本发明实施例提供的基于HTML5的视频OSD的显示方法的流程示意图。如图1所示，该方法包括：步骤S101、通过支持HTML5的浏览器与流媒体服务器建立基于WebSocket协议的数据通道，通过基于WebSocket协议的数据通道从流媒体服务器获取视频流数据和OSD数据。

需要说明的是，本发明实施例提供的视频OSD的显示方法的执行主体为安装了支持HTML5的浏览器的用户终端，包括安装了支持HTML5的浏览器的移动终端或计算机等。

具体地，流媒体服务器是指可以实时向客户端推送摄像头视频数据的后台服务器。支持HTML5的浏览器可以基于WebSocket协议与流媒体服务器建立通信，支持HTML5的浏览器与流媒体服务器建立数据通道之后，通过该数据通道向流媒体服务器发送视频数据请求以获取视频流数据。

WebSocket协议是基于TCP的一种新的网络协议。它实现了浏览器与服务器全双工(full-duplex)通信--允许服务器主动发送信息给客户端。

HTML5是用于取代1999年所制定的HTML 4.01和XHTML1.0标准的HTML(标准通用标记语言下的一个应用)标准版本，目前大部分浏览器已经支持某些HTML5技术。HTML5是最新的HTML标准。HTML5是专门为承载丰富的web内容而设计的，并且无需额外插件。HTML5拥有新的语义、图形以及多媒体元素。

HTML5提供的新元素和新的API简化了web应用程序的搭建。

HTML5是跨平台的，被设计为在不同类型的硬件(PC、平板、手机、电视机等等)之上运行。

视频流数据，可以为监控视频流数据。

OSD数据为可显示于屏幕的信息。OSD数据携带有感兴趣对象的信息和OSD数据的时间戳。根据采集视频流数据的不同场景，感兴趣对象可以包括地点、车辆、人脸和物品中的至少一种。相应地，感兴趣对象的信息，可以包括地点的相关信息、建筑物的相关信息、人脸的相关信息和物品的相关信息中的至少一种。相关信息，至少包括感兴趣对象在图像中的坐标信息和/或尺寸信息、感兴趣对象的名称或感兴趣对象的编号。感兴趣对象的信息，可以在视频源端将其采集的原始视频数据上传至流媒体服务器时，由流媒体服务器根据目标检测和识别算法获得。OSD数据的时间戳是指视频帧图像画面中感兴趣对象(如人脸或车辆等物品)出现的时刻信息。

需要说明的是，在本发明实施例中OSD数据已经预先存储在流媒体服务器中。

支持HTML5的浏览器与流媒体服务器建立数据通道之后，还通过该数据通道向流媒体服务器发送OSD数据请求以获取OSD数据。

步骤S102、通过支持HTML5的浏览器将视频流数据转换成mp4格式的数据后缓存至视频缓冲池中，将OSD数据存储至OSD缓冲池中。

具体地，由于视频流数据是经过私有协议编码的，不能直接被支持HTML5的浏览器进行解码和播放，因此，支持HTML5的浏览器获取视频流数据之后，需要将获取的视频流数据实时按帧进行mp4格式的封装处理，最终将视频流数据转换成mp4格式的数据。这样做的好处在于，不但实现了视频播放，而且还保证了视频播放的实时性，大大减少了直播延迟。

将经过mp4格式转码处理后的视频流数据和OSD数据均先缓存下来，目的是为了实现在视频流数据被解码和渲染的同时筛选出与当前渲染的视频帧图像匹配的OSD数据，然后将筛选出的OSD数据绘制成图像叠加在正在播放视频的HTML5video标签上。

在具体实施时，支持HTML5的浏览器会设置一定的缓冲时长，一般不超过2s，在视频缓冲池满后，才开始播放mp4格式的数据。

步骤S103、当视频缓冲池满时，通过支持HTML5的浏览器对mp4格式的数据进行解码和渲染，从OSD缓冲池中筛选出与当前渲染的视频帧图像相匹配的OSD数据，根据与当前渲染的视频帧图像相匹配的OSD数据所携带的信息绘制成图像后叠加在当前渲染的视频帧图像的HTML5video标签上。

具体地，当视频缓冲池满时，开始对mp4格式的数据进行解码和渲染，并且设置一个OSD叠加计时器开始计时，每隔预设时间，从OSD缓冲池中尝试筛选出与当前渲染的视频帧图像相匹配的人脸识别OSD数据，其中，预设时间一般设置为一个极小的值，从而实现OSD数据的同步显示。例如，每隔10毫秒从OSD缓冲池内筛选出时间戳与当前渲染的帧时间戳相等的OSD数据，并根据OSD数据中包含的坐标信息在当前渲染的视频帧图像上相应位置叠加感兴趣对象的图像信息，从而实现OSD数据在视频播放时的同步显示。

本发明实施例通过支持HTML5的浏览器实现视频播放时OSD数据的同步显示，客户端无须安装插件，大大提高了用户体验，解决了在Ocx、flash等插件被淘汰的情况下，视频无法播放以及OSD无法显示的问题。

基于上述各实施例的内容，通过支持HTML5的浏览器将视频流数据转换成mp4格式的数据的具体步骤包括：通过解析视频流数据，按照帧的顺序获取视频流数据中的每一视频帧图像及每一视频帧图像的时间戳。

具体地，由于视频流数据是经过私有协议编码，例如安防领域的视频监控，常采用H.264系列视频编解码标准进行编码。

通过解析基于WebSocket协议从流媒体服务器获得的每个数据包，读取28个字节头后，就可以获得H.264裸流的一个NALU单元(网络提取层单元)。

网络提取层(Network Abstraction Layer，NAL)，以NAL封包为单位的方式来做为VCL编译码的运算单位。

浏览器刚开始连接到服务器，若未获取到视频数据单元类型为7和8的NALU，忽略单元类型为其他类型的NALU，直至获取到单元类型为7和8的NALU。

获取单元类型为7和8的NALU之后，可以解析出序列参数集(Sequence ParamaterSet，SPS)和图像参数集(Picture Paramater Set，PPS)。根据SPS和PPS，以及紧接着的I帧就可以封装出mp4格式封装要求的Initialization Segments。

之后忽略单元类型为7和8的NALU，只解析单元类型为5(关键帧)和1等其他类型的NALU单元，获得数据后将他们封装成mp4格式封装要求的media Segments。

若封装的多媒体仅包括视频，则可以按照帧的顺序依次获取到视频流数据中的每一视频帧图像及每一视频帧图像的时间戳。

对于每一视频帧图像，将视频帧图像封装成mp4格式的数据，并将视频帧图像的时间戳按照帧的顺序添加至视频时间戳数组中。

具体地，对于获取到的每一视频帧图像，可以按照mp4格式中的视频编码格式，将该视频帧图像重新封装成mp4格式的数据。

对于该视频帧图像的时间戳，则可以按照帧的顺序，将该视频帧图像的时间戳添加至视频时间戳数组中。

视频时间戳数组，为预先建立的一个数组，用于保存各视频帧图像的时间戳。视频帧图像的时间戳，指该视频帧图像对应的时间。

视频时间戳数组中，视频帧图像的时间戳按照帧的顺序排列。例如，视频流数据中第一视频帧图像的时间戳为视频时间戳数组中的第一个元素，第二视频帧图像的时间戳为视频时间戳数组中的第二个元素，依此类推。

本发明实施例通过将视频流数据实时转换成mp4格式的数据，能保证视频播放的实时性，大大减少直播延迟。

基于上述各实施例的内容，若视频流数据中还包括音频数据，则将各视频帧图像按照时间顺序封装成mp4格式的数据之前，还包括：通过解析视频流数据，按照帧的顺序获取视频流数据中的每一音频帧的音频数据及每一音频帧的音频数据的时间戳。

需要说明的是，由于视频流数据是经过私有协议编码，该协议除了支持视频编码，还可能支持音频编码，例如AAC音频格式。因此，从流媒体服务器获取的视频流数据除了包括视频数据之外，还可以包括音频数据。

若视频流数据中还包括音频数据，上述实施例中对视频流数据的解析过程中，除了可以按照帧的顺序依次获取到视频流数据中的每一视频帧图像及每一视频帧图像的时间戳，还可以按照帧的顺序依次获取到视频流数据中的每一音频帧的音频数据及每一音频帧的音频数据的时间戳。

相应地，对于每一视频帧图像，将视频帧图像封装成mp4格式的数据具体还包括：将视频帧图像及视频帧图像对应的音频帧的音频数据，封装成mp4格式的音频数据。

由于mp4格式也包括音频编码格式，将视频帧图像封装成mp4格式的数据的同时，将该视频帧图像和该视频帧图像对应的音频帧的音频数据一起封装成mp4格式要求的音频数据格式，例如AAC。

该视频帧图像对应的音频帧的音频数据，指时间戳与该视频帧图像的时间戳相等的音频帧的音频数据。

本发明实施例通过将视频流数据转换成mp4格式的数据，能适用于同时包括音频和视频的视频流数据，能提高视频OSD的显示方法的适用范围，更有益于视频OSD显示的应用和推广。

基于上述各实施例的内容，将mp4格式的数据缓存至视频缓冲池以及解码渲染视频和计时器筛选OSD信息的具体步骤包括：创建mediaSource对象，通过createObjectURL函数将mediaSource对象与HTML 5的video标签进行连接。

具体地，支持HTML5的浏览器通过MediaSource接口创建mediaSource对象。

MediaSource是一个表示媒体资源HTMLMediaElement对象的接口。MediaSource对象可以附着在HTMLMediaElement在客户端进行视频播放。

JavaScript可以通过URL.createObjectURL方法(具体使用createObjectURL函数)生成HTML 5的video标签，将HTML 5的video标签与mediaSource对象进行连接，实现二者的绑定。

具体地，支持HTML5的浏览器通过mediaSource对象可以创建视频和音频各一个SourceBuffer。

接下来，创建音频片段数组来存放格式转化后的音频数据，创建视频片段数组来存放格式转化后的视频数据。

可以根据缓冲长度阈值，在恰当时机把转换后重新封装的MP4视频数据、音频数据分别添加到视频SourceBuffer和音频SourceBuffer。

本发明实施例通过Media Source Extensions此HTML 5API实现播放mp4格式的数据。

基于上述各实施例的内容，从OSD缓冲池中筛选出与当前渲染的视频帧图像相匹配的OSD数据的具体步骤包括：获取当前渲染的视频帧图像的时间戳。

具体地，对于当前渲染的视频帧图像，获取该视频帧图像的时间戳。

每隔预设时间将当前渲染的视频帧图像的时间戳与OSD缓冲池中各OSD数据的时间戳进行比对。

对当前渲染的视频帧图像与OSD数据的匹配，是将当前渲染的视频帧图像的时间戳，分别与OSD缓冲池中每一OSD数据的时间戳进行比对实现的。

若通过比对获知OSD缓冲池中存在时间戳与当前渲染的视频帧图像的时间戳相等的OSD数据，则将时间戳与当前渲染的视频帧图像的时间戳相等的OSD数据，作为与当前渲染的视频帧图像相匹配的OSD数据。

具体地，若比对结果为OSD缓冲池中的某一OSD数据的时间戳与当前渲染的视频帧图像的时间戳相等，说明该OSD数据与当前渲染的视频帧图像相匹配，将该OSD数据作为与当前渲染的视频帧图像相匹配的OSD数据。

OSD缓冲池中存在时间戳等于当前渲染的视频帧图像的时间戳的OSD数据，则在当前渲染的视频帧图像的视频上层开始叠加OSD信息绘制成的图像，以显示OSD信息。

本发明实施例根据时间戳是否相等，进行当前渲染的视频帧图像与OSD数据的匹配，能保证视频播放时正确地同步显示OSD数据。

基于上述各实施例的内容，获取当前渲染的视频帧图像的时间戳的具体步骤包括：删除视频时间戳数组中已渲染的视频帧图像对应的元素，对于当前渲染的视频帧图像，将视频时间戳数组中的第一个元素，确定为当前渲染的视频帧图像的时间戳。

具体地，可以通过支持HTML5的浏览器的函数计算出当前渲染的视频帧图像相较于上次计时器执行时刻已经播放的帧数n。

例如，Chrome浏览器可以通过video.webkitDecodedFrameCount和video.webkitDroppedFrameCount获得当前渲染的视频帧从开始播放到现在已经播放的帧数n。

获取当前渲染的视频帧图像，相较于上次计时器执行时刻已经播放的帧数n，将视频时间戳数组中的前n个元素删除，则视频时间戳数组中第一个元素，即为当前渲染的视频帧图像的时间戳。

从视频时间戳数组中删除已经播放过的视频帧图像的时间戳，即对视频时间戳数组执行删除其中的元素，删除已播放完的视频帧图像的时间戳。这种情况下，对于当前渲染的视频帧图像，当前视频时间戳数组中的第一个元素即为当前渲染的视频帧图像的时间戳。

本发明实施例根据视频时间戳数组获取当前渲染的视频帧图像的时间戳，能正确获取当前渲染的视频帧图像的时间戳，从而能获得准确的OSD数据匹配结果，能保证视频播放时正确的同步显示OSD数据。

基于上述各实施例的内容，根据与当前渲染的视频帧图像相匹配的OSD数据所携带的信息绘制成图像后叠加在当前渲染的视频帧图像的HTML5video标签上的具体步骤包括：通过文档对象模型和层叠样式表3级，或者通过HTML5Canvas，根据与当前渲染的视频帧图像相匹配的OSD数据所携带的信息绘制成图像后叠加在当前渲染的视频帧图像的HTML5video标签上。

具体地，将当前渲染的视频帧图像相匹配的OSD数据绘制成图像后叠加在当前渲染的视频帧图像上，至少可以通过以下两种方法中的任一种实现。

第一种方法是采用DOM+CSS3的方式，即采用文档对象模型和层叠样式表3级配合的方式。

文档对象模型(Document Object Model，简称DOM)，是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面(或文档)的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。

层叠样式表3级(Cascading Style Sheets Level 3，CSS3)是CSS(层叠样式表，Cascading Style Sheets)技术的升级版本。CSS3原理的同CSS，是在网页中自定义样式表的选择符，然后在网页中大量引用这些选择符。

CSS3增加的新特征有很多，例如圆角效果、图形化边界、块阴影与文字阴影、使用RGBA实现透明效果、渐变效果、使用@Font-Face实现定制字体、多背景图、文字或图像的变形处理(旋转、缩放、倾斜、移动)、多栏布局、媒体查询等，从而可以结合DOM，实现对将当前渲染的视频帧图像相匹配的OSD数据绘制成图像叠加在当前渲染的视频帧图像上。

第二种方法是采用HTML5Canvas的方式。

HTML5Canvas(HTML5画布)是由HTML代码配合高度和宽度属性而定义出的可绘制区域。JavaScript代码可以访问该区域，类似于其他通用的二维API，通过一套完整的绘图函数来动态生成图形。

HTML 5的canvas标签是HTML5新增的一个可以使用脚本(通常为JavaScript)在其中绘制图像的HTML元素。它可以用来制作照片集或者制作动画，还可以进行实时视频处理和渲染。

本发明实施例通过文档对象模型和层叠样式表3级，或通过HTML5Canvas将当前渲染的视频帧图像相匹配的OSD数据绘制成图像后叠加在当前渲染的视频帧图像上，能实现视频播放时OSD数据的同步显示。

图2为根据本发明实施例提供的基于HTML5的视频OSD的显示装置的结构示意图。基于上述各实施例的内容，如图2所示，该装置包括数据获取模块201、数据缓冲模块202和视频解码渲染和OSD显示模块203，其中：

数据获取模块201，用于通过支持HTML5的浏览器与流媒体服务器建立基于WebSocket协议的数据通道，通过基于WebSocket协议的数据通道从流媒体服务器获取视频流数据和OSD数据；

数据缓冲模块202，用于通过支持HTML5的浏览器将视频流数据转换成mp4格式的数据后缓存至视频缓冲池中，将OSD数据存储至OSD缓冲池中；

视频解码渲染和OSD显示模块203，用于当视频缓冲池满时，通过支持HTML5的浏览器对mp4格式的数据进行解码和渲染，从OSD缓冲池中筛选出与当前渲染的视频帧图像相匹配的OSD数据，根据与当前渲染的视频帧图像相匹配的OSD数据所携带的信息绘制成图像后叠加在当前渲染的视频帧图像的HTML5video标签上。

具体地，数据获取模块201通过支持HTML5的浏览器可以基于WebSocket协议与流媒体服务器建立通信，支持HTML5的浏览器与流媒体服务器建立数据通道之后，通过该数据通道向流媒体服务器发送视频数据请求以获取视频流数据，还通过该数据通道向流媒体服务器发送OSD数据请求以获取OSD数据。

数据缓冲模块202将获取的视频流数据实时按帧进行mp4格式的封装处理，最终将视频流数据转换成mp4格式的数据，将经过mp4格式转码处理后的视频流数据和OSD数据均进行缓存，分别缓存至视频缓冲池中和OSD缓冲池中。

视频解码渲染和OSD显示模块203当视频缓冲池满时，开始对mp4格式的数据进行解码和渲染，并且设置一个计时器开始计时，每隔预设时间，尝试从OSD缓冲池中筛选出与当前渲染的视频帧图像相匹配的人脸识别OSD数据，将筛选出的OSD数据绘制图像叠加在当前渲染的视频帧图像的HTML5video标签上。

本发明实施例提供的视频OSD的显示装置，用于执行本发明上述各实施例提供的视频OSD的显示方法，该视频OSD的显示装置包括的各模块实现相应功能的具体方法和流程详见上述视频OSD的显示方法的实施例，此处不再赘述。

该视频OSD的显示装置用于前述各实施例的视频OSD的显示方法。因此，在前述各实施例中的视频OSD的显示方法中的描述和定义，可以用于本发明实施例中各执行模块的理解。

本发明实施例通过支持HTML5的浏览器实现视频播放时OSD数据的同步显示，客户端无须安装插件，大大提高了用户体验，解决了ocx、flash等插件逐步被淘汰，无法播放视频和显示OSD的问题，更有益于视频OSD显示的应用和推广。

图3为根据本发明实施例提供的电子设备的结构框图。基于上述实施例的内容，如图3所示，该电子设备可以包括：处理器(processor)301、存储器(memory)302和总线303；其中，处理器301和存储器302通过总线303完成相互间的通信；处理器301用于调用存储在存储器302中并可在处理器301上运行的计算机程序指令，以执行上述各方法实施例所提供的视频OSD的显示方法，例如包括：通过支持HTML5的浏览器与流媒体服务器建立基于WebSocket协议的数据通道，通过基于WebSocket协议的数据通道从流媒体服务器获取视频流数据和OSD数据；通过支持HTML5的浏览器将视频流数据转换成mp4格式的数据后缓存至视频缓冲池中，将OSD数据存储至OSD缓冲池中；当视频缓冲池满时，通过支持HTML5的浏览器对mp4格式的数据进行解码和渲染，从OSD缓冲池中筛选出与当前渲染的视频帧图像相匹配的OSD数据，根据与当前渲染的视频帧图像相匹配的OSD数据所携带的信息绘制成图像后叠加在当前渲染的视频帧图像的HTML5video标签上。

本发明另一实施例公开一种计算机程序产品，计算机程序产品包括存储在非暂态计算机可读存储介质上的计算机程序，计算机程序包括程序指令，当程序指令被计算机执行时，计算机能够执行上述各方法实施例所提供的视频OSD的显示方法，例如包括：通过支持HTML5的浏览器与流媒体服务器建立基于WebSocket协议的数据通道，通过基于WebSocket协议的数据通道从流媒体服务器获取视频流数据和OSD数据；通过支持HTML5的浏览器将视频流数据转换成mp4格式的数据后缓存至视频缓冲池中，将OSD数据存储至OSD缓冲池中；当视频缓冲池满时，通过支持HTML5的浏览器对mp4格式的数据进行解码和渲染，从OSD缓冲池中筛选出与当前渲染的视频帧图像相匹配的OSD数据，根据与当前渲染的视频帧图像相匹配的OSD数据所携带的信息绘制成图像后叠加在当前渲染的视频帧图像的HTML5video标签上。

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

本发明另一实施例提供一种非暂态计算机可读存储介质，非暂态计算机可读存储介质存储计算机指令，计算机指令使计算机执行上述各方法实施例所提供的视频OSD的显示方法，例如包括：通过支持HTML5的浏览器与流媒体服务器建立基于WebSocket协议的数据通道，通过基于WebSocket协议的数据通道从流媒体服务器获取视频流数据和OSD数据；通过支持HTML5的浏览器将视频流数据转换成mp4格式的数据后缓存至视频缓冲池中，将OSD数据存储至OSD缓冲池中；当视频缓冲池满时，通过支持HTML5的浏览器对mp4格式的数据进行解码和渲染，从OSD缓冲池中筛选出与当前渲染的视频帧图像相匹配的OSD数据，根据与当前渲染的视频帧图像相匹配的OSD数据所携带的信息绘制成图像后叠加在当前渲染的视频帧图像的HTML5video标签上。

以上所描述的装置实施例仅仅是示意性的，其中作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。本领域普通技术人员在不付出创造性的劳动的情况下，即可以理解并实施。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到各实施方式可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件。这样的理解，上述技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品可以存储在计算机可读存储介质中，如ROM/RAM、磁碟、光盘等，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行上述各个实施例或者实施例的某些部分的方法。

最后应说明的是：以上实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围。

Claims (9)

1.一种基于HTML5的视频OSD的显示方法，其特征在于，包括：

通过支持HTML5的浏览器与流媒体服务器建立基于WebSocket协议的数据通道，通过所述基于WebSocket协议的数据通道从所述流媒体服务器获取视频流数据和OSD数据；

通过所述支持HTML5的浏览器将所述视频流数据转换成mp4格式的数据后缓存至视频缓冲池中，将所述OSD数据存储至OSD缓冲池中；

当所述视频缓冲池满时，通过所述支持HTML5的浏览器对所述mp4格式的数据进行解码和渲染，从所述OSD缓冲池中筛选出与当前渲染的视频帧图像时间戳相等的OSD数据，根据所述与当前渲染的视频帧图像相匹配的OSD数据所携带的信息绘制成相应图像后叠加在所述当前渲染的视频帧图像的HTML5 video标签上。

2.根据权利要求1所述的方法，其特征在于，通过所述支持HTML5的浏览器将所述视频流数据转换成mp4格式的数据的具体步骤包括：

通过解析所述视频流数据，按照帧的顺序获取所述视频流数据中的每一视频帧图像及每一视频帧图像的时间戳；

对于每一视频帧图像，将所述视频帧图像封装成mp4格式的数据，并将所述视频帧图像的时间戳按照帧的顺序添加至视频时间戳数组中；

其中，所述视频时间戳数组，为预先建立的一个数组，用于保存各视频帧图像的时间戳；视频帧图像的时间戳，指所述视频帧图像对应的时间。

3.根据权利要求2所述的方法，其特征在于，若所述视频流数据中还包括音频数据，则将所述各视频帧图像按照时间顺序封装成mp4格式的数据之前，还包括：

通过解析所述视频流数据，按照帧的顺序获取所述视频流数据中的每一音频帧的音频数据及每一音频帧的音频数据的时间戳；

相应地，对于每一视频帧图像，将所述视频帧图像封装成mp4格式的数据具体还包括：

将所述视频帧图像及所述视频帧图像对应的音频帧的音频数据，封装成mp4格式的音频数据。

4.根据权利要求2所述的方法，其特征在于，从所述OSD缓冲池中筛选出与当前渲染的视频帧图像相匹配的OSD数据的具体步骤包括：

获取所述当前渲染的视频帧图像的时间戳；

每隔预设时间将所述当前渲染的视频帧图像的时间戳与所述OSD缓冲池中各OSD数据的时间戳进行比对；

若通过比对获知所述OSD缓冲池中存在时间戳与所述当前渲染的视频帧图像的时间戳相等的OSD数据，则将所述时间戳与所述当前渲染的视频帧图像的时间戳相等的OSD数据，作为与所述当前渲染的视频帧图像相匹配的OSD数据。

5.根据权利要求4所述的方法，其特征在于，所述获取所述当前渲染的视频帧图像的时间戳的具体步骤包括：

删除所述视频时间戳数组中已渲染的视频帧图像对应的元素，对于所述当前渲染的视频帧图像，将所述视频时间戳数组中的第一个元素，确定为所述当前渲染的视频帧图像的时间戳。

6.根据权利要求1至5任一所述的方法，其特征在于，所述根据所述与当前渲染的视频帧图像相匹配的OSD数据所携带的信息绘制成图像后叠加在所述当前渲染的视频帧图像的HTML5 video标签上的具体步骤包括：

通过文档对象模型和层叠样式表3级，或者通过HTML5 Canvas，根据所述与当前渲染的视频帧图像相匹配的OSD数据绘制成图像后叠加在所述当前渲染的视频帧图像的HTML5video标签上。

7.一种基于HTML5的视频OSD的显示装置，其特征在于，包括：

数据获取模块，用于通过支持HTML5的浏览器与流媒体服务器建立基于WebSocket协议的数据通道，通过所述基于WebSocket协议的数据通道从所述流媒体服务器获取视频流数据和OSD数据；

数据缓冲模块，用于通过所述支持HTML5的浏览器将所述视频流数据转换成mp4格式的数据后缓存至视频缓冲池中，将所述OSD数据存储至OSD缓冲池中；

视频解码渲染和OSD显示模块，用于当所述视频缓冲池满时，通过所述支持HTML5的浏览器对所述mp4格式的数据进行解码和渲染，从所述OSD缓冲池中筛选出与当前渲染的视频帧图像相匹配的OSD数据，根据所述与当前渲染的视频帧图像相匹配的OSD数据所携带的信息绘制成图像后叠加在所述当前渲染的视频帧图像的HTML5 video标签上。

8.一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述程序时实现如权利要求1至6任一项所述的基于HTML5的视频OSD的显示方法的步骤。

9.一种非暂态计算机可读存储介质，其上存储有计算机程序，其特征在于，该计算机程序被处理器执行时实现如权利要求1至6任一项所述的基于HTML5的视频OSD的显示方法的步骤。