基于HTML5的视频OSD的显示方法及装置.pdf

《基于HTML5的视频OSD的显示方法及装置.pdf》由会员分享，可在线阅读，更多相关《基于HTML5的视频OSD的显示方法及装置.pdf（14页完成版）》请在专利查询网上搜索。

1、(19)中华人民共和国国家知识产权局 (12)发明专利申请 (10)申请公布号 (43)申请公布日 (21)申请号 201910277245.1 (22)申请日 2019.04.08 (71)申请人 北京东方国信科技股份有限公司 地址 100102 北京市朝阳区创达三路1号院 1号楼东方国信大厦 (72)发明人 张建荣石峰 (74)专利代理机构 北京路浩知识产权代理有限 公司 11002 代理人 王庆龙苗晓静 (51)Int.Cl. H04N 21/4782(2011.01) H04N 21/431(2011.01) H04N 21/443(2011.01) H04N 21/8547(2011。

2、.01) H04N 21/8543(2011.01) H04N 21/858(2011.01) H04N 5/265(2006.01) (54)发明名称 一种基于HTML5的视频OSD的显示方法及装 置 (57)摘要 本发明实施例提供一种基于HTML5的视频 OSD的显示方法及装置。 其中方法包括： 通过支持 HTML5的浏览器与流媒体服务器建立基于 WebSocket协议的数据通道， 通过数据通道从流 媒体服务器获取视频流数据和OSD数据； 将获得 到的私有协议视频数据转换成mp4格式的数据后 缓存至视频缓冲池中， 将OSD数据存储至OSD缓冲 池中； 当视频缓冲池满时， 通过支持HTML5。

3、的浏览 器对mp4格式的数据进行解码和渲染， 从OSD缓冲 池中筛选出与当前屏幕渲染的视频帧图像时间 戳相等的OSD数据， 根据与当前渲染的视频帧图 像相匹配的OSD数据所携带的信息绘制成相应图 像后叠加在所述当前渲染的视频帧图像的HTML5 video标签上。 本发明实施例提供的视频OSD的显 示方法及装置， 能实现只通过浏览器同步显示视 频和OSD信息图像。 权利要求书2页 说明书9页 附图2页 CN 109889907 A 2019.06.14 CN 109889907 A 1.一种基于HTML5的视频OSD的显示方法， 其特征在于， 包括： 通过支持HTML5的浏览器与流媒体服务器建立。

4、基于WebSocket协议的数据通道， 通过所 述基于WebSocket协议的数据通道从所述流媒体服务器获取视频流数据和OSD数据； 通过所述支持HTML5的浏览器将所述视频流数据转换成mp4格式的数据后缓存至视频 缓冲池中， 将所述OSD数据存储至OSD缓冲池中； 当所述视频缓冲池满时， 通过所述支持HTML5的浏览器对所述mp4格式的数据进行解码 和渲染， 从所述OSD缓冲池中筛选出与当前渲染的视频帧图像时间戳相等的OSD数据， 根据 所述与当前渲染的视频帧图像相匹配的OSD数据所携带的信息绘制成相应图像后叠加在所 述当前渲染的视频帧图像的HTML5 video标签上。 2.根据权利要求1。

5、所述的方法， 其特征在于， 通过所述支持HTML5的浏览器将所述视频 流数据转换成mp4格式的数据的具体步骤包括： 通过解析所述视频流数据， 按照帧的顺序获取所述视频流数据中的每一视频帧图像及 每一视频帧图像的时间戳； 对于每一视频帧图像， 将所述视频帧图像封装成mp4格式的数据， 并将所述视频帧图像 的时间戳按照帧的顺序添加至视频时间戳数组中； 其中， 所述视频时间戳数组， 为预先建立的一个数组， 用于保存各视频帧图像的时间 戳； 视频帧图像的时间戳， 指所述视频帧图像对应的时间。 3.根据权利要求2所述的方法， 其特征在于， 若所述视频流数据中还包括音频数据， 则 将所述各视频帧图像按照时。

6、间顺序封装成mp4格式的数据之前， 还包括： 通过解析所述视频流数据， 按照帧的顺序获取所述视频流数据中的每一音频帧的音频 数据及每一音频帧的音频数据的时间戳； 相应地， 对于每一视频帧图像， 将所述视频帧图像封装成mp4格式的数据具体还包括： 将所述视频帧图像及所述视频帧图像对应的音频帧的音频数据， 封装成mp4格式的音 频数据。 4.根据权利要求2所述的方法， 其特征在于， 从所述OSD缓冲池中筛选出与当前渲染的 视频帧图像相匹配的OSD数据的具体步骤包括： 获取所述当前渲染的视频帧图像的时间戳； 每隔预设时间将所述当前渲染的视频帧图像的时间戳与所述OSD缓冲池中各OSD数据 的时间戳进行。

7、比对； 若通过比对获知所述OSD缓冲池中存在时间戳与所述当前渲染的视频帧图像的时间戳 相等的OSD数据， 则将所述时间戳与所述当前渲染的视频帧图像的时间戳相等的OSD数据， 作为与所述当前渲染的视频帧图像相匹配的OSD数据。 5.根据权利要求4所述的方法， 其特征在于， 所述获取所述当前渲染的视频帧图像的时 间戳的具体步骤包括： 删除所述视频时间戳数组中已渲染的视频帧图像对应的元素， 对于所述当前渲染的视 频帧图像， 将所述视频时间戳数组中的第一个元素， 确定为所述当前渲染的视频帧图像的 时间戳。 6.根据权利要求1至5任一所述的方法， 其特征在于， 所述根据所述与当前渲染的视频 帧图像相匹配。

8、的OSD数据所携带的信息绘制成图像后叠加在所述当前渲染的视频帧图像的 权利要求书 1/2 页 2 CN 109889907 A 2 HTML5 video标签上的具体步骤包括： 通过文档对象模型和层叠样式表3级， 或者通过HTML5 Canvas， 根据所述与当前渲染的 视频帧图像相匹配的OSD数据绘制成图像后叠加在所述当前渲染的视频帧图像的HTML5 video标签上。 7.一种基于HTML5的视频OSD的显示装置， 其特征在于， 包括： 数据获取模块， 用于通过支持HTML5的浏览器与流媒体服务器建立基于WebSocket协议 的数据通道， 通过所述基于WebSocket协议的数据通道从所。

9、述流媒体服务器获取视频流数 据和OSD数据； 数据缓冲模块， 用于通过所述支持HTML5的浏览器将所述视频流数据转换成mp4格式的 数据后缓存至视频缓冲池中， 将所述OSD数据存储至OSD缓冲池中； 视频解码渲染和OSD显示模块， 用于当所述视频缓冲池满时， 通过所述支持HTML5的浏 览器对所述mp4格式的数据进行解码和渲染， 从所述OSD缓冲池中筛选出与当前渲染的视频 帧图像相匹配的OSD数据， 根据所述与当前渲染的视频帧图像相匹配的OSD数据所携带的信 息绘制成图像后叠加在所述当前渲染的视频帧图像的HTML5 video标签上。 8.一种电子设备， 包括存储器、 处理器及存储在存储器上并。

10、可在处理器上运行的计算 机程序， 其特征在于， 所述处理器执行所述程序时实现如权利要求1至6任一项所述的基于 HTML5的视频OSD的显示方法的步骤。 9.一种非暂态计算机可读存储介质， 其上存储有计算机程序， 其特征在于， 该计算机程 序被处理器执行时实现如权利要求1至6任一项所述的基于HTML5的视频OSD的显示方法的 步骤。 权利要求书 2/2 页 3 CN 109889907 A 3 一种基于HTML5的视频OSD的显示方法及装置 技术领域 0001 本发明涉及视频处理技术领域， 更具体地， 涉及一种基于HTML5的视频OSD信息的 显示方法及装置。 背景技术 0002 在视频监控的应。

11、用中通常会在视频监控画面中嵌入OSD(On Screen Display)信 息， 通过OSD数据， 可以使该视频的观看者直观地了解视频序列中记录的事件发生的时间和 地点等信息， 记录这些信息极大的方便了对图像序列的辨识和图像内容的分析。 当然OSD数 据不局限于事件发生的时间和地点信息， 还可以是业务场景需要的信息， 例如人脸识别、 车 辆识别OSD数据， 包含视频帧图像中的人脸、 车辆出现的位置、 尺寸等信息。 0003 目前在浏览器里显示监控视频以及OSD数据的方法是在网页中安装插件， 通过该 插件播放视频流并显示OSD数据。 常用的插件包括OCX插件(OLE Control eXten。

12、sion， 对象 类别扩充组件)和flash插件。 但是， OCX插件推广度低， 在播放时， 用户需要下载OCX插件， 然 后在浏览器中安装， 而且在安装过程中需要进行验证， 容易被安全软件拦截， 甚至由于兼容 性问题， 可能引起注册模块调用失败等错误， 导致安装失败， 操作十分繁琐， 而且只支持IE 浏览器， chrome、 firefox等浏览器均不能支持。 Flash插件虽然能克服OCX插件的问题， 但是 微软宣布， 将对VML、 VB Script、 ToolBars、 BHOs、 ActiveX等旧扩展程序不再支持， Chrome也 放弃了NPAPI。 各大浏览器厂商都降低了对fla。

13、sh插件的支持， flash插件也在逐步被主流浏 览器淘汰。 发明内容 0004 由于主流浏览器对各种旧扩展程序或插件的逐渐不支持和淘汰， 导致浏览器上视 频无法播放和OSD无法显示。 为了解决这个问题， 本发明实施例提供一种基于HTML5的视频 OSD的显示方法及装置。 0005 第一方面， 本发明实施例提供一种基于HTML5的视频OSD的显示方法， 包括： 0006 通过支持HTML5的浏览器与流媒体服务器建立基于WebSocket协议的数据通道， 通 过所述基于WebSocket协议的数据通道从所述流媒体服务器获取视频流数据和OSD数据； 0007 通过所述支持HTML5的浏览器将所述视。

14、频流数据转换成mp4格式的数据后缓存至 视频缓冲池中， 将所述OSD数据存储至OSD缓冲池中； 0008 当所述视频缓冲池满时， 通过所述支持HTML5的浏览器对所述mp4格式的数据进行 解码和渲染， 从所述OSD缓冲池中筛选出与当前渲染的视频帧图像时间戳相等的OSD数据， 根据所述与当前渲染的视频帧图像相匹配的OSD数据所携带的信息绘制成相应图像后叠加 在所述当前渲染的视频帧图像的HTML video标签上。 0009 第二方面， 本发明实施例提供一种基于HTML5的视频OSD的显示装置， 包括： 0010 数据获取模块， 用于通过支持HTML5的浏览器与流媒体服务器建立基于WebSocke。

15、t 协议的数据通道， 通过所述基于WebSocket协议的数据通道从所述流媒体服务器获取视频 说明书 1/9 页 4 CN 109889907 A 4 流数据和OSD数据； 0011 数据缓冲模块， 用于通过所述支持HTML5的浏览器将所述视频流数据转换成mp4格 式的数据后缓存至视频缓冲池中， 将所述OSD数据存储至OSD缓冲池中； 0012 视频解码渲染和OSD显示模块， 用于当所述视频缓冲池满时， 通过所述支持HTML5 的浏览器对所述mp4格式的数据进行解码和渲染， 根据所述与当前渲染的视频帧图像相匹 配的OSD数据所携带的信息绘制成相应图像后叠加在所述当前渲染的视频帧图像的 HTML。

16、5video标签上。 0013 第三方面， 本发明实施例提供一种电子设备， 包括存储器、 处理器及存储在存储器 上并可在处理器上运行的计算机程序， 执行所述程序时实现如第一方面的各种可能的实现 方式中任一种可能的实现方式所提供的基于HTML5的视频OSD的显示方法的步骤。 0014 第四方面， 本发明实施例提供一种非暂态计算机可读存储介质， 其上存储有计算 机程序， 该计算机程序被处理器执行时实现如第一方面的各种可能的实现方式中任一种可 能的实现方式所提供的基于HTML5的视频OSD的显示方法的步骤。 0015 本发明实施例提供的视频OSD的显示方法及装置， 通过支持HTML5的浏览器实现视 。

17、频播放时OSD数据的同步显示， 客户端无须安装插件， 解决了OCX、 FLASH等插件逐步被浏览 器淘汰， 视频无法播放和OSD无法显示的问题。 附图说明 0016 为了更清楚地说明本发明实施例或现有技术中的技术方案， 下面将对实施例或现 有技术描述中所需要使用的附图作一简单地介绍， 显而易见地， 下面描述中的附图是本发 明的一些实施例， 对于本领域普通技术人员来讲， 在不付出创造性劳动的前提下， 还可以根 据这些附图获得其他的附图。 0017 图1为根据本发明实施例提供的基于HTML5的视频OSD的显示方法的流程示意图； 0018 图2为根据本发明实施例提供的基于HTML5的视频OSD的显示。

18、装置的结构示意图； 0019 图3为根据本发明实施例提供的电子设备的实体结构示意图。 具体实施方式 0020 为使本发明实施例的目的、 技术方案和优点更加清楚， 下面将结合本发明实施例 中的附图， 对本发明实施例中的技术方案进行清楚、 完整地描述， 显然， 所描述的实施例是 本发明一部分实施例， 而不是全部的实施例。 基于本发明中的实施例， 本领域普通技术人员 在没有作出创造性劳动前提下所获得的所有其他实施例， 都属于本发明保护的范围。 0021 为了克服现有技术的上述问题， 本发明实施例提供一种基于HTML5的视频OSD的显 示方法及装置， 其发明构思是， 利用HTML5支持网页端的音视频等。

19、多媒体功能的特性， 基于 支持HTML5的浏览器实现视频的播放和OSD的显示， 而不需要安装插件来实现。 0022 图1为根据本发明实施例提供的基于HTML5的视频OSD的显示方法的流程示意图。 如图1所示， 该方法包括： 步骤S101、 通过支持HTML5的浏览器与流媒体服务器建立基于 WebSocket协议的数据通道， 通过基于WebSocket协议的数据通道从流媒体服务器获取视频 流数据和OSD数据。 0023 需要说明的是， 本发明实施例提供的视频OSD的显示方法的执行主体为安装了支 说明书 2/9 页 5 CN 109889907 A 5 持HTML5的浏览器的用户终端， 包括安装了。

20、支持HTML5的浏览器的移动终端或计算机等。 0024 具体地， 流媒体服务器是指可以实时向客户端推送摄像头视频数据的后台服务 器。 支持HTML5的浏览器可以基于WebSocket协议与流媒体服务器建立通信， 支持HTML5的浏 览器与流媒体服务器建立数据通道之后， 通过该数据通道向流媒体服务器发送视频数据请 求以获取视频流数据。 0025 WebSocket协议是基于TCP的一种新的网络协议。 它实现了浏览器与服务器全双工 (full-duplex)通信-允许服务器主动发送信息给客户端。 0026 HTML5是用于取代1999年所制定的HTML 4.01和XHTML1.0标准的HTML(标。

21、准通用标 记语言下的一个应用)标准版本， 目前大部分浏览器已经支持某些HTML5技术。 HTML5是最新 的HTML标准。 HTML5是专门为承载丰富的web内容而设计的， 并且无需额外插件。 HTML5拥有 新的语义、 图形以及多媒体元素。 0027 HTML5提供的新元素和新的API简化了web应用程序的搭建。 0028 HTML5是跨平台的， 被设计为在不同类型的硬件(PC、 平板、 手机、 电视机等等)之上 运行。 0029 视频流数据， 可以为监控视频流数据。 0030 OSD数据为可显示于屏幕的信息。 OSD数据携带有感兴趣对象的信息和OSD数据的 时间戳。 根据采集视频流数据的不。

22、同场景， 感兴趣对象可以包括地点、 车辆、 人脸和物品中 的至少一种。 相应地， 感兴趣对象的信息， 可以包括地点的相关信息、 建筑物的相关信息、 人 脸的相关信息和物品的相关信息中的至少一种。 相关信息， 至少包括感兴趣对象在图像中 的坐标信息和/或尺寸信息、 感兴趣对象的名称或感兴趣对象的编号。 感兴趣对象的信息， 可以在视频源端将其采集的原始视频数据上传至流媒体服务器时， 由流媒体服务器根据目 标检测和识别算法获得。 OSD数据的时间戳是指视频帧图像画面中感兴趣对象(如人脸或车 辆等物品)出现的时刻信息。 0031 需要说明的是， 在本发明实施例中OSD数据已经预先存储在流媒体服务器中。。

23、 0032 支持HTML5的浏览器与流媒体服务器建立数据通道之后， 还通过该数据通道向流 媒体服务器发送OSD数据请求以获取OSD数据。 0033 步骤S102、 通过支持HTML5的浏览器将视频流数据转换成mp4格式的数据后缓存至 视频缓冲池中， 将OSD数据存储至OSD缓冲池中。 0034 具体地， 由于视频流数据是经过私有协议编码的， 不能直接被支持HTML5的浏览器 进行解码和播放， 因此， 支持HTML5的浏览器获取视频流数据之后， 需要将获取的视频流数 据实时按帧进行mp4格式的封装处理， 最终将视频流数据转换成mp4格式的数据。 这样做的 好处在于， 不但实现了视频播放， 而且还。

24、保证了视频播放的实时性， 大大减少了直播延迟。 0035 将经过mp4格式转码处理后的视频流数据和OSD数据均先缓存下来， 目的是为了实 现在视频流数据被解码和渲染的同时筛选出与当前渲染的视频帧图像匹配的OSD数据， 然 后将筛选出的OSD数据绘制成图像叠加在正在播放视频的HTML5video标签上。 0036 在具体实施时， 支持HTML5的浏览器会设置一定的缓冲时长， 一般不超过2s， 在视 频缓冲池满后， 才开始播放mp4格式的数据。 0037 步骤S103、 当视频缓冲池满时， 通过支持HTML5的浏览器对mp4格式的数据进行解 码和渲染， 从OSD缓冲池中筛选出与当前渲染的视频帧图像。

25、相匹配的OSD数据， 根据与当前 说明书 3/9 页 6 CN 109889907 A 6 渲染的视频帧图像相匹配的OSD数据所携带的信息绘制成图像后叠加在当前渲染的视频帧 图像的HTML5video标签上。 0038 具体地， 当视频缓冲池满时， 开始对mp4格式的数据进行解码和渲染， 并且设置一 个OSD叠加计时器开始计时， 每隔预设时间， 从OSD缓冲池中尝试筛选出与当前渲染的视频 帧图像相匹配的人脸识别OSD数据， 其中， 预设时间一般设置为一个极小的值， 从而实现OSD 数据的同步显示。 例如， 每隔10毫秒从OSD缓冲池内筛选出时间戳与当前渲染的帧时间戳相 等的OSD数据， 并根据。

26、OSD数据中包含的坐标信息在当前渲染的视频帧图像上相应位置叠加 感兴趣对象的图像信息， 从而实现OSD数据在视频播放时的同步显示。 0039 本发明实施例通过支持HTML5的浏览器实现视频播放时OSD数据的同步显示， 客户 端无须安装插件， 大大提高了用户体验， 解决了在Ocx、 flash等插件被淘汰的情况下， 视频 无法播放以及OSD无法显示的问题。 0040 基于上述各实施例的内容， 通过支持HTML5的浏览器将视频流数据转换成mp4格式 的数据的具体步骤包括： 通过解析视频流数据， 按照帧的顺序获取视频流数据中的每一视 频帧图像及每一视频帧图像的时间戳。 0041 具体地， 由于视频流。

27、数据是经过私有协议编码， 例如安防领域的视频监控， 常采用 H.264系列视频编解码标准进行编码。 0042 通过解析基于WebSocket协议从流媒体服务器获得的每个数据包， 读取28个字节 头后， 就可以获得H.264裸流的一个NALU单元(网络提取层单元)。 0043 网络提取层(Network Abstraction Layer， NAL)， 以NAL封包为单位的方式来做为 VCL编译码的运算单位。 0044 浏览器刚开始连接到服务器， 若未获取到视频数据单元类型为7和8的NALU， 忽略 单元类型为其他类型的NALU， 直至获取到单元类型为7和8的NALU。 0045 获取单元类型为。

28、7和8的NALU之后， 可以解析出序列参数集(Sequence Paramater Set， SPS)和图像参数集(Picture Paramater Set， PPS)。 根据SPS和PPS， 以及紧接着的I帧 就可以封装出mp4格式封装要求的Initialization Segments。 0046 之后忽略单元类型为7和8的NALU， 只解析单元类型为5(关键帧)和1等其他类型的 NALU单元， 获得数据后将他们封装成mp4格式封装要求的media Segments。 0047 若封装的多媒体仅包括视频， 则可以按照帧的顺序依次获取到视频流数据中的每 一视频帧图像及每一视频帧图像的时间戳。

29、。 0048 对于每一视频帧图像， 将视频帧图像封装成mp4格式的数据， 并将视频帧图像的时 间戳按照帧的顺序添加至视频时间戳数组中。 0049 具体地， 对于获取到的每一视频帧图像， 可以按照mp4格式中的视频编码格式， 将 该视频帧图像重新封装成mp4格式的数据。 0050 对于该视频帧图像的时间戳， 则可以按照帧的顺序， 将该视频帧图像的时间戳添 加至视频时间戳数组中。 0051 视频时间戳数组， 为预先建立的一个数组， 用于保存各视频帧图像的时间戳。 视频 帧图像的时间戳， 指该视频帧图像对应的时间。 0052 视频时间戳数组中， 视频帧图像的时间戳按照帧的顺序排列。 例如， 视频流数。

30、据中 第一视频帧图像的时间戳为视频时间戳数组中的第一个元素， 第二视频帧图像的时间戳为 说明书 4/9 页 7 CN 109889907 A 7 视频时间戳数组中的第二个元素， 依此类推。 0053 本发明实施例通过将视频流数据实时转换成mp4格式的数据， 能保证视频播放的 实时性， 大大减少直播延迟。 0054 基于上述各实施例的内容， 若视频流数据中还包括音频数据， 则将各视频帧图像 按照时间顺序封装成mp4格式的数据之前， 还包括： 通过解析视频流数据， 按照帧的顺序获 取视频流数据中的每一音频帧的音频数据及每一音频帧的音频数据的时间戳。 0055 需要说明的是， 由于视频流数据是经过私。

31、有协议编码， 该协议除了支持视频编码， 还可能支持音频编码， 例如AAC音频格式。 因此， 从流媒体服务器获取的视频流数据除了包 括视频数据之外， 还可以包括音频数据。 0056 若视频流数据中还包括音频数据， 上述实施例中对视频流数据的解析过程中， 除 了可以按照帧的顺序依次获取到视频流数据中的每一视频帧图像及每一视频帧图像的时 间戳， 还可以按照帧的顺序依次获取到视频流数据中的每一音频帧的音频数据及每一音频 帧的音频数据的时间戳。 0057 相应地， 对于每一视频帧图像， 将视频帧图像封装成mp4格式的数据具体还包括： 将视频帧图像及视频帧图像对应的音频帧的音频数据， 封装成mp4格式的音。

32、频数据。 0058 由于mp4格式也包括音频编码格式， 将视频帧图像封装成mp4格式的数据的同时， 将该视频帧图像和该视频帧图像对应的音频帧的音频数据一起封装成mp4格式要求的音频 数据格式， 例如AAC。 0059 该视频帧图像对应的音频帧的音频数据， 指时间戳与该视频帧图像的时间戳相等 的音频帧的音频数据。 0060 本发明实施例通过将视频流数据转换成mp4格式的数据， 能适用于同时包括音频 和视频的视频流数据， 能提高视频OSD的显示方法的适用范围， 更有益于视频OSD显示的应 用和推广。 0061 基于上述各实施例的内容， 将mp4格式的数据缓存至视频缓冲池以及解码渲染视 频和计时器筛。

33、选OSD信息的具体步骤包括： 创建mediaSource对象， 通过createObjectURL函 数将mediaSource对象与HTML 5的video标签进行连接。 0062 具体地， 支持HTML5的浏览器通过MediaSource接口创建mediaSource对象。 0063 MediaSource是一个表示媒体资源HTMLMediaElement对象的接口。 MediaSource对 象可以附着在HTMLMediaElement在客户端进行视频播放。 0064 JavaScript可以通过URL.createObjectURL方法(具体使用createObjectURL函 数)生。

34、成HTML 5的video标签， 将HTML 5的video标签与mediaSource对象进行连接， 实现二 者的绑定。 0065 具体地， 支持HTML5的浏览器通过mediaSource对象可以创建视频和音频各一个 SourceBuffer。 0066 接下来， 创建音频片段数组来存放格式转化后的音频数据， 创建视频片段数组来 存放格式转化后的视频数据。 0067 可以根据缓冲长度阈值， 在恰当时机把转换后重新封装的MP4视频数据、 音频数据 分别添加到视频SourceBuffer和音频SourceBuffer。 0068 本发明实施例通过Media Source Extensions此。

35、HTML 5API实现播放mp4格式的数 说明书 5/9 页 8 CN 109889907 A 8 据。 0069 基于上述各实施例的内容， 从OSD缓冲池中筛选出与当前渲染的视频帧图像相匹 配的OSD数据的具体步骤包括： 获取当前渲染的视频帧图像的时间戳。 0070 具体地， 对于当前渲染的视频帧图像， 获取该视频帧图像的时间戳。 0071 每隔预设时间将当前渲染的视频帧图像的时间戳与OSD缓冲池中各OSD数据的时 间戳进行比对。 0072 对当前渲染的视频帧图像与OSD数据的匹配， 是将当前渲染的视频帧图像的时间 戳， 分别与OSD缓冲池中每一OSD数据的时间戳进行比对实现的。 0073 。

36、若通过比对获知OSD缓冲池中存在时间戳与当前渲染的视频帧图像的时间戳相等 的OSD数据， 则将时间戳与当前渲染的视频帧图像的时间戳相等的OSD数据， 作为与当前渲 染的视频帧图像相匹配的OSD数据。 0074 具体地， 若比对结果为OSD缓冲池中的某一OSD数据的时间戳与当前渲染的视频帧 图像的时间戳相等， 说明该OSD数据与当前渲染的视频帧图像相匹配， 将该OSD数据作为与 当前渲染的视频帧图像相匹配的OSD数据。 0075 OSD缓冲池中存在时间戳等于当前渲染的视频帧图像的时间戳的OSD数据， 则在当 前渲染的视频帧图像的视频上层开始叠加OSD信息绘制成的图像， 以显示OSD信息。 007。

37、6 本发明实施例根据时间戳是否相等， 进行当前渲染的视频帧图像与OSD数据的匹 配， 能保证视频播放时正确地同步显示OSD数据。 0077 基于上述各实施例的内容， 获取当前渲染的视频帧图像的时间戳的具体步骤包 括： 删除视频时间戳数组中已渲染的视频帧图像对应的元素， 对于当前渲染的视频帧图像， 将视频时间戳数组中的第一个元素， 确定为当前渲染的视频帧图像的时间戳。 0078 具体地， 可以通过支持HTML5的浏览器的函数计算出当前渲染的视频帧图像相较 于上次计时器执行时刻已经播放的帧数n。 0079 例如， Chrome浏览器可以通过video .webkitDecodedFrameCoun。

38、t和 video.webkitDroppedFrameCount获得当前渲染的视频帧从开始播放到现在已经播放的帧 数n。 0080 获取当前渲染的视频帧图像， 相较于上次计时器执行时刻已经播放的帧数n， 将视 频时间戳数组中的前n个元素删除， 则视频时间戳数组中第一个元素， 即为当前渲染的视频 帧图像的时间戳。 0081 从视频时间戳数组中删除已经播放过的视频帧图像的时间戳， 即对视频时间戳数 组执行删除其中的元素， 删除已播放完的视频帧图像的时间戳。 这种情况下， 对于当前渲染 的视频帧图像， 当前视频时间戳数组中的第一个元素即为当前渲染的视频帧图像的时间 戳。 0082 本发明实施例根据视。

39、频时间戳数组获取当前渲染的视频帧图像的时间戳， 能正确 获取当前渲染的视频帧图像的时间戳， 从而能获得准确的OSD数据匹配结果， 能保证视频播 放时正确的同步显示OSD数据。 0083 基于上述各实施例的内容， 根据与当前渲染的视频帧图像相匹配的OSD数据所携 带的信息绘制成图像后叠加在当前渲染的视频帧图像的HTML5video标签上的具体步骤包 括： 通过文档对象模型和层叠样式表3级， 或者通过HTML5Canvas， 根据与当前渲染的视频帧 说明书 6/9 页 9 CN 109889907 A 9 图像相匹配的OSD数据所携带的信息绘制成图像后叠加在当前渲染的视频帧图像的 HTML5vid。

40、eo标签上。 0084 具体地， 将当前渲染的视频帧图像相匹配的OSD数据绘制成图像后叠加在当前渲 染的视频帧图像上， 至少可以通过以下两种方法中的任一种实现。 0085 第一种方法是采用DOM+CSS3的方式， 即采用文档对象模型和层叠样式表3级配合 的方式。 0086 文档对象模型(Document Object Model， 简称DOM)， 是W3C组织推荐的处理可扩展 标志语言的标准编程接口。 在网页上， 组织页面(或文档)的对象被组织在一个树形结构中， 用来表示文档中对象的标准模型就称为DOM。 0087 层叠样式表3级(Cascading Style Sheets Level 3，。

41、 CSS3)是CSS(层叠样式表， Cascading Style Sheets)技术的升级版本。 CSS3原理的同CSS， 是在网页中自定义样式表 的选择符， 然后在网页中大量引用这些选择符。 0088 CSS3增加的新特征有很多， 例如圆角效果、 图形化边界、 块阴影与文字阴影、 使用 RGBA实现透明效果、 渐变效果、 使用Font-Face实现定制字体、 多背景图、 文字或图像的变 形处理(旋转、 缩放、 倾斜、 移动)、 多栏布局、 媒体查询等， 从而可以结合DOM， 实现对将当前 渲染的视频帧图像相匹配的OSD数据绘制成图像叠加在当前渲染的视频帧图像上。 0089 第二种方法是采用。

42、HTML5Canvas的方式。 0090 HTML5Canvas(HTML5画布)是由HTML代码配合高度和宽度属性而定义出的可绘制 区域。 JavaScript代码可以访问该区域， 类似于其他通用的二维API， 通过一套完整的绘图 函数来动态生成图形。 0091 HTML 5的canvas标签是HTML5新增的一个可以使用脚本(通常为JavaScript)在其 中绘制图像的HTML元素。 它可以用来制作照片集或者制作动画， 还可以进行实时视频处理 和渲染。 0092 本发明实施例通过文档对象模型和层叠样式表3级， 或通过HTML5Canvas将当前渲 染的视频帧图像相匹配的OSD数据绘制成图。

43、像后叠加在当前渲染的视频帧图像上， 能实现 视频播放时OSD数据的同步显示。 0093 图2为根据本发明实施例提供的基于HTML5的视频OSD的显示装置的结构示意图。 基于上述各实施例的内容， 如图2所示， 该装置包括数据获取模块201、 数据缓冲模块202和 视频解码渲染和OSD显示模块203， 其中： 0094 数据获取模块201， 用于通过支持HTML5的浏览器与流媒体服务器建立基于 WebSocket协议的数据通道， 通过基于WebSocket协议的数据通道从流媒体服务器获取视频 流数据和OSD数据； 0095 数据缓冲模块202， 用于通过支持HTML5的浏览器将视频流数据转换成mp。

44、4格式的 数据后缓存至视频缓冲池中， 将OSD数据存储至OSD缓冲池中； 0096 视频解码渲染和OSD显示模块203， 用于当视频缓冲池满时， 通过支持HTML5的浏览 器对mp4格式的数据进行解码和渲染， 从OSD缓冲池中筛选出与当前渲染的视频帧图像相匹 配的OSD数据， 根据与当前渲染的视频帧图像相匹配的OSD数据所携带的信息绘制成图像后 叠加在当前渲染的视频帧图像的HTML5video标签上。 0097 具体地， 数据获取模块201通过支持HTML5的浏览器可以基于WebSocket协议与流 说明书 7/9 页 10 CN 109889907 A 10 媒体服务器建立通信， 支持HTM。

45、L5的浏览器与流媒体服务器建立数据通道之后， 通过该数据 通道向流媒体服务器发送视频数据请求以获取视频流数据， 还通过该数据通道向流媒体服 务器发送OSD数据请求以获取OSD数据。 0098 数据缓冲模块202将获取的视频流数据实时按帧进行mp4格式的封装处理， 最终将 视频流数据转换成mp4格式的数据， 将经过mp4格式转码处理后的视频流数据和OSD数据均 进行缓存， 分别缓存至视频缓冲池中和OSD缓冲池中。 0099 视频解码渲染和OSD显示模块203当视频缓冲池满时， 开始对mp4格式的数据进行 解码和渲染， 并且设置一个计时器开始计时， 每隔预设时间， 尝试从OSD缓冲池中筛选出与 当。

46、前渲染的视频帧图像相匹配的人脸识别OSD数据， 将筛选出的OSD数据绘制图像叠加在当 前渲染的视频帧图像的HTML5video标签上。 0100 本发明实施例提供的视频OSD的显示装置， 用于执行本发明上述各实施例提供的 视频OSD的显示方法， 该视频OSD的显示装置包括的各模块实现相应功能的具体方法和流程 详见上述视频OSD的显示方法的实施例， 此处不再赘述。 0101 该视频OSD的显示装置用于前述各实施例的视频OSD的显示方法。 因此， 在前述各 实施例中的视频OSD的显示方法中的描述和定义， 可以用于本发明实施例中各执行模块的 理解。 0102 本发明实施例通过支持HTML5的浏览器实。

47、现视频播放时OSD数据的同步显示， 客户 端无须安装插件， 大大提高了用户体验， 解决了ocx、 flash等插件逐步被淘汰， 无法播放视 频和显示OSD的问题， 更有益于视频OSD显示的应用和推广。 0103 图3为根据本发明实施例提供的电子设备的结构框图。 基于上述实施例的内容， 如 图3所示， 该电子设备可以包括： 处理器(processor)301、 存储器(memory)302和总线303； 其 中， 处理器301和存储器302通过总线303完成相互间的通信； 处理器301用于调用存储在存 储器302中并可在处理器301上运行的计算机程序指令， 以执行上述各方法实施例所提供的 视频O。

48、SD的显示方法， 例如包括： 通过支持HTML5的浏览器与流媒体服务器建立基于 WebSocket协议的数据通道， 通过基于WebSocket协议的数据通道从流媒体服务器获取视频 流数据和OSD数据； 通过支持HTML5的浏览器将视频流数据转换成mp4格式的数据后缓存至 视频缓冲池中， 将OSD数据存储至OSD缓冲池中； 当视频缓冲池满时， 通过支持HTML5的浏览 器对mp4格式的数据进行解码和渲染， 从OSD缓冲池中筛选出与当前渲染的视频帧图像相匹 配的OSD数据， 根据与当前渲染的视频帧图像相匹配的OSD数据所携带的信息绘制成图像后 叠加在当前渲染的视频帧图像的HTML5video标签上。

49、。 0104 本发明另一实施例公开一种计算机程序产品， 计算机程序产品包括存储在非暂态 计算机可读存储介质上的计算机程序， 计算机程序包括程序指令， 当程序指令被计算机执 行时， 计算机能够执行上述各方法实施例所提供的视频OSD的显示方法， 例如包括： 通过支 持HTML5的浏览器与流媒体服务器建立基于WebSocket协议的数据通道， 通过基于 WebSocket协议的数据通道从流媒体服务器获取视频流数据和OSD数据； 通过支持HTML5的 浏览器将视频流数据转换成mp4格式的数据后缓存至视频缓冲池中， 将OSD数据存储至OSD 缓冲池中； 当视频缓冲池满时， 通过支持HTML5的浏览器对m。

50、p4格式的数据进行解码和渲染， 从OSD缓冲池中筛选出与当前渲染的视频帧图像相匹配的OSD数据， 根据与当前渲染的视频 帧图像相匹配的OSD数据所携带的信息绘制成图像后叠加在当前渲染的视频帧图像的 说明书 8/9 页 11 CN 109889907 A 11 HTML5video标签上。 0105 此外， 上述的存储器302中的逻辑指令可以通过软件功能单元的形式实现并作为 独立的产品销售或使用时， 可以存储在一个计算机可读取存储介质中。 基于这样的理解， 本 发明实施例的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分 可以以软件产品的形式体现出来， 该计算机软件产品存储在一个。