1.本技术涉及自动驾驶技术领域，更具体地说，是涉及一种应用于网页端的实时视频流处理方法、装置及相关设备。
背景技术：2.在监控自动驾驶车辆的行驶状况时，需要在同一画布上同时展示车辆拍摄到的实时视频、车辆感知设备实时感知到的3d数据、车辆在地图中的实时定位以及对车辆进行操控的交互面板等信息。其中，对上述的视频数据、3d数据、地图数据以及交互面板数据的渲染需要占用较多的内存及cpu资源。现有的做法通常是采用专用的终端软件来实现多种复杂数据的同时渲染，虽然专用的终端软件能够满足对各种复杂数据的高速渲染，但是终端软件需要成功安装之后才能投入使用，对于用户来说不够便利。采用网页的形式来对自动驾驶车辆进行监控则能够免除终端软件的安装，只要能上网则可以随时随地实现对自动驾驶车辆的监控。
3.然而，网页应用中所无法绕开的javascript是单核的，每次打开一个网页时，从点击到加载所用到的仅仅是单核性能。当网页还需要处理其他页面交互时，由于可用计算资源的不足，可能会导致实时视频的编码传输和解码渲染速度不一致，从而会出现视频实时性差的情况。
技术实现要素：4.有鉴于此，本技术提供了一种应用于网页端的实时视频流处理方法、装置及相关设备，以通过网页端观看对自动驾驶车辆实时拍摄的视频。
5.为实现上述目的，本技术第一方面提供了一种应用于网页端的实时视频流处理方法，包括：
6.接收来自服务器的视频流数据，并对所述视频流数据进行解码，得到解码后的视频帧数据；
7.以单线程多进程的方式从解码后的视频帧数据中获取预设时长的视频帧数据，得到视频帧段；
8.获取所述视频帧段中的有效视频帧，得到有效视频帧队列，所述有效视频帧为存在图像内容的视频帧；
9.基于目标渲染帧率和所述预设时长，从所述有效视频帧队列中抽取多个有效视频帧，得到目标视频帧队列；
10.利用独立的浏览器视窗对所述目标视频帧队列进行渲染。
11.优选地，基于目标渲染帧率和所述预设时长，从所述有效视频帧队列中抽取多个有效视频帧之前，还包括：
12.获取所述视频帧段的第一时间戳及第二时间戳，其中，所述视频帧段的第一时间戳为所述视频帧段的第一帧视频帧内所记录的时间戳，所述视频帧段的第二时间戳为获取
到所述视频帧段时的系统时间；
13.将所述第二时间戳减去所述第一时间戳，得到时间延迟量，并判断所述时间延迟量是否大于预设阈值；
14.若是，基于所述时间延迟量确定目标渲染帧率；
15.若否，将用户设定的渲染帧率确定为目标渲染帧率。
16.优选地，利用独立的浏览器视窗对所述目标视频帧队列进行渲染之后，还包括：
17.将所述时间延迟量展示在所述浏览器视窗中。
18.优选地，所述基于目标渲染帧率和所述预设时长，从所述有效视频帧队列中抽取多个有效视频帧的过程，包括：
19.采用下述方程式计算得到目标帧数n
target
及抽帧间隔n
interval
：
20.n
taget
＝f
×
t
[0021][0022]
其中，f为目标渲染帧率，t为预设时长，n
valid
为有效视频帧队列中的有效帧的数量；
[0023]
基于抽帧间隔n
interval
从所述有效视频帧队列中抽取n
target
个有效帧。
[0024]
优选地，利用独立的浏览器视窗对所述目标视频帧队列进行渲染的过程，包括：
[0025]
基于渲染引擎模板配置，启动一浏览器视窗，其中，所述渲染引擎模板配置发送自服务器，用于描述浏览器视窗的属性信息；
[0026]
控制所述浏览器视窗对所述目标视频帧队列进行渲染。
[0027]
优选地，所述渲染引擎模板配置包括浏览器视窗的位置及尺寸；基于渲染引擎模板配置，启动一浏览器视窗的过程，包括：
[0028]
通过脚本命令启动一浏览器视窗；
[0029]
基于浏览器视窗的位置及尺寸，通过脚本命令设置所述浏览器视窗的位置及尺寸。
[0030]
优选地，所述视频流数据采用的视频编码标准为h.265。
[0031]
本技术第二方面提供了一种应用于网页端的实时视频流处理装置，包括：
[0032]
视频流解码单元，用于接收来自服务器的视频流数据，并对所述视频流数据进行解码，得到解码后的视频帧数据；
[0033]
视频段获取单元，用于以单线程多进程的方式从解码后的视频帧数据中获取预设时长的视频帧数据，得到视频帧段；
[0034]
有效帧获取单元，用于获取所述视频帧段中的有效视频帧，得到有效视频帧队列，所述有效视频帧为存在图像内容的视频帧；
[0035]
视频帧抽帧单元，用于基于目标渲染帧率和所述预设时长，从所述有效视频帧队列中抽取多个有效视频帧，得到目标视频帧队列；
[0036]
视频帧渲染单元，用于利用独立的浏览器视窗对所述目标视频帧队列进行渲染。
[0037]
本技术第三方面提供了一种应用于网页端的实时视频流处理设备，包括：存储器和处理器；
[0038]
所述存储器，用于存储程序；
[0039]
所述处理器，用于执行所述程序，实现上述的应用于网页端的实时视频流处理方法的各个步骤。
[0040]
本技术第四方面提供了一种存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时，实现如上述的应用于网页端的实时视频流处理方法的各个步骤。
[0041]
经由上述的技术方案可知，本技术首先接收来自服务器的视频流数据，并对所述视频流数据进行解码，得到解码后的视频帧数据。接着，以单线程多进程的方式从解码后的视频帧数据中获取预设时长的视频帧数据，得到视频帧段。对于所述视频帧段，从中提取出有效视频帧，得到有效视频帧队列。其中，所述有效视频帧为存在图像内容的视频帧。然后，基于目标渲染帧率和所述预设时长，从所述有效视频帧队列中抽取多个有效视频帧，得到目标视频帧队列。可以理解的是，所述目标视频帧队列中的视频帧数量得到了压缩。最后，利用独立的浏览器视窗对所述目标视频帧队列进行渲染。由于目标视频帧队列中的视频帧数量得到压缩，减少了渲染所需的计算资源，一定程度上提高了视频的实时性。此外，通过利用新的浏览器视窗单独对目标视频帧队列进行渲染，即便网页应用中的javascript是单核的，仍然可以保证系统内其中一个cpu核能够全力处理目标视频帧队列的渲染，同时由其他cpu核处理其他的页面交互，避免由于可用计算资源的不足而导致的视频帧渲染滞后，进一步确保视频渲染的实时性。
附图说明
[0042]
为了更清楚地说明本技术实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本技术的实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据提供的附图获得其他的附图。
[0043]
图1为本技术实施例公开的应用于网页端的实时视频流处理的示意图；
[0044]
图2为本技术实施例公开的应用于网页端的实时视频流处理的数据流示意图；
[0045]
图3为本技术实施例应用于网页端的实时视频流处理装置的示意图；
[0046]
图4为本技术实施例应用于网页端的实时视频流处理设备的示意图。
具体实施方式
[0047]
下面将结合本技术实施例中的附图，对本技术实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本技术一部分实施例，而不是全部的实施例。基于本技术中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本技术保护的范围。
[0048]
下面介绍本技术实施例提供的应用于网页端的实时视频流处理方法。请同时参阅图1和图2，本技术实施例提供的应用于网页端的实时视频流处理方法可以包括如下步骤：
[0049]
步骤s101，接收来自服务器的视频流数据，并对该视频流数据进行解码，得到解码后的视频帧数据。
[0050]
示例性地，可以通过srs(simple realtime server)流媒体服务来接收视频流数据，根据视频流数据的编码方式，对其进行解码，得到解码后的视频帧数据。
[0051]
自动驾驶车辆实时拍摄到的视频可以通过5g专网上传到srs服务器中，其中，该视
频流数据采用的视频编码标准可以为h.265。
[0052]
步骤s102，以单线程多进程的方式从解码后的视频帧数据中获取预设时长的视频帧数据，得到视频帧段。
[0053]
其中，为便于处理，该预设时长可以是1秒。以单线程多进程的方式来对解码后的视频帧数据进行处理，实现视频帧数据的并行处理，提高相应的处理速度。
[0054]
步骤s103，获取该视频帧段中的有效视频帧，得到有效视频帧队列。
[0055]
其中，有效视频帧为存在图像内容的视频帧。可以理解的是，对于解码后的各视频帧中，可能会存在无图像内容的视频帧，通过该操作，可以忽略掉无实际内容的视频帧。
[0056]
步骤s104，基于目标渲染帧率和预设时长，从有效视频帧队列中抽取多个有效视频帧，得到目标视频帧队列。
[0057]
具体地，以目标渲染帧率为约束，对有效视频帧队列中的有效视频帧进行抽取，所抽取到的有效视频帧数量能够尽量满足目标渲染帧率。例如，假设预设时长为1秒，目标渲染帧率为40，有效视频帧队列中包含的有效视频帧多于40，则从中抽取40个有效视频帧；假设预设时长为1秒，目标渲染帧率为40，有效视频帧队列中包含的有效视频帧少于40，则保留所有有效视频帧。
[0058]
步骤s105，利用独立的浏览器视窗对目标视频帧队列进行渲染。
[0059]
具体地，利用新的浏览器视窗单独对目标视频帧队列进行渲染。即便网页应用中的javascript是单核的，通利用新的浏览器单独对目标视频帧队列进行渲染，可以保证系统内其中一个cpu核能够全力处理目标视频帧队列的渲染。由其他cpu核处理其他页面交互时，避免由于可用计算资源的不足而导致的视频帧渲染滞后。
[0060]
本技术首先接收来自服务器的视频流数据，并对所述视频流数据进行解码，得到解码后的视频帧数据。接着，以单线程多进程的方式从解码后的视频帧数据中获取预设时长的视频帧数据，得到视频帧段。对于所述视频帧段，从中提取出有效视频帧，得到有效视频帧队列。其中，所述有效视频帧为存在图像内容的视频帧。然后，基于目标渲染帧率和所述预设时长，从所述有效视频帧队列中抽取多个有效视频帧，得到目标视频帧队列。可以理解的是，所述目标视频帧队列中的视频帧数量得到了压缩。最后，利用独立的浏览器视窗对所述目标视频帧队列进行渲染。由于目标视频帧队列中的视频帧数量得到压缩，减少了渲染所需的计算资源，一定程度上提高了视频的实时性。
[0061]
在本技术的一些实施例中，上述步骤s104基于目标渲染帧率和预设时长，从有效视频帧队列中抽取多个有效视频帧之前，还可以包括：
[0062]
s1，获取视频帧段的第一时间戳及第二时间戳。
[0063]
其中，视频帧段的第一时间戳为该视频帧段的第一帧视频帧内所记录的时间戳，第一时间戳代表了视频拍摄时间；视频帧段的第二时间戳为获取到该视频帧段时的系统时间，第二时间戳代表了处理视频帧段时的时间。
[0064]
s2，将第二时间戳减去第一时间戳，得到时间延迟量。
[0065]
s3，判断该时间延迟量是否大于预设阈值；若是，执行s4；若否，执行s5。
[0066]
s4，基于时间延迟量确定目标渲染帧率。
[0067]
当时间延迟量较大时，意味着需要重新调整目标渲染帧率，以缓解视频延迟的状况。
[0068]
s5，将用户设定的渲染帧率确定为目标渲染帧率。
[0069]
当时间延迟量较小时，意味着当前的网络带宽及处理速度均能满足实时性要求，则不需要重新调整目标渲染帧率，以用户设定的渲染帧率进行视频渲染。需要注明的是，若用户没有主动设定一渲染帧率，则以默认的渲染帧率作为目标渲染帧率。
[0070]
上面计算得到的时间延迟量除了可以用来确定目标渲染帧率以外，还可以用于对用户进行显式的提示，以表明视频的延迟情况。
[0071]
基于此，在本技术的一些实施例中，在上述步骤s105利用独立的浏览器视窗对所述目标视频帧队列进行渲染之后，还可以包括：
[0072]
将时间延迟量展示在该浏览器视窗中。
[0073]
在本技术的一些实施例中，上述步骤s104基于目标渲染帧率和预设时长，从有效视频帧队列中抽取多个有效视频帧的过程，可以包括：
[0074]
s1，采用下述方程式计算得到目标帧数n
target
及抽帧间隔n
interval
：
[0075]ntaget
＝f
×
t
[0076][0077]
其中，f为目标渲染帧率，t为预设时长，n
valid
为有效视频帧队列中的有效帧的数量，为向下取整运算。
[0078]
s2，基于抽帧间隔n
interval
从有效视频帧队列中抽取n
target
个有效帧。
[0079]
示例性地，假设目标渲染帧率为40，预设时长为1秒，有效视频帧队列中的有效帧的数量为60，那么可以计算得到目标帧数为40，抽帧间隔为1。接着，以1为抽帧间隔从有效视频帧队列中抽取40个有效帧。
[0080]
假设目标渲染帧率为40，预设时长为1秒，有效视频帧队列中的有效帧的数量为30，那么可以计算得到目标帧数为40，抽帧间隔为0。而以0为抽帧间隔对有效视频帧队列进行抽取，意味着保留有效视频帧队列中的所有帧。
[0081]
在本技术的一些实施例中，上述步骤s105利用独立的浏览器视窗对目标视频帧队列进行渲染的过程，可以包括：
[0082]
s1，基于渲染引擎模板配置，启动一浏览器视窗。
[0083]
s2，控制该浏览器视窗对目标视频帧队列进行渲染。
[0084]
其中，渲染引擎模板配置发送自服务器，用于描述浏览器视窗的属性信息。可以理解的是，网页端发起视频播放时，必定向服务器提交了相应的网页请求，而该网页请求可以包括用户期望的画面质量、显示器参数和处理器参数等。其中，画面质量可以包括清晰程度(如超清、高清、标清等)和流畅程度(如时延情况、卡顿情况等)，通常决定于视频帧的分辨率及渲染帧率；显示器参数可以是显示器的尺寸，处理器参数可以是计算机的处理器参数，如cpu的品牌、核数及工作频率等。
[0085]
服务器接收到这个网页请求后，可以基于这个网页请求，结合显示器参数和处理器参数，确定视频的显示区域以及确定目标渲染帧率。此外，该渲染引擎模板配置还可以包括用于启动浏览器视窗的脚本命令。
[0086]
基于此，在本技术的一些实施例中，上述s1提及的渲染引擎模板配置可以包括浏览器视窗的位置及尺寸，上述s1基于渲染引擎模板配置，启动一浏览器视窗的过程，可以包
括：
[0087]
s11，通过脚本命令启动一浏览器视窗。
[0088]
s12，基于浏览器视窗的位置及尺寸，通过脚本命令设置该浏览器视窗的位置及尺寸。
[0089]
下面对本技术实施例提供的应用于网页端的实时视频流处理装置进行描述，下文描述的应用于网页端的实时视频流处理装置与上文描述的应用于网页端的实时视频流处理方法可相互对应参照。
[0090]
请参见图3，本技术实施例提供的应用于网页端的实时视频流处理装置，可以包括：
[0091]
视频流解码单元21，用于接收来自服务器的视频流数据，并对所述视频流数据进行解码，得到解码后的视频帧数据；
[0092]
视频段获取单元22，用于以单线程多进程的方式从解码后的视频帧数据中获取预设时长的视频帧数据，得到视频帧段；
[0093]
有效帧获取单元23，用于获取所述视频帧段中的有效视频帧，得到有效视频帧队列，所述有效视频帧为存在图像内容的视频帧；
[0094]
视频帧抽帧单元24，用于基于目标渲染帧率和所述预设时长，从所述有效视频帧队列中抽取多个有效视频帧，得到目标视频帧队列；
[0095]
视频帧渲染单元25，用于利用独立的浏览器视窗对所述目标视频帧队列进行渲染。
[0096]
在本技术的一些实施例中，本技术实施例提供的应用于网页端的实时视频流处理装置还可以包括延时计算单元，用于在视频帧抽帧单元24基于目标渲染帧率和所述预设时长，从所述有效视频帧队列中抽取多个有效视频帧之前：
[0097]
获取所述视频帧段的第一时间戳及第二时间戳，其中，所述视频帧段的第一时间戳为所述视频帧段的第一帧视频帧内所记录的时间戳，所述视频帧段的第二时间戳为获取到所述视频帧段时的系统时间；
[0098]
将所述第二时间戳减去所述第一时间戳，得到时间延迟量，并判断所述时间延迟量是否大于预设阈值；
[0099]
若是，基于所述时间延迟量确定目标渲染帧率；
[0100]
若否，将用户设定的渲染帧率确定为目标渲染帧率。
[0101]
在本技术的一些实施例中，本技术实施例提供的应用于网页端的实时视频流处理装置还可以包括延时展示单元，用于在视频帧渲染单元25利用独立的浏览器视窗对所述目标视频帧队列进行渲染之后：
[0102]
将所述时间延迟量展示在所述浏览器视窗中。
[0103]
在本技术的一些实施例中，视频帧抽帧单元24基于目标渲染帧率和所述预设时长，从所述有效视频帧队列中抽取多个有效视频帧的过程，可以包括：
[0104]
采用下述方程式计算得到目标帧数n
target
及抽帧间隔n
interval
：
[0105]ntaget
＝f
×
t
[0106]
[0107]
其中，f为目标渲染帧率，t为预设时长，n
valid
为有效视频帧队列中的有效帧的数量；
[0108]
基于抽帧间隔n
interval
从所述有效视频帧队列中抽取n
target
个有效帧。
[0109]
在本技术的一些实施例中，视频帧渲染单元25利用独立的浏览器视窗对所述目标视频帧队列进行渲染的过程，可以包括：
[0110]
基于渲染引擎模板配置，启动一浏览器视窗，其中，所述渲染引擎模板配置发送自服务器，用于描述浏览器视窗的属性信息；
[0111]
控制所述浏览器视窗对所述目标视频帧队列进行渲染。
[0112]
在本技术的一些实施例中，所述渲染引擎模板配置包括浏览器视窗的位置及尺寸；视频帧渲染单元25基于渲染引擎模板配置，启动一浏览器视窗的过程，可以包括：
[0113]
通过脚本命令启动一浏览器视窗；
[0114]
基于浏览器视窗的位置及尺寸，通过脚本命令设置所述浏览器视窗的位置及尺寸。
[0115]
在本技术的一些实施例中，所述视频流数据采用的视频编码标准为h.265。
[0116]
本技术实施例提供的应用于网页端的实时视频流处理装置可应用于应用于网页端的实时视频流处理设备，如计算机等。可选的，图4示出了应用于网页端的实时视频流处理设备的硬件结构框图，参照图4，应用于网页端的实时视频流处理设备的硬件结构可以包括：至少一个处理器31，至少一个通信接口32，至少一个存储器33和至少一个通信总线34。
[0117]
在本技术实施例中，处理器31、通信接口32、存储器33、通信总线34的数量为至少一个，且处理器31、通信接口32、存储器33通过通信总线34完成相互间的通信；
[0118]
处理器31可能是一个中央处理器cpu，或者是特定集成电路asic(application specific integrated circuit)，或者是被配置成实施本技术实施例的一个或多个集成电路等；
[0119]
存储器33可能包含高速ram存储器，也可能还包括非易失性存储器(non-volatile memory)等，例如至少一个磁盘存储器；
[0120]
其中，存储器33存储有程序，处理器31可调用存储器33存储的程序，所述程序用于：
[0121]
接收来自服务器的视频流数据，并对所述视频流数据进行解码，得到解码后的视频帧数据；
[0122]
以单线程多进程的方式从解码后的视频帧数据中获取预设时长的视频帧数据，得到视频帧段；
[0123]
获取所述视频帧段中的有效视频帧，得到有效视频帧队列，所述有效视频帧为存在图像内容的视频帧；
[0124]
基于目标渲染帧率和所述预设时长，从所述有效视频帧队列中抽取多个有效视频帧，得到目标视频帧队列；
[0125]
利用独立的浏览器视窗对所述目标视频帧队列进行渲染。
[0126]
可选的，所述程序的细化功能和扩展功能可参照上文描述。
[0127]
本技术实施例还提供一种存储介质，该存储介质可存储有适于处理器执行的程序，所述程序用于：
[0128]
接收来自服务器的视频流数据，并对所述视频流数据进行解码，得到解码后的视频帧数据；
[0129]
以单线程多进程的方式从解码后的视频帧数据中获取预设时长的视频帧数据，得到视频帧段；
[0130]
获取所述视频帧段中的有效视频帧，得到有效视频帧队列，所述有效视频帧为存在图像内容的视频帧；
[0131]
基于目标渲染帧率和所述预设时长，从所述有效视频帧队列中抽取多个有效视频帧，得到目标视频帧队列；
[0132]
利用独立的浏览器视窗对所述目标视频帧队列进行渲染。
[0133]
可选的，所述程序的细化功能和扩展功能可参照上文描述。
[0134]
综上所述：
[0135]
本技术首先接收来自服务器的视频流数据，并对所述视频流数据进行解码，得到解码后的视频帧数据。接着，以单线程多进程的方式从解码后的视频帧数据中获取预设时长的视频帧数据，得到视频帧段。对于所述视频帧段，从中提取出有效视频帧，得到有效视频帧队列。其中，所述有效视频帧为存在图像内容的视频帧。然后，基于目标渲染帧率和所述预设时长，从所述有效视频帧队列中抽取多个有效视频帧，得到目标视频帧队列。可以理解的是，所述目标视频帧队列中的视频帧数量得到了压缩。最后，利用独立的浏览器视窗对所述目标视频帧队列进行渲染。由于目标视频帧队列中的视频帧数量得到压缩，减少了渲染所需的计算资源，一定程度上提高了视频的实时性。此外，通过利用新的浏览器视窗单独对目标视频帧队列进行渲染，即便网页应用中的javascript是单核的，仍然可以保证系统内其中一个cpu核能够全力处理目标视频帧队列的渲染，同时由其他cpu核处理其他的页面交互，避免由于可用计算资源的不足而导致的视频帧渲染滞后，进一步确保视频渲染的实时性。
[0136]
最后，还需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个
……”
限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。
[0137]
本说明书中各个实施例采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间可以根据需要进行组合，且相同相似部分互相参见即可。
[0138]
对所公开的实施例的上述说明，使本领域专业技术人员能够实现或使用本技术。对这些实施例的多种修改对本领域的专业技术人员来说将是显而易见的，本文中所定义的一般原理可以在不脱离本技术的精神或范围的情况下，在其它实施例中实现。因此，本技术将不会被限制于本文所示的这些实施例，而是要符合与本文所公开的原理和新颖特点相一致的最宽的范围。
技术特征：1.一种应用于网页端的实时视频流处理方法，其特征在于，包括：接收来自服务器的视频流数据，并对所述视频流数据进行解码，得到解码后的视频帧数据；以单线程多进程的方式从解码后的视频帧数据中获取预设时长的视频帧数据，得到视频帧段；获取所述视频帧段中的有效视频帧，得到有效视频帧队列，所述有效视频帧为存在图像内容的视频帧；基于目标渲染帧率和所述预设时长，从所述有效视频帧队列中抽取多个有效视频帧，得到目标视频帧队列；利用独立的浏览器视窗对所述目标视频帧队列进行渲染。2.根据权利要求1所述的方法，其特征在于，基于目标渲染帧率和所述预设时长，从所述有效视频帧队列中抽取多个有效视频帧之前，还包括：获取所述视频帧段的第一时间戳及第二时间戳，其中，所述视频帧段的第一时间戳为所述视频帧段的第一帧视频帧内所记录的时间戳，所述视频帧段的第二时间戳为获取到所述视频帧段时的系统时间；将所述第二时间戳减去所述第一时间戳，得到时间延迟量，并判断所述时间延迟量是否大于预设阈值；若是，基于所述时间延迟量确定目标渲染帧率；若否，将用户设定的渲染帧率确定为目标渲染帧率。3.根据权利要求2所述的方法，其特征在于，利用独立的浏览器视窗对所述目标视频帧队列进行渲染之后，还包括：将所述时间延迟量展示在所述浏览器视窗中。4.根据权利要求1所述的方法，其特征在于，所述基于目标渲染帧率和所述预设时长，从所述有效视频帧队列中抽取多个有效视频帧的过程，包括：采用下述方程式计算得到目标帧数n
target
及抽帧间隔n
interval
：n
taget
＝f
×
t其中，f为目标渲染帧率，t为预设时长，n
valid
为有效视频帧队列中的有效帧的数量；基于抽帧间隔n
interval
从所述有效视频帧队列中抽取n
target
个有效帧。5.根据权利要求1所述的方法，其特征在于，利用独立的浏览器视窗对所述目标视频帧队列进行渲染的过程，包括：基于渲染引擎模板配置，启动一浏览器视窗，其中，所述渲染引擎模板配置发送自服务器，用于描述浏览器视窗的属性信息；控制所述浏览器视窗对所述目标视频帧队列进行渲染。6.根据权利要求5所述的方法，其特征在于，所述渲染引擎模板配置包括浏览器视窗的位置及尺寸；基于渲染引擎模板配置，启动一浏览器视窗的过程，包括：通过脚本命令启动一浏览器视窗；基于浏览器视窗的位置及尺寸，通过脚本命令设置所述浏览器视窗的位置及尺寸。
7.根据权利要求1～6任一项所述的方法，其特征在于，所述视频流数据采用的视频编码标准为h.265。8.一种应用于网页端的实时视频流处理装置，其特征在于，包括：视频流解码单元，用于接收来自服务器的视频流数据，并对所述视频流数据进行解码，得到解码后的视频帧数据；视频段获取单元，用于以单线程多进程的方式从解码后的视频帧数据中获取预设时长的视频帧数据，得到视频帧段；有效帧获取单元，用于获取所述视频帧段中的有效视频帧，得到有效视频帧队列，所述有效视频帧为存在图像内容的视频帧；视频帧抽帧单元，用于基于目标渲染帧率和所述预设时长，从所述有效视频帧队列中抽取多个有效视频帧，得到目标视频帧队列；视频帧渲染单元，用于利用独立的浏览器视窗对所述目标视频帧队列进行渲染。9.一种应用于网页端的实时视频流处理设备，其特征在于，包括：存储器和处理器；所述存储器，用于存储程序；所述处理器，用于执行所述程序，实现如权利要求1～7中任一项所述的应用于网页端的实时视频流处理方法的各个步骤。10.一种存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时，实现如权利要求1～7中任一项所述的应用于网页端的实时视频流处理方法的各个步骤。
技术总结本申请公开了一种应用于网页端的实时视频流处理方法、装置及相关设备，该方法包括：接收来自服务器的视频流数据，并对所述视频流数据进行解码，得到解码后的视频帧数据；以单线程多进程的方式从解码后的视频帧数据中获取预设时长的视频帧数据，得到视频帧段；获取所述视频帧段中的有效视频帧，得到有效视频帧队列，所述有效视频帧为存在图像内容的视频帧；基于目标渲染帧率和所述预设时长，从所述有效视频帧队列中抽取多个有效视频帧，得到目标视频帧队列；利用独立的浏览器视窗对所述目标视频帧队列进行渲染。本申请通过抽帧，减少了渲染所需的计算资源，一定程度上提高了视频的实时性。时性。时性。
技术研发人员：吴荣华 孔海翔 冯键霖 霍达
受保护的技术使用者：广州文远知行科技有限公司
技术研发日：2022.07.25
技术公布日：2022/11/1
