实时信息叠加方法、装置、电子装置和存储介质与流程

1.本技术涉及数据处理技术领域，特别是涉及实时信息叠加方法、装置、电子装置和存储介质。


背景技术：

2.随着互联网技术的迅速发展，直播技术在安防、交通、互动直播等领域的应用越来越广。视频直播对实时性的要求很高，而在某些特定环境下的直播中，存在需要算法分析在直播流中叠加信息的情况，如安防监控需要能及时发现异常情况，互动直播需要及时体现线上线下的互动等。
3.目前在直播流中叠加信息的方案为：利用算法分析后得到叠加信息，将叠加信息和视频流合成直播流，浏览器获取视频流后把待叠加的信息作为直播流的一部分一起进行展示。根据直播的不同场景需求，需大量的时间处理叠加信息的生成、合成以及处理，会导致直播的延迟播出。
4.针对相关技术中存在需大量的时间处理叠加信息的生成、合成以及处理，会导致直播的延迟播出的问题，目前还没有提出有效的解决方案。


技术实现要素：

5.在本实施例中提供了一种实时信息叠加方法、装置、电子装置和存储介质，以解决相关技术中需大量的时间处理叠加信息的生成、合成以及处理，会导致直播的延迟播出的问题。
6.第一个方面，在本实施例中提供了一种实时信息叠加方法，包括：
7.逐帧获取直播视频流中的视频数据和叠加信息；
8.对所述视频数据进行转换，得到视频片段；
9.根据所述叠加信息进行每帧的画布绘制，得到目标画布；
10.按时间顺序将所述目标画布叠加在对应的所述视频片段上进行播出。
11.通过上述方法，解决了相关技术中需大量的时间处理叠加信息的生成、合成以及处理，会导致直播的延迟播出的问题，节约了将叠加信息合成到视频流里的时间，以降低直播视频流从获取到展示过程中的延迟播出，并同步播出叠加信息。
12.在其中的一些实施例中，本技术实施例提供所述的实时信息叠加方法，还包括：
13.获取客户端的直播请求，通过直播协议根据所述直播请求获取直播视频流。
14.在其中的一些实施例中，所述逐帧获取直播视频流中的视频数据和叠加信息，包括：
15.获取所述直播视频流，对所述视频流进行逐帧的解码分片，得到每帧的视频数据和叠加信息。
16.在其中的一些实施例中，所述对所述视频数据进行转换，得到视频片段，包括：
17.利用flv.js在javascript中对所述视频数据进行解析，并实时将解析结果封装成
mp4格式的视频片段。
18.在其中的一些实施例中，所述根据所述叠加信息进行每帧的画布绘制，得到目标画布，包括：
19.创建与每帧所述视频片段中宽高一致的画布框架；
20.根据所述叠加信息在所述画布框架中进行每帧的画布绘制，得到目标画布。
21.在其中的一些实施例中，本技术实施例提供所述的实时信息叠加方法，在根据所述叠加信息进行每帧的画布绘制之前，还包括：
22.响应于用户的选择操作筛选所述叠加信息。
23.在其中的一些实施例中，本技术实施例提供所述的实时信息叠加方法，还包括：
24.将所述叠加信息存储到二进制的数据缓存区中，并在进行每帧的画布绘制时，提取所述数据缓存区中的所述叠加信息。
25.第二个方面，在本实施例中提供了一种实时信息叠加装置，包括获取模块、转换模块、绘制模块以及叠加播出模块；
26.所述获取模块，用于逐帧获取直播视频流中的视频数据和叠加信息；
27.所述转换模块，用于对所述视频数据进行转换，得到视频片段；
28.所述绘制模块，用于根据所述叠加信息进行每帧的画布绘制，得到目标画布；
29.所述叠加播出模块，用于按时间顺序将所述目标画布叠加在对应的所述视频片段上进行播出。
30.通过上述装置，解决了相关技术中需大量的时间处理叠加信息的生成、合成以及处理，会导致直播的延迟播出的问题，节约了将叠加信息合成到视频流里的时间，以降低直播视频流从获取到展示过程中的延迟播出，并同步播出叠加信息。
31.在其中的一些实施例中，本技术实施例提供所述的实时信息叠加装置，还包括请求模块；
32.所述请求模块，用于获取客户端的直播请求，通过直播协议根据所述直播请求获取直播视频流。
33.在其中的一些实施例中，所述获取模块，还用于获取所述直播视频流，对所述视频流进行逐帧的解码分片，得到每帧的视频数据和叠加信息。
34.在其中的一些实施例中，所述转换模块，还用于利用flv.js在javascript中对所述视频数据进行解析，并实时将解析结果封装成mp4格式的视频片段。
35.在其中的一些实施例中，所述绘制模块，还用于创建与每帧所述视频片段中宽高一致的画布框架；
36.根据所述叠加信息在所述画布框架中进行每帧的画布绘制，得到目标画布。
37.在其中的一些实施例中，本技术实施例提供所述的实时信息叠加装置，还包括筛选模块；
38.所述筛选模块，用于响应于用户的选择操作筛选所述叠加信息。
39.在其中的一些实施例中，本技术实施例提供所述的实时信息叠加装置，还包括存储模块；
40.所述存储模块，用于将所述叠加信息存储到二进制的数据缓存区中，并在进行每帧的画布绘制时，提取所述数据缓存区中的所述叠加信息。
41.第三个方面，在本实施例中提供了一种电子装置，包括存储器、处理器以及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现上述第一个方面所述的实时信息叠加方法。
42.第四个方面，在本实施例中提供了一种存储介质，其上存储有计算机程序，该程序被处理器执行时实现上述第一个方面所述的实时信息叠加方法。
43.与相关技术相比，在本实施例中提供的实时信息叠加方法、装置、电子装置和存储介质，通过逐帧获取直播视频流中的视频数据和叠加信息；对所述视频数据进行转换，得到视频片段；根据所述叠加信息进行每帧的画布绘制，得到目标画布；按时间顺序将所述目标画布叠加在对应的所述视频片段上进行播出，解决了相关技术中需大量的时间处理叠加信息的生成、合成以及处理，会导致直播的延迟播出的问题，节约了将叠加信息合成到视频流里的时间，以降低直播视频流从获取到展示过程中的延迟播出，并同步播出叠加信息。
44.本技术的一个或多个实施例的细节在以下附图和描述中提出，以使本技术的其他特征、目的和优点更加简明易懂。
附图说明
45.此处所说明的附图用来提供对本技术的进一步理解，构成本技术的一部分，本技术的示意性实施例及其说明用于解释本技术，并不构成对本技术的不当限定。在附图中：
46.图1是本技术一实施例提供的实时信息叠加方法的终端设备的硬件结构框图；
47.图2是本技术一实施例提供的实时信息叠加方法的流程图；
48.图3是图2中步骤s230的流程图；
49.图4是本技术一实施例提供的实时信息叠加装置的结构框图。
50.图中：210、获取模块；220、转换模块；230、绘制模块；240、叠加播出模块。
具体实施方式
51.为更清楚地理解本技术的目的、技术方案和优点，下面结合附图和实施例，对本技术进行了描述和说明。
52.除另作定义外，本技术所涉及的技术术语或者科学术语应具有本技术所属技术领域具备一般技能的人所理解的一般含义。在本技术中的“一”、“一个”、“一种”、“该”、“这些”等类似的词并不表示数量上的限制，它们可以是单数或者复数。在本技术中所涉及的术语“包括”、“包含”、“具有”及其任何变体，其目的是涵盖不排他的包含；例如，包含一系列步骤或模块(单元)的过程、方法和系统、产品或设备并未限定于列出的步骤或模块(单元)，而可包括未列出的步骤或模块(单元)，或者可包括这些过程、方法、产品或设备固有的其他步骤或模块(单元)。在本技术中所涉及的“连接”、“相连”、“耦接”等类似的词语并不限定于物理的或机械连接，而可以包括电气连接，无论是直接连接还是间接连接。在本技术中所涉及的“多个”是指两个或两个以上。“和/或”描述关联对象的关联关系，表示可以存在三种关系，例如，“a和/或b”可以表示：单独存在a，同时存在a和b，单独存在b这三种情况。通常情况下，字符“/”表示前后关联的对象是一种“或”的关系。在本技术中所涉及的术语“第一”、“第二”、“第三”等，只是对相似对象进行区分，并不代表针对对象的特定排序。
53.在本实施例中提供的方法实施例可以在终端、计算机或者类似的运算装置中执
行。比如在终端上运行，图1是本实施例的实时信息叠加方法的终端的硬件结构框图。如图1所示，终端可以包括一个或多个(图1中仅示出一个)处理器102和用于存储数据的存储器104，其中，处理器102可以包括但不限于微处理器mcu或可编程逻辑器件fpga等的处理装置。上述终端还可以包括用于通信功能的传输设备106以及输入输出设备108。本领域普通技术人员可以理解，图1所示的结构仅为示意，其并不对上述终端的结构造成限制。例如，终端还可包括比图1中所示更多或者更少的组件，或者具有与图1所示出的不同配置。
54.存储器104可用于存储计算机程序，例如，应用软件的软件程序以及模块，如在本实施例中的实时信息叠加方法对应的计算机程序，处理器102通过运行存储在存储器104内的计算机程序，从而执行各种功能应用以及数据处理，即实现上述的方法。存储器104可包括高速随机存储器，还可包括非易失性存储器，如一个或者多个磁性存储装置、闪存、或者其他非易失性固态存储器。在一些实例中，存储器104可进一步包括相对于处理器102远程设置的存储器，这些远程存储器可以通过网络连接至终端。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。
55.传输设备106用于经由一个网络接收或者发送数据。上述的网络包括终端的通信供应商提供的无线网络。在一个实例中，传输设备106包括一个网络适配器(network interface controller，简称为nic)，其可通过基站与其他网络设备相连从而可与互联网进行通讯。在一个实例中，传输设备106可以为射频(radio frequency，简称为rf)模块，其用于通过无线方式与互联网进行通讯。
56.在本实施例中提供了一种实时信息叠加方法，图2是本实施例的实时信息叠加方法的流程图，如图2所示，该流程包括如下步骤：
57.步骤s210，逐帧获取直播视频流中的视频数据和叠加信息；
58.步骤s220，对所述视频数据进行转换，得到视频片段；
59.步骤s230，根据所述叠加信息进行每帧的画布绘制，得到目标画布；
60.步骤s240，按时间顺序将所述目标画布叠加在对应的所述视频片段上进行播出。
61.需要说明的是，本技术可以是基于web端实现，是逐帧进行信息的叠加。比如，叠加信息可以是按每一帧进行叠加，一帧的时间为30毫秒，即没30毫秒都会进行一次上述步骤的处理。在其他实施例中，叠加信息可以是按每阈值时间帧进行叠加，如按3帧时间进行，则每隔3帧的时间获取直播视频流中的视频数据和叠加信息。时间间隔越短，最终播放的视频中的叠加信息显示越准确。
62.视频数据和叠加信息均是从直播视频流中取得。其中，叠加信息是指需要绘制在画布上，最终在播出中叠加到视频片段上显示的信息。其可以是对直播视频流分析后得到的任何信息，具体的是指路面的车道区域、检测到的车辆信息(颜色、品牌、车辆类型、车速、车辆坐标等)、车道线等。其中，视频数据是指用于播放的相关视频数据，如图像数据、音频数据等。在本实施例中，对所述视频数据进行转换，得到支持播放器播放的视频片段；为了适用于不同播放器，转换的方案可以不同。比如，为了得到支持video可直接播放的视频片段，转换的过程为：利用flv.js在javascript中对所述视频数据进行解析，并实时将解析结果封装成mp4格式的视频片段。那么在客户端中，调用html5的media source extensions api解析，传递给video标签可以直接播放。在其他实施例中，对于转换的方案并不进行限制。
63.每一帧的视频数据或视频片段均会对应绘制一幅画布。目标画布是根据叠加信息进行绘制。比如：叠加信息为车辆信息(颜色、品牌、车辆类型、车速、车辆坐标等)；那么根据车辆坐标在画布上对应位置绘制颜色、品牌、车辆类型、车速等内容。再按时间顺序将所述目标画布叠加在对应的所述视频片段上进行播出。具体的，可以是将每一帧的目标画布按时间顺序拼接，将每一帧的视频片段按时间顺序拼接，在播出时，按时间对齐每帧的目标画布和视频片段，并将目标画布叠加在对应的视频片段上进行播出。在本实施例中，目标画布和视频片段是两个相对独立的部分，只是在播出时将目标画布叠加在对应的视频片段上呈现播出，从而节约了将叠加信息合成到视频流里的时间，以降低直播视频流从获取到展示过程中的延迟播出，并同步播出叠加信息。
64.通过上述步骤，解决了相关技术中需大量的时间处理叠加信息的生成、合成以及处理，会导致直播的延迟播出的问题，节约了将叠加信息合成到视频流里的时间，以降低直播视频流从获取到展示过程中的延迟播出，并同步播出叠加信息。
65.在其中的一些实施例中，本技术实施例提供的实时信息叠加方法，还包括以下步骤：
66.获取客户端的直播请求，通过直播协议根据所述直播请求获取直播视频流。
67.具体的，直播协议可以为http-flv协议或websocket-flv协议；通过http-flv协议或websocket-flv协议根据直播请求获取直播视频流。其中，http-flv是将rtmp封装在http协议之上的，可以更好的穿透防火墙。传输数据都是flv文件的tag。http-flv是一个无限大的http流的文件。其中，websocket-flv是基于websocket传输flv，依赖浏览器支持播放flv。websocket建立在http之上，建立websocket连接前还要先建立http连接。
68.在其中的一些实施例中，步骤s210，包括以下步骤：
69.获取所述直播视频流，对所述视频流进行逐帧的解码分片，得到每帧的视频数据和叠加信息。
70.具体的，获取所述直播视频流，利用flv.js对所述视频流进行逐帧的解码分片，能够快速得到每帧的视频数据和叠加信息，降低直播视频流从获取到展示过程中的延迟播出。
71.在其中的一些实施例中，如图3所示，步骤s230，包括以下步骤：
72.步骤s231，创建与每帧所述视频片段中宽高一致的画布框架；
73.步骤s232，根据所述叠加信息在所述画布框架中进行每帧的画布绘制，得到目标画布。
74.具体的，获取每帧视频片段的宽度和高度，根据该高度和宽度创建画布框架，以创建与每帧视频片段中宽高一致的画布框架。在画布框架中，根据述叠加信息进行每帧的画布绘制。在本实施例中，画布canvas表示一个html画布元素-《canvas》，它有一个getcontext的方法，利用该方法可以创建一个用于在画布上绘图的环境对象，对象拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法，那么可以根据叠加信息进行画直线、画曲线、填充、描边等绘制，以得到目标画布。从而使得在每一帧的时间内快速完成目标画布的绘制，使用canvas的方法，保证了在有较多信息需要展示的情况下仍有较好的性能。最后的叠加效果由画布(canvas)完成，在浏览器端性能较好。画布(canvas)自身丰富的画图方法使叠加信息能够多样地展示，也便于后续修改。
75.在其中的一些实施例中，为了提高展示的可拓展性、多样性以及可交互性，在根据所述叠加信息进行每帧的画布绘制之前，本技术实施例提供的实时信息叠加方法，还包括以下步骤：
76.响应于用户的选择操作筛选所述叠加信息。
77.具体的，选择操作可以是点击、滑动、移动等特定操作。比如，在播放界面上设置有第一选项、第二选项、第三选项等用户交互按钮，第一选项用于屏蔽车辆属性；第二选项用于屏蔽路面的区域框；第三选项用于屏蔽路上车辆的包围框；那么基于双数的特定操作，选择相应的选项即可完成屏蔽相关信息，从而筛选出叠加信息。比如：点击第二选项，那么将路面的区域框从叠加信息中删除，从而完成叠加信息的筛选，能够控制画布上展示的内容。再比如，滑动第三选项到第二选项，那么将路面的区域框和车辆的包围框从叠加信息中删除，从而完成叠加信息的筛选，能够控制画布上展示的内容。再比如，移动第三选项到边框，那么将车辆的包围框从叠加信息中删除，从而快速完成叠加信息的筛选，能够控制画布上展示的内容，方便用户对叠加信息筛选的选择操作。且在移动第三选项到边框时，可以显示提示消息，提示消息为“删除车辆的包围框”，能够使用户快速知晓筛选的对象，方便用户使用。对于筛选叠加信息的选择操作，在此不进行一一举例。
78.播放界面提供了一些用户交互按钮，便于用户根据需求切换需要展示的信息，由于叠加信息随着视频的画面逐帧变化，可以对用户的交互操作做出快速的响应。
79.在其中的一些实施例中，本技术实施例提供的实时信息叠加方法，还包括：
80.将所述叠加信息存储到二进制的数据缓存区中，并在进行每帧的画布绘制时，提取所述数据缓存区中的所述叠加信息。
81.具体的，数据缓存区可以是arraybuffer对象，其是客户端存储二进制信息的容器，客户端可以调用对象自带的方法读取里面的叠加信息。比如：客户端可以通过dataview视图逐字节将二进制信息分解出来，从而得到叠加信息。也可以通过映射表转化成字符串，从而得到叠加信息；例如一段叠加信息对应的是车的颜色，客户端解析之后是1，通过0对应白色，1对应黑色，2对应红色，得到这段叠加信息的意思是这辆是黑色的车。如果需要把这辆车在画布上画出来，需要知道车在画布上的位置，所谓的位置信息就是这个目标在画布上的坐标。在其他实施例中，可以将叠加信息存储到数据库中，在使用时提取相关的叠加信息即可。
82.需要说明的是，在上述流程中或者附图的流程图中示出的步骤可以在诸如一组计算机可执行指令的计算机系统中执行，并且，虽然在流程图中示出了逻辑顺序，但是在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤。
83.在本实施例中还提供了一种实时信息叠加装置，该装置用于实现上述实施例及优选实施方式，已经进行过说明的不再赘述。以下所使用的术语“模块”、“单元”、“子单元”等可以实现预定功能的软件和/或硬件的组合。尽管在以下实施例中所描述的装置较佳地以软件来实现，但是硬件，或者软件和硬件的组合的实现也是可能并被构想的。
84.图4是本实施例的实时信息叠加装置的结构框图，如图4所示，该装置包括：获取模块210、转换模块220、绘制模块230以及叠加播出模块240；
85.所述获取模块210，用于逐帧获取直播视频流中的视频数据和叠加信息；
86.所述转换模块220，用于对所述视频数据进行转换，得到视频片段；
87.所述绘制模块230，用于根据所述叠加信息进行每帧的画布绘制，得到目标画布；
88.所述叠加播出模块240，用于按时间顺序将所述目标画布叠加在对应的所述视频片段上进行播出。
89.通过上述装置，解决了相关技术中需大量的时间处理叠加信息的生成、合成以及处理，会导致直播的延迟播出的问题，节约了将叠加信息合成到视频流里的时间，以降低直播视频流从获取到展示过程中的延迟播出，并同步播出叠加信息。
90.在其中的一些实施例中，获取模块210，还用于获取所述直播视频流，对所述视频流进行逐帧的解码分片，得到每帧的视频数据和叠加信息。
91.在其中的一些实施例中，转换模块220，还用于利用flv.js在javascript中对所述视频数据进行解析，并实时将解析结果封装成mp4格式的视频片段。
92.在其中的一些实施例中，绘制模块230，还用于创建与每帧所述视频片段中宽高一致的画布框架；
93.根据所述叠加信息在所述画布框架中进行每帧的画布绘制，得到目标画布。
94.在其中的一些实施例中，在图4的基础上，本技术实施例提供的实时信息叠加装置，还包括请求模块；
95.请求模块，用于获取客户端的直播请求，通过直播协议根据所述直播请求获取直播视频流。
96.在其中的一些实施例中，在图4的基础上，本技术实施例提供的实时信息叠加装置，还包括筛选模块；
97.筛选模块，用于在根据所述叠加信息进行每帧的画布绘制之前，响应于用户的选择操作筛选所述叠加信息。
98.在其中的一些实施例中，在图4的基础上，本技术实施例提供的实时信息叠加装置，还包括存储模块；
99.存储模块，用于将所述叠加信息存储到二进制的数据缓存区中，并在进行每帧的画布绘制时，提取所述数据缓存区中的所述叠加信息。
100.需要说明的是，上述各个模块可以是功能模块也可以是程序模块，既可以通过软件来实现，也可以通过硬件来实现。对于通过硬件来实现的模块而言，上述各个模块可以位于同一处理器中；或者上述各个模块还可以按照任意组合的形式分别位于不同的处理器中。
101.在本实施例中还提供了一种电子装置，包括存储器和处理器，该存储器中存储有计算机程序，该处理器被设置为运行计算机程序以执行上述任一项方法实施例中的步骤。
102.可选地，上述电子装置还可以包括传输设备以及输入输出设备，其中，该传输设备和上述处理器连接，该输入输出设备和上述处理器连接。
103.可选地，在本实施例中，上述处理器可以被设置为通过计算机程序执行以下步骤：
104.s1，逐帧获取直播视频流中的视频数据和叠加信息；
105.s2，对所述视频数据进行转换，得到视频片段；
106.s3，根据所述叠加信息进行每帧的画布绘制，得到目标画布；
107.s4，按时间顺序将所述目标画布叠加在对应的所述视频片段上进行播出。
108.通过上述电子装置，解决了相关技术中需大量的时间处理叠加信息的生成、合成
以及处理，会导致直播的延迟播出的问题，节约了将叠加信息合成到视频流里的时间，以降低直播视频流从获取到展示过程中的延迟播出，并同步播出叠加信息。
109.需要说明的是，在本实施例中的具体示例可以参考上述实施例及可选实施方式中所描述的示例，在本实施例中不再赘述。
110.此外，结合上述实施例中提供的实时信息叠加方法，在本实施例中还可以提供一种存储介质来实现。该存储介质上存储有计算机程序；该计算机程序被处理器执行时实现上述实施例中的任意一种实时信息叠加方法。
111.应该明白的是，这里描述的具体实施例只是用来解释这个应用，而不是用来对它进行限定。根据本技术提供的实施例，本领域普通技术人员在不进行创造性劳动的情况下得到的所有其它实施例，均属本技术保护范围。
112.显然，附图只是本技术的一些例子或实施例，对本领域的普通技术人员来说，也可以根据这些附图将本技术适用于其他类似情况，但无需付出创造性劳动。另外，可以理解的是，尽管在此开发过程中所做的工作可能是复杂和漫长的，但是，对于本领域的普通技术人员来说，根据本技术披露的技术内容进行的某些设计、制造或生产等更改仅是常规的技术手段，不应被视为本技术公开的内容不足。
[0113]“实施例”一词在本技术中指的是结合实施例描述的具体特征、结构或特性可以包括在本技术的至少一个实施例中。该短语出现在说明书中的各个位置并不一定意味着相同的实施例，也不意味着与其它实施例相互排斥而具有独立性或可供选择。本领域的普通技术人员能够清楚或隐含地理解的是，本技术中描述的实施例在没有冲突的情况下，可以与其它实施例结合。
[0114]
以上所述实施例仅表达了本技术的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对专利保护范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本技术构思的前提下，还可以做出若干变形和改进，这些都属于本技术的保护范围。因此，本技术的保护范围应以所附权利要求为准。