视频播放方法、装置、电子设备及存储介质与流程

本技术涉及视频数据处理，特别是涉及一种视频播放方法、装置、电子设备及存储介质。

背景技术：

1、随着经济的快速发展，视频监控市场也迅速发展，视频监控行业将逐步成熟，产业体系、价值链、产品类型以及应用场景将得到进一步完善。从细分市场构成来看，预计2023年全球政府机构及事业单位与商业领域视频监控将占到整体市场的86％以上，行业领域的视频监控需求在整体需求中仍占据主导地位。

2、为满足视频监控市场整体发展需求，目前视频监控领域的几个主要发展方向：

3、1、轻量化：b/s方式的web客户端，即基于浏览器的客户端，是一个更具吸引力的选择。其不受特定操作系统的限制，可以在各种操作系统上运行，从而适应多样化的使用场景。此外，web客户端通常更易于更新和维护，用户不需要安装额外的软件，只需通过浏览器访问安防系统即可实现监控和管理。

4、2、高清化：h.265编码格式在视频领域得到广泛应用，因其高效的压缩能力和更高质量的视频传输，特别是对于高分辨率和高帧率的视频内容。在安防行业，h.265的普及和应用也带来了新的要求和发展。

5、3、国产化：随着国产化操作系统的推广和普及，传统安防行业面临着一些变革和调整。传统的基于pc(personal computer，个人计算机)客户端的安防系统需要适应新的操作系统环境或采取更灵活的方式来满足用户需求。国产化操作系统和浏览器的普及会催生安防行业采用更灵活、适配性更强的解决方案。

6、4、多宫格：基于政法公安行业的综治中心视频监控需求，通常与应急指挥结合在一起，通过同时拉取多路视频，在大屏上进行轮巡播放，实时掌握社会治安综合态势。

7、针对多宫格播放，即浏览器单页面播放多路视频(即多宫格播放，目前在视频监控中心广泛使用，通过一个页面实现多路视频同时查看和轮巡)的情况，通常采用javascript或者html5的<video>和<audio>标签来进行视频的解码播放，存在着格式兼容、性能和加载等问题，导致多宫格播放难以实现。对于多路视频同时播放的需求则往往需要打开多个浏览器窗口来实现，但这又对计算资源提出了更高的要求，特别是在浏览器环境下，因为浏览器本身的限制难以同时处理大量数据，导致更大的延迟。

技术实现思路

1、本技术实施例所要解决的技术问题是提供一种视频播放方法、装置、电子设备及存储介质，以实现单页面内多路视频的流畅播放。

2、第一方面，本技术实施例提供了一种视频播放方法，所述方法包括：

3、对预先创建的web显示页面进行划分，得到所述web显示页面上的n个视频显示区域，n为大于1的正整数；

4、将获取的n路视频流缓存于所述n路视频流分别对应的fifo队列；

5、基于预先编译的js文件调用预先编译得到的wasm文件对从所述fifo队列读取的n路视频流进行视频解码处理，得到n个解码后的视频数据，所述wasm文件为基于webassembly技术对ffmpeg的解码库源代码进行编译得到的文件，所述js文件为基于所述webassembly技术的调用需求编译得到的用于调用所述wasm文件的文件，所述wasm文件和所述js文件预先加载于所述web显示页面内；

6、将所述n个解码后的视频数据中的每个解码后的视频数据分别显示于对应的n个视频显示区域中对应的视频显示区域。

7、可选地，所述将获取的n路视频流缓存于所述n路视频流分别对应的fifo队列，包括：

8、使用websocket流地址拉取所述n路视频流；

9、基于预先设置的丢帧策略，确定所述n路视频流是否满足缓存条件；

10、在确定所述n路视频流满足缓存条件的情况下，将所述n路视频流缓存于所述n路视频流分别对应的所述fifo队列；

11、在确定所述n路视频流不满足缓存条件的情况下，丢弃所述n路视频流中的指定非关键帧。

12、可选地，所述基于预先设置的丢帧策略，确定所述n路视频流是否满足缓存条件，包括：

13、在所述丢帧策略为可用空间策略的情况下，基于所述fifo队列的剩余存储空间与所述n路视频流的占用存储空间的大小关系，确定所述n路视频流是否满足缓存条件；

14、所述在确定所述n路视频流不满足缓存条件的情况下，丢弃所述n路视频流中的指定非关键帧，包括：

15、在所述剩余存储空间小于所述n路视频流的占用存储空间的情况下，丢弃所述n路视频流中的指定非关键帧。

16、可选地，所述基于预先设置的丢帧策略，确定所述n路视频流是否满足缓存条件，包括：

17、在所述丢帧策略为时间策略的情况下，基于单帧解码时间、单帧格式转换时间和单帧播放时间，确定所述n路视频流是否满足缓存条件；

18、所述在确定所述n路视频流不满足缓存条件的情况下，丢弃所述n路视频流中的指定非关键帧，包括：

19、在所述单帧解码时间和所述单帧格式转换时间的和值大于所述单帧播放时间的情况下，基于所述和值与所述单帧播放时间的差值，丢弃所述n路视频流中的指定非关键帧。

20、可选地，所述基于所述和值与所述单帧播放时间的差值，丢弃所述n路视频流中的指定非关键帧，包括：

21、在所述差值小于等于第一时长内的情况下，丢弃所述n路视频流中的p帧；

22、在所述差值大于所述第一时长，且小于等于第二时长的情况下，丢弃所述n路视频流中的b帧；

23、在所述差值大于所述第二时长的情况下，丢弃所述n路视频流中的i帧。

24、可选地，所述将所述n个解码后的视频数据中的每个解码后的视频数据分别显示于对应的n个视频显示区域中对应的视频显示区域，包括：

25、调用预先加载的每个所述视频显示区域对应的sdl2文件读取相应的解码后的视频数据；

26、基于所述sdl2文件将相应的解码后的视频数据渲染显示于对应的所述视频显示区域。

27、可选地，所述对预先创建的web显示页面进行划分，得到所述web显示页面上的n个视频显示区域，包括：

28、获取预先配置的n个视频显示区域在所述web显示页面上的显示位置和显示尺寸；

29、基于所述显示位置和所述显示尺寸在所述web显示页面上创建n个所述视频显示区域。

30、第二方面，本技术实施例提供了一种视频播放装置，所述装置包括：

31、视频显示区域获取模块，用于对预先创建的web显示页面进行划分，得到所述web显示页面上的n个视频显示区域，n为大于1的正整数；

32、视频流缓存模块，用于将获取的n路视频流缓存于所述n路视频流分别对应的fifo队列；

33、解码视频数据获取模块，用于基于预先编译的js文件调用预先编译得到的wasm文件对从所述fifo队列读取的n路视频流进行视频解码处理，得到n个解码后的视频数据，所述wasm文件为基于webassembly技术对ffmpeg的解码库源代码进行编译得到的文件，所述js文件为基于所述webassembly技术的调用需求编译得到的用于调用所述wasm文件的文件，所述wasm文件和所述js文件预先加载于所述web显示页面内；

34、多路视频显示模块，用于将所述n个解码后的视频数据中的每个解码后的视频数据分别显示于对应的n个视频显示区域中对应的视频显示区域。

35、可选地，所述视频流缓存模块包括：

36、视频流拉取单元，用于使用websocket流地址拉取所述n路视频流；

37、缓存条件确定单元，用于基于预先设置的丢帧策略，确定所述n路视频流是否满足缓存条件；

38、视频流缓存单元，用于在确定所述n路视频流满足缓存条件的情况下，将所述n路视频流缓存于所述n路视频流分别对应的所述fifo队列；

39、非关键帧丢弃单元，用于在确定所述n路视频流不满足缓存条件的情况下，丢弃所述n路视频流中的指定非关键帧。

40、可选地，所述缓存条件确定单元包括：

41、第一条件确定子单元，用于在所述丢帧策略为可用空间策略的情况下，基于所述fifo队列的剩余存储空间与所述n路视频流的占用存储空间的大小关系，确定所述n路视频流是否满足缓存条件；

42、所述非关键帧丢弃单元包括：

43、非关键帧丢弃子单元，用于在所述剩余存储空间小于所述n路视频流的占用存储空间的情况下，丢弃所述n路视频流中的指定非关键帧。

44、可选地，所述缓存条件确定单元包括：

45、第二条件确定子单元，用于在所述丢帧策略为时间策略的情况下，基于单帧解码时间、单帧格式转换时间和单帧播放时间，确定所述n路视频流是否满足缓存条件；

46、所述非关键帧丢弃单元包括：

47、指定帧丢弃子单元，用于在所述单帧解码时间和所述单帧格式转换时间的和值大于所述单帧播放时间的情况下，基于所述和值与所述单帧播放时间的差值，丢弃所述n路视频流中的指定非关键帧。

48、可选地，所述指定帧丢弃子单元包括：

49、p帧丢弃子单元，用于在所述差值小于等于第一时长内的情况下，丢弃所述n路视频流中的p帧；

50、b帧丢弃子单元，用于在所述差值大于所述第一时长，且小于等于第二时长的情况下，丢弃所述n路视频流中的b帧；

51、i帧丢弃子单元，用于在所述差值大于所述第二时长的情况下，丢弃所述n路视频流中的i帧。

52、可选地，所述多路视频显示模块包括：

53、解码数据读取单元，用于调用预先加载的每个所述视频显示区域对应的sdl2文件读取相应的解码后的视频数据；

54、多路视频显示单元，用于基于所述sdl2文件将相应的解码后的视频数据渲染显示于对应的所述视频显示区域。

55、可选地，所述视频显示区域获取模块包括：

56、显示信息获取单元，用于获取预先配置的n个视频显示区域在所述web显示页面上的显示位置和显示尺寸；

57、显示区域创建单元，用于基于所述显示位置和所述显示尺寸在所述web显示页面上创建n个所述视频显示区域。

58、第三方面，本技术实施例提供了一种电子设备，包括：

59、处理器、存储器以及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述处理器执行所述程序时实现上述任一项所述的视频播放方法。

60、第四方面，本技术实施例提供了一种计算机可读存储介质，当所述存储介质中的指令由电子设备的处理器执行时，使得电子设备能够执行上述任一项所述的视频播放方法。

61、与现有技术相比，本技术实施例包括以下优点：

62、本技术实施例中，通过对预先创建的web显示页面进行划分，得到web显示页面上的n个视频显示区域，n为大于1的正整数。将获取的n路视频流缓存于n路视频流分别对应的fifo队列。基于预先编译的js文件调用预先编译得到的wasm文件对从fifo队列读取的n路视频流进行视频解码处理，得到n个解码后的视频数据，wasm文件为基于webassembly技术对ffmpeg的解码库源代码进行编译得到的文件，js文件为基于webassembly技术的调用需求编译得到的用于调用wasm文件的文件，wasm文件和js文件预先加载于所述web显示页面内。将n个解码后的视频数据中的每个解码后的视频数据分别显示于对应的n个视频显示区域中对应的视频显示区域。本技术实施例通过基于webassembly技术来实现h.265播放的应用场景，实现多宫格视频在一个画布中的播放和控制，实现了一个web页面客户端上同时流畅播放多路的视频流的目的。

63、应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本技术。