基于Web技术的视频播放方法、装置、设备以及存储介质与流程

基于web技术的视频播放方法、装置、设备以及存储介质
技术领域
1.本发明属于视频播放技术领域，尤其是涉及一种基于web技术的视频播放方法、装置、设备以及存储介质。


背景技术：

2.随着网络视频监控技术高速发展，视频的应用场景越来越广泛，各单位企业，家庭，个人都有对不同视频数据的消费需求，在视频智能分析领域，绝大部分摄像机视频码流均支持h.264和h.265两种编码格式，h.265视频编码相比h.264有着诸多优点：视频传输带宽减半、存储容量减半、画质提升等；因此，在大部分智慧安防项目中，h.265视频编码使用较为广泛，能够直接减少建设成本，提升用户体验。
3.但当下主流浏览器对h.265视频编码格式仍然未能够支持，主要还是支持h.264视频编码格式，随着flash插件退出市场后，在chrome浏览器下支持视频播放难度更甚，所以大部分智慧视频产品依然是在ie浏览器插件机制下支持着摄像机视频播放，插件播放模式下，存在一系列安全问题，需要对浏览器安全级别策略进行调整，首次使用需要下载并安装插件模块，经常出现加载不了，终端适配等问题，给用户使用带来了诸多不变。
4.随着web前端技术的不断发展，webassembly技术提供了一种更加高效的前端应用可能性，webassembly是一种新型的二进制代码格式，这种格式的文件，可以被浏览器快速、高效地解释和执行，其设计目标在于是web应用也可以有c/c 应用的运行速度；webassembly相对于传统js的高效率，基于web应用，有以下场景：1.视频图像处理；2.在线网络游戏；3.vr/ar应用；4.本地化智能行为识别；5.加解密服务应用等。
5.另外随着svac标准的颁布以及逐步推广，视频变解码标准（svac标准）也亟待在智慧视频应用场景中得到较好的支持，同时还需要考虑大量历史建设的视频前端设备还存在部分非标准视频变解码格式的兼容播放需求，如何解决上述问题是产业界共同关注和一直努力研究的课题；故此，本专利申请设计了一种基于web技术的视频播放方法、装置、设备以及存储介质。


技术实现要素：

6.有鉴于此，本发明旨在提出一种基于web技术的视频播放方法、装置、设备以及存储介质，以期解决上述部分技术问题中的至少之一。
7.为达到上述目的，本发明的技术方案是这样实现的：第一方面，本发明提供了一种基于web技术的视频播放方法，所述方法包括：实时获取多种类型的视频码流数据，将所述视频码流数据按照第一协议加载到缓冲队列后对所述视频码流数据进行编码加载操作后得到第一流数据；将所述第一流数据进行解码和归一化处理后得到yuv帧数据；将所述yuv帧数据进行web离屏画布异步渲染后，得到第一帧数据；将所述第一帧数据通过显示界面播放显示。
8.进一步的，所述多种类型的视频码流数据包括：本地文件存储的文件流数据；视频采集设备采集到的实时流数据；录像存储设备存储的远端历史录像流数据。
9.进一步的，web离屏画布异步渲染具体包括如下步骤：1）主线程启动web worker线程，并请求初始化；2）web worker线程创建离屏渲染offscreencanvas；3）web worker线程获取离屏渲染offscreencanvas的画布绘制对象webgl context，并进行绘制；4）web worker线程获取离屏渲染offscreencanvas的缓冲区imagebitmap，然后转移回主线程；5）主线程将web worker线程回传的缓冲区imagebitmap分别绘制在两个不同的标签canvas上，一个标签canvas使用canvasrenderingcontext2d，另一个标签canvas 使用imagebitmaprenderingcontext；6）重复运行步骤3）至步骤5），完成对解码得到的yuv帧数据画面渲染，以得到第一帧数据。
10.第二方面，本发明还提供了一种基于web技术的视频播放装置，所述装置包括视频数据加载层，用于实时获取多种类型的视频码流数据，将所述视频码流数据按照第一协议加载到缓冲队列后对所述视频码流数据进行编码加载操作后得到第一流数据；视频解码层，用于将所述第一流数据进行解码和归一化处理后得到yuv帧数据；视频渲染层，用于将所述yuv帧数据进行web离屏画布异步渲染后，得到第一帧数据；人机交互层，用于将所述第一帧数据通过显示界面播放显示。
11.进一步的，视频数据加载层、视频解码层和视频渲染层之间均通过web worker线程进行数据传输，完成视频码流数据的加载、解码和渲染。
12.进一步的，人机交互层设置有若干api接口，用于为用户提供操作界面，以完成操作指令的输入。
13.第三方面，本发明还提供了一种电子设备，包括处理器，以及与处理器通信连接，且用于存储所述处理器可执行指令的存储器，所述处理器执行所述指令时实现第一方面所述的基于web技术的视频播放方法的步骤。
14.第四方面，本发明还提供了一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现第一方面所述的基于web技术的视频播放方法的步骤。
15.相对于现有技术，本发明所述的基于web技术的视频播放方法、装置、设备以及存储介质具有以下有益效果：（1）本发明所述的基于web技术的视频播放方法、装置、设备以及存储介质通过对实时获取的视频码流数据，按照视频码流数据协议加载到缓冲队列，并进行编码数据加载，将编码分析的视频码流数据进行解码，解码后统一归化成yuv帧数据，对解码得到的yuv帧数据进行web离屏画布异步渲染，将yuv帧数据渲染完成后得到的第一帧数据通过显示界面播放显示，解决了现阶段各类前端设备的编码格式不统一，对基于web的免插件视频播放应
用支撑不完善的问题，完整可靠高效的实现web免插件视频播放应用需求，并实现不同类型的编码格式及封装格式下的高清视频的播放，具有良好的应用前景和经济价值。
16.（2）本发明所述的基于web技术的视频播放方法、装置、设备以及存储介质轻量易于使用，无需安装视频解码插件或者本地解码服务，应用范围广，可扩展支持其他编码类型。
附图说明
17.构成本发明的一部分的附图用来提供对本发明的进一步理解，本发明的示意性实施例及其说明用于解释本发明，并不构成对本发明的不当限定。在附图中：图1为本发明实施例所述的基于web技术的视频播放方法流程图；图2为本发明实施例所述的基于web技术的视频播放装置结构示意图；图3为本发明实施例所述的应用基于web技术的视频播放方法的实时采集图。
具体实施方式
18.需要说明的是，在不冲突的情况下，本发明中的实施例及实施例中的特征可以相互组合。
19.下面将参考附图并结合实施例来详细说明本发明。
20.实施例一，本技术实施例提供了一种基于web技术的视频播放方法，请参阅图1所示，所述方法包括：实时获取多种类型的视频码流数据，将所述视频码流数据按照第一协议（利用第一协议对视频码流数据进行加载环冲，以优化对系统资源的占用）加载到缓冲队列后对所述视频码流数据进行编码加载操作后得到第一流数据；将所述第一流数据进行解码和归一化处理后得到yuv帧数据；将所述yuv帧数据进行web离屏画布异步渲染后，得到第一帧数据；将所述第一帧数据通过显示界面播放显示。
21.需要指出的是，尽管上述实施例中将各个步骤按照特定的先后顺序进行了描述，但是本领域技术人员可以理解，为了实现本发明的效果，不同的步骤之间并非必须按照这样的顺序执行，其可以同时（并行）执行或以其他顺序执行，这些变化都在本发明的保护范围之内。
22.所述多种类型的视频码流数据包括：本地文件存储的文件流数据；视频采集设备采集到的实时流数据；录像存储设备存储的远端历史录像流数据；本方法可同时支持本地文件播放、网络实时流播放、远端历史录像流播放。
23.web离屏画布异步渲染具体包括如下步骤：1）主线程启动web worker线程，并请求初始化；2）web worker线程创建离屏渲染offscreencanvas；3）web worker线程获取离屏渲染offscreencanvas的画布绘制对象webgl context，并进行绘制；4）web worker线程获取离屏渲染offscreencanvas的缓冲区imagebitmap，然后转移回主线程；
5）主线程将web worker线程回传的缓冲区imagebitmap分别绘制在两个不同的标签canvas上，一个标签canvas使用canvasrenderingcontext2d，另一个标签canvas 使用imagebitmaprenderingcontext；6）重复运行步骤3）至步骤5），完成对解码得到的yuv帧数据画面渲染，以得到第一帧数据。
24.该方法是对现有的web免插件视频播放应用需求的完整可靠高效实现，基于谷歌blink浏览器内核，通过浏览器内核的任务拆解和多线程化等特性能够充分利用多核cpu及更多主机硬件资源，实现各种编码格式及封装格式的高清视频的播放，支持http、rtsp、rtmp等多种视频传输协议，可以支持h.264、h.265主流视频编码标准格式，同时可扩展支持svac视频编码标准，支持点播，直播，以及安防应用所需的多视窗高清视频播放；同时实现针对特殊视频应用需求，可以扩展其他音视频解码codec来适应复杂的基于web的视频播放需求；本发明基于现阶段各类前端设备的编码格式不统一，对基于web的免插件视频播放应用支撑不完善的情况，通过对实时获取的视频码流数据，按照视频码流数据协议加载到缓冲队列，并进行编码数据加载，将编码分析的视频码流数据进行解码，解码后统一归化成yuv帧数据，对解码得到的yuv帧数据进行web离屏画布异步渲染，将渲染完成后的yuv帧数据通过显示界面播放显示，利用本方法无需安装视频解码插件或者本地解码服务，应用范围广，突破浏览器解码能力限制，支持h.264、h.265（hevc）主流视频解码，可扩展支持其他编码类型，同时，利用web离屏画布异步渲染技术，有效提升渲染的帧率和避免屏幕闪烁及减少卡顿，使视频播放过程更加流畅，如图3所示的应用基于web技术的视频播放方法的实时采集图。
25.实施例二，本技术实施例提供了一种基于web技术的视频播放装置，如图2所示，所述装置包括视频数据加载层，用于实时获取多种类型的视频码流数据，将所述视频码流数据按照第一协议加载到缓冲队列后对所述视频码流数据进行编码加载操作后得到第一流数据；视频数据加载层负责将经过编码的视频码流数据按照视频码流数据协议加载到缓冲队列，同时感知上层的数据消费合理调配队列长度，优化对系统资源的占用；主要职能是适配不同类型的视频源，以达到能够播放本地视频文件、远端历史录像文件、实时视频流等多种视频源的目的；视频数据加载层的特点在于插件化的架构，通过高度抽象的拉流聚合层以及各种不同的拉流器，包括但不限于http-ts拉流器、ws-ts拉流器、hls拉流器、quic-ts拉流器、本地文件拉流器等，后期可以通过内部扩展或者外部注册的方式增加不同的拉流器，以适配不同类型的推拉流方式，通过拉流器拉到流之后再经过拉流聚合层的数据清洗、数据整理，可以得到完全一致的视频流元数据，视频数据加载层解决不同类型推拉流方式存在的差异。
26.视频解码层，用于将所述第一流数据进行解码和归一化处理后得到yuv帧数据；视频解码层负责将编码的视频码流数据解码得到可渲染的yuv帧数据，由于现有的浏览器普遍不支持压缩比较高的h.265（hevc）编码，本方案利用现有的开源编解码库ffmpeg以及webassembly技术，将c/c 语言编写的高性能解码库编译成字节码，再通过javascript调
用来运行，以达到接近浏览器原生解码性能的目的，并且同时支持h.264和h.265（hevc）格式的解码；另外，利用现有浏览器支撑webworks的特性，能并行地处理计算密集型任务，本方案能够做到多路视频再多分屏窗口中独立播放互不影响，满足了多画面同时调阅、视频上墙等典型需求场景；视频解码层的特点在于js-cpp桥以及cpp层插件化的架构，通过js-cpp桥打通了js到cpp wasm之间的调用，实现了同步、异步、回调、生成器、迭代、递归等大部分原生调用的效果；cpp层插件化架构一方面通过开源编解码库ffmpeg解码标准编码，另一方面可以通过自定义实现特殊解码器可以解不同非标准码流，解码后统一归一化成yuv420p的帧数据回传到js渲染层。
27.视频渲染层，用于将所述yuv帧数据进行web离屏画布异步渲染后，得到第一帧数据；视频渲染层负责将解码得到的yuv帧数据呈现到显示设备，该层解决各种不同分辨率的视频源，高效流畅地显示到任意大小的窗口上，并且支持窗口缩放、电子缩放、播放速度设置等特性；本方案采用web离屏渲染的方式，使用offscreencanvas离屏画布异步渲染；web离屏渲染方式，提供了一种异步且高资源利用率的方式来为webgl的渲染准备基础结构，避免阻塞主线程，在正常的画面渲染，和在对视频画面进行缩放、翻转的场景下，都可以做到独立运行，不受主线程的影响，从而提升了渲染的帧率和避免了屏幕闪烁和减少卡顿，使视频播放过程更加流畅。
28.视频渲染层的特点在于使用了webgl2以及offscreencanvas离屏渲染技术，通过使用webgl2技术可以充分调动高性能gpu去渲染yuv420p的帧画面，并通过离屏渲染技术在ui线程外绘制好帧画面之后一次性绘制到ui线程中，极大的提高了渲染和绘制的性能。
29.视频加载层、视频解码层、视频渲染层都是通过web worker线程实现的，视频码流二进制数据都是通过transferable让渡内存控制权的方式转移二进制数据，避免了在线程中不断的复制巨大的二进制码流，从帧数据加载到开始创建唯一的二进制数据，直到帧画面渲染完成，通过不断优化内存数据以及线程行为，极大的提高了加载、解码和渲染的性能。
30.人机交互层，用于将所述第一帧数据通过显示界面播放显示；人机交互层负责为用户提供体验优良的操作界面，以及把用户的操作翻译成具体的动作指令，传达到播放器内部去执行，如画面分屏、全屏控制、播放速度控制、播放进度控制等；同时，该层还提供二次开发api接口，为更加个性化的界面定制、功能定制提供便利的基础支撑。
31.人机交互层的特点在于向外提供了所有的api接口，所有界面上使用到的功能和能力都是通过api接口实现的，所有的功能和能力均有api接口可用，所有的行为和状态均有事件可以响应，所有的状态均有配置项可以配置；人机交互层还带有调试器、状态监视器等协助开发、查错的能力。
32.实施例三，本技术实施例提供了一种电子设备，包括处理器，以及与处理器通信连接，且用于存储所述处理器可执行指令的存储器，所述处理器执行所述指令时实现实施例一所述的基于web技术的视频播放方法的步骤。
33.实施例四，本技术实施例提供了一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现实施例一所述的基于web技术的视频播放方法的步骤。
34.本领域普通技术人员可以意识到，结合本文中所公开的实施例描述的各示例的单元及方法步骤，能够以电子硬件、计算机软件或者二者的结合来实现，为了清楚地说明硬件和软件的可互换性，在上述说明中已经按照功能一般性地描述了各示例的组成及步骤。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本发明的范围。
35.在本技术所提供的几个实施例中，应该理解到，所揭露的方法和系统，可以通过其它的方式实现。例如，以上所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。上述单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本发明实施例方案的目的。
36.最后应说明的是：以上各实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述各实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分或者全部技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的范围，其均应涵盖在本发明的权利要求和说明书的范围当中。
37.以上所述仅为本发明的较佳实施例而已，并不用以限制本发明，凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。