基于HTML5的视频实时目标属性叠加显示方法、装置及设备制造方法及图纸

本申请涉及一种基于HTML5的视频实时目标属性叠加显示方法、装置及设备，方法包括：获取视频数据的各视频数据帧和各目标属性扩展帧；根据目标属性扩展帧得到各目标属性扩展帧的目标属性信息；将各视频数据帧的时间戳按照预设方式对应增加到各目标属性扩展帧的目标属性信息上，得到时间戳目标属性信息；将各视频数据帧发送给第一标签根据时间戳进行播放；将时间戳目标属性信息发送给第二标签根据时间戳进行显示。基于此，本申请中使用HTML5中的标签进行解码，可以实现原生语言的效率，相对于现有技术中的非原生语言解码，效率更高，且实现了目标属性信息的叠加，一定程度上会避免了目标属性信息叠加延迟的现象。

Method, device and equipment of video real-time target attribute overlay display based on HTML5

【技术实现步骤摘要】
基于HTML5的视频实时目标属性叠加显示方法、装置及设备
本申请涉及视频播放
，尤其涉及一种基于HTML5的视频实时目标属性叠加显示方法、装置及设备。
技术介绍
随着人工智能的发展，基于视频的实时目标检测的解决方案越来越多，为了方便用户更加直观地获取视频中出现的目标的相关信息，可以在视频播放时将通过人工智能识别出来的目标信息展示在视频中。现有的解决方案中，一般是在前端代码中实现视频解码，解码数据通过WEBGL显示，同时将目标属性信息叠加显示出来。但是在视频解码时，一般采用的是asm.js或者wasm，JS的运行效率较低，即使是wasm技术，理想情况下效率也只是原生语言的60％，这就导致现有解决方案中，视频的解码效率较低，进而可能会导致叠加显示目标属性信息出现延迟。
技术实现思路
为至少在一定程度上克服相关技术中存在的问题，本申请提供一种基于HTML5的视频实时目标属性叠加显示方法、装置及设备。根据本申请的第一方面，提供一种基于HTML5的视频实时目标属性叠加显示方法，包括：获取视频数据的各视频数据帧和与所述各视频数据帧对应的各目标属性扩展帧；根据所述目标属性扩展帧得到所述各目标属性扩展帧的目标属性信息；将所述各视频数据帧的时间戳按照预设方式对应增加到所述各目标属性扩展帧的目标属性信息上，得到所述各目标属性扩展帧的时间戳目标属性信息；将所述各视频数据帧发送给预先创建的第一标签根据所述时间戳进行播放；将所述时间戳目标属性信息发送给预先创建的第二标签根据所述时间戳进行显示。可选的，所述根据所述目标属性扩展帧得到各所述目标属性扩展帧的目标属性信息，包括：将各所述目标属性扩展帧反序列化，得到各所述目标属性扩展帧的目标属性信息。可选的，所述将所述各视频数据帧的时间戳按照预设方式对应增加到所述各目标属性扩展帧的目标属性信息上，得到所述各目标属性扩展帧的时间戳目标属性信息，包括：获取所述视频数据帧中第一帧的时间戳并设置为基础时间戳；将所述各视频数据帧的时间戳减去所述基础时间戳，得到各视频数据帧的目标时间戳；根据所述视频数据帧和所述目标属性扩展帧的对应关系将所述目标时间戳增加到所述目标属性信息中，得到时间戳目标属性信息。可选的，所述将所述各视频数据帧发送给预先创建的第一标签根据所述时间戳进行播放，包括：将所述各视频数据帧的时间戳对应替换为所述目标时间戳，得到目标视频数据帧；将所述目标视频数据帧封装为预设格式后通过预设加载方式发送给所述第一标签按照所述目标时间戳进行播放。可选的，所述将所述时间戳目标属性信息发送给预先创建的第二标签根据所述时间戳进行显示，包括：将所述时间戳目标属性信息根据所述时间戳依次缓存到预设数组的尾部；将所述第一标签当前播放的所述视频数据帧的时间戳作为当前时间戳；从所述预设数组的头部依次获取时间戳目标属性信息，并当判断获取到的时间戳目标属性信息的时间戳满足第一预设条件时，将所述获取到的时间戳目标属性信息发送给所述第二标签上进行显示；当判断获取到的时间戳目标属性信息的时间戳满足第二预设条件时，将所述获取到的时间戳目标属性信息丢弃；所述第一预设条件包括获取到的时间戳目标属性信息的时间戳大于或等于当前时间戳与预设时间的差值且小于或等于当前时间戳与所述预设时间的和；所述第二预设条件包括获取到的时间戳目标属性信息的时间戳小于当前时间戳与预设时间的差值；按照预设定时器设定的时间更新所述当前时间戳。可选的，所述第一标签为video标签；所述第二标签为canvas标签。根据本申请的第二方面，提供一种基于HTML5的视频实时目标属性叠加显示装置，包括：获取模块，用于获取视频数据的各视频数据帧和与所述各视频数据帧对应的各目标属性扩展帧；处理模块，用于根据所述目标属性扩展帧得到所述各目标属性扩展帧的目标属性信息；时间戳增加模块，用于将所述各视频数据帧的时间戳按照预设方式对应增加到所述各目标属性扩展帧的目标属性信息上，得到所述各目标属性扩展帧的时间戳目标属性信息；第一发送模块，用于将所述各视频数据帧发送给预先创建的第一标签根据所述时间戳进行播放；第二发送模块，用于将所述时间戳目标属性信息发送给预先创建的第二标签根据所述时间戳进行显示。可选的，所述处理模块包括：反序列单元，用于将各所述目标属性扩展帧反序列化，得到各所述目标属性扩展帧的目标属性信息。可选的，所述时间戳增加模块包括：获取单元，用于获取所述视频数据帧中第一帧的时间戳并设置为基础时间戳；运算单元，用于将所述各视频数据帧的时间戳减去所述基础时间戳，得到各视频数据帧的目标时间戳；时间戳增加单元，用于根据所述视频数据帧和所述目标属性扩展帧的对应关系将所述目标时间戳增加到所述目标属性信息中，得到时间戳目标属性信息。可选的，所述第一发送模块包括：替换单元，用于将所述各视频数据帧的时间戳对应替换为所述目标时间戳，得到目标视频数据帧；第一发送单元，用于将所述目标视频数据帧封装为预设格式后通过预设加载方式发送给所述第一标签按照所述目标时间戳进行播放。可选的，所述第二发送模块包括：缓存单元，用于将所述时间戳目标属性信息根据所述时间戳依次缓存到预设数组的尾部；处理单元，用于将所述第一标签当前播放的所述视频数据帧的时间戳作为当前时间戳；第二发送单元，用于从所述预设数组的头部依次获取时间戳目标属性信息，并当判断获取到的时间戳目标属性信息的时间戳满足第一预设条件时，将所述获取到的时间戳目标属性信息发送给所述第二标签上进行显示；当判断获取到的时间戳目标属性信息的时间戳满足第二预设条件时，将所述获取到的时间戳目标属性信息丢弃；所述第一预设条件包括获取到的时间戳目标属性信息的时间戳大于或等于当前时间戳与预设时间的差值且小于或等于当前时间戳与所述预设时间的和；所述第二预设条件包括获取到的时间戳目标属性信息的时间戳小于当前时间戳与预设时间的差值；更新单元，用于按照预设定时器设定的时间更新所述当前时间戳。可选的，所述第一标签为video标签；所述第二标签为canvas标签。根据本申请的第三方面，提供一种基于HTML5的视频实时目标属性叠加显示设备，包括：处理器，以及与所述处理器相连接的存储器；所述存储器用于存储计算机程序，所述计算机程序至少用于执行本申请第一方面所述的基于HTML5的视频实时目标属性叠加显示方法；所述处理器用于调用并执行所述存储器中的所述计算机程序。本申请提供的技术方案可以包括以下有益效果：首先获取视频数据的各视频数据帧和与所述各视频数据帧对应的各目标属性扩展帧；然后根据所述目标属性扩展帧得到所述各目标属性扩展帧的目标属性信息；再将所述各视频数据帧的时间戳按照预设方式对应增加到所述各目标属性扩展帧的目标属性信息上，得到所述各目标属性扩本文档来自技高网...

【技术保护点】
1.一种基于HTML5的视频实时目标属性叠加显示方法，其特征在于，包括：/n获取视频数据的各视频数据帧和与所述各视频数据帧对应的各目标属性扩展帧；/n根据所述目标属性扩展帧得到所述各目标属性扩展帧的目标属性信息；/n将所述各视频数据帧的时间戳按照预设方式对应增加到所述各目标属性扩展帧的目标属性信息上，得到所述各目标属性扩展帧的时间戳目标属性信息；/n将所述各视频数据帧发送给预先创建的第一标签根据所述时间戳进行播放；/n将所述时间戳目标属性信息发送给预先创建的第二标签根据所述时间戳进行显示。/n

【技术特征摘要】
1.一种基于HTML5的视频实时目标属性叠加显示方法，其特征在于，包括：
获取视频数据的各视频数据帧和与所述各视频数据帧对应的各目标属性扩展帧；
根据所述目标属性扩展帧得到所述各目标属性扩展帧的目标属性信息；
将所述各视频数据帧的时间戳按照预设方式对应增加到所述各目标属性扩展帧的目标属性信息上，得到所述各目标属性扩展帧的时间戳目标属性信息；
将所述各视频数据帧发送给预先创建的第一标签根据所述时间戳进行播放；
将所述时间戳目标属性信息发送给预先创建的第二标签根据所述时间戳进行显示。


2.根据权利要求1所述的基于HTML5的视频实时目标属性叠加显示方法，其特征在于，所述根据所述目标属性扩展帧得到各所述目标属性扩展帧的目标属性信息，包括：
将各所述目标属性扩展帧反序列化，得到各所述目标属性扩展帧的目标属性信息。


3.根据权利要求1所述的基于HTML5的视频实时目标属性叠加显示方法，其特征在于，所述将所述各视频数据帧的时间戳按照预设方式对应增加到所述各目标属性扩展帧的目标属性信息上，得到所述各目标属性扩展帧的时间戳目标属性信息，包括：
获取所述视频数据帧中第一帧的时间戳并设置为基础时间戳；
将所述各视频数据帧的时间戳减去所述基础时间戳，得到各视频数据帧的目标时间戳；
根据所述视频数据帧和所述目标属性扩展帧的对应关系将所述目标时间戳增加到所述目标属性信息中，得到时间戳目标属性信息。


4.根据权利要求3所述的基于HTML5的视频实时目标属性叠加显示方法，其特征在于，所述将所述各视频数据帧发送给预先创建的第一标签根据所述时间戳进行播放，包括：
将所述各视频数据帧的时间戳对应替换为所述目标时间戳，得到目标视频数据帧；
将所述目标视频数据帧封装为预设格式后通过预设加载方式发送给所述第一标签按照所述目标时间戳进行播放。


5.根据权利要求4所述的基于HTML5的视频实时目标属性叠加显示方法，其特征在于，所述将所述时间戳目标属性信息发送给预先创建的第二标签根据所述时间戳进行显示，包括：
将所述时间戳目标属性信息根据所述时间戳依次缓存到预设数组的尾部；
将所述第一标签当前播放的所述视频数据帧的时间戳作为当前时间戳；
从所述预设数组的头部依次获取时间戳目标属性信息，并当判断获取到的时间戳目标属性信息的时间戳满足第一预设条件时，将所述获取到的时间戳目标属性信息发送给所述第二标签上进行显示；当判断获取到的时间戳目标属性信息的时间戳满足第二预设条件时，将所述获取到的时间戳目标属性信息丢弃；所述第一预设条件包括获取到的时间戳目标属性信息的时间戳大于或等于当前时间戳与预设时间的差值且小于或等于当前时间戳与所述预设时间的和；所述第二预设条件包括获取到的时间戳目标属性信息的时间戳小于当前时间戳与预设时间的差值；
按照预设定时器设定的时间更新所述当前时间戳。


6.根据权利要求1～5任一项所述的基于HTML5的视频实时目标属性叠加显示方法，其特征在于，所述第一标签为video标签；所述第二标签为canvas标签。


7.一种基于HTML5的视频实时目标属性叠加显示装置，其特征在于，包括：
获取模块，用于获取视频数据的各视频数据帧和与所述各视频数据帧对...

【专利技术属性】
技术研发人员：任晓丽，
申请(专利权)人：四川东方网力科技有限公司，
类型：发明
国别省市：四川;51