CN115243102A - 基于Web技术的视频播放方法、装置、设备以及存储介质 - Google Patents
基于Web技术的视频播放方法、装置、设备以及存储介质 Download PDFInfo
- Publication number
- CN115243102A CN115243102A CN202211149182.XA CN202211149182A CN115243102A CN 115243102 A CN115243102 A CN 115243102A CN 202211149182 A CN202211149182 A CN 202211149182A CN 115243102 A CN115243102 A CN 115243102A
- Authority
- CN
- China
- Prior art keywords
- video
- data
- web
- stream data
- rendering
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Granted
Links
- 238000000034 method Methods 0.000 title claims abstract description 38
- 238000005516 engineering process Methods 0.000 title claims abstract description 35
- 238000009877 rendering Methods 0.000 claims abstract description 47
- 230000003993 interaction Effects 0.000 claims description 8
- 238000004590 computer program Methods 0.000 claims description 5
- 230000005540 biological transmission Effects 0.000 claims description 4
- 238000012545 processing Methods 0.000 claims description 2
- 230000006870 function Effects 0.000 description 5
- 238000011161 development Methods 0.000 description 4
- 230000006399 behavior Effects 0.000 description 3
- 238000013461 design Methods 0.000 description 3
- 230000009471 action Effects 0.000 description 2
- 230000002776 aggregation Effects 0.000 description 2
- 238000004220 aggregation Methods 0.000 description 2
- 238000010586 diagram Methods 0.000 description 2
- 230000000694 effects Effects 0.000 description 2
- 238000012986 modification Methods 0.000 description 2
- 230000004048 modification Effects 0.000 description 2
- 238000004806 packaging method and process Methods 0.000 description 2
- VYZAMTAEIAYCRO-UHFFFAOYSA-N Chromium Chemical compound [Cr] VYZAMTAEIAYCRO-UHFFFAOYSA-N 0.000 description 1
- 230000006978 adaptation Effects 0.000 description 1
- 230000009286 beneficial effect Effects 0.000 description 1
- 230000000903 blocking effect Effects 0.000 description 1
- 238000004140 cleaning Methods 0.000 description 1
- 238000004891 communication Methods 0.000 description 1
- 230000006835 compression Effects 0.000 description 1
- 238000007906 compression Methods 0.000 description 1
- 238000010276 construction Methods 0.000 description 1
- 238000011010 flushing procedure Methods 0.000 description 1
- 230000007246 mechanism Effects 0.000 description 1
- 238000012544 monitoring process Methods 0.000 description 1
- 230000008569 process Effects 0.000 description 1
- 238000011160 research Methods 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
Images
Classifications
-
- H—ELECTRICITY
- H04—ELECTRIC COMMUNICATION TECHNIQUE
- H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
- H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
- H04N21/40—Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
- H04N21/43—Processing of content or additional data, e.g. demultiplexing additional data from a digital video stream; Elementary client operations, e.g. monitoring of home network or synchronising decoder's clock; Client middleware
- H04N21/44—Processing of video elementary streams, e.g. splicing a video clip retrieved from local storage with an incoming video stream or rendering scenes according to encoded video stream scene graphs
- H04N21/44004—Processing of video elementary streams, e.g. splicing a video clip retrieved from local storage with an incoming video stream or rendering scenes according to encoded video stream scene graphs involving video buffer management, e.g. video decoder buffer or video display buffer
-
- H—ELECTRICITY
- H04—ELECTRIC COMMUNICATION TECHNIQUE
- H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
- H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
- H04N21/40—Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
- H04N21/43—Processing of content or additional data, e.g. demultiplexing additional data from a digital video stream; Elementary client operations, e.g. monitoring of home network or synchronising decoder's clock; Client middleware
- H04N21/44—Processing of video elementary streams, e.g. splicing a video clip retrieved from local storage with an incoming video stream or rendering scenes according to encoded video stream scene graphs
- H04N21/44012—Processing of video elementary streams, e.g. splicing a video clip retrieved from local storage with an incoming video stream or rendering scenes according to encoded video stream scene graphs involving rendering scenes according to scene graphs, e.g. MPEG-4 scene graphs
-
- H—ELECTRICITY
- H04—ELECTRIC COMMUNICATION TECHNIQUE
- H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
- H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
- H04N21/40—Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
- H04N21/43—Processing of content or additional data, e.g. demultiplexing additional data from a digital video stream; Elementary client operations, e.g. monitoring of home network or synchronising decoder's clock; Client middleware
- H04N21/44—Processing of video elementary streams, e.g. splicing a video clip retrieved from local storage with an incoming video stream or rendering scenes according to encoded video stream scene graphs
- H04N21/4402—Processing of video elementary streams, e.g. splicing a video clip retrieved from local storage with an incoming video stream or rendering scenes according to encoded video stream scene graphs involving reformatting operations of video signals for household redistribution, storage or real-time display
- H04N21/440218—Processing of video elementary streams, e.g. splicing a video clip retrieved from local storage with an incoming video stream or rendering scenes according to encoded video stream scene graphs involving reformatting operations of video signals for household redistribution, storage or real-time display by transcoding between formats or standards, e.g. from MPEG-2 to MPEG-4
-
- H—ELECTRICITY
- H04—ELECTRIC COMMUNICATION TECHNIQUE
- H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
- H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
- H04N21/60—Network structure or processes for video distribution between server and client or between remote clients; Control signalling between clients, server and network components; Transmission of management data between server and client, e.g. sending from server to client commands for recording incoming content stream; Communication details between server and client
- H04N21/63—Control signaling related to video distribution between client, server and network components; Network processes for video distribution between server and clients or between remote clients, e.g. transmitting basic layer and enhancement layers over different transmission paths, setting up a peer-to-peer communication via Internet between remote STB's; Communication protocols; Addressing
- H04N21/643—Communication protocols
- H04N21/6437—Real-time Transport Protocol [RTP]
-
- H—ELECTRICITY
- H04—ELECTRIC COMMUNICATION TECHNIQUE
- H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
- H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
- H04N21/80—Generation or processing of content or additional data by content creator independently of the distribution process; Content per se
- H04N21/85—Assembly of content; Generation of multimedia applications
- H04N21/858—Linking data to content, e.g. by linking an URL to a video object, by creating a hotspot
Landscapes
- Engineering & Computer Science (AREA)
- Multimedia (AREA)
- Signal Processing (AREA)
- Two-Way Televisions, Distribution Of Moving Picture Or The Like (AREA)
Abstract
本发明提供了一种基于Web技术的视频播放方法、装置、设备以及存储介质，所述方法包括：实时获取多种类型的视频码流数据，将所述视频码流数据按照第一协议加载到缓冲队列后对所述视频码流数据进行编码加载操作后得到第一流数据；将所述第一流数据进行解码和归一化处理后得到YUV帧数据；将所述YUV帧数据进行Web离屏画布异步渲染后，得到第一帧数据；将所述第一帧数据通过显示界面播放显示。本发明所述的基于Web技术的视频播放方法、装置、设备以及存储介质轻量易于使用，无需安装视频解码插件或者本地解码服务，可扩展支持其他编码类型。
Description
技术领域
本发明属于视频播放技术领域，尤其是涉及一种基于Web技术的视频播放方法、装置、设备以及存储介质。
背景技术
随着网络视频监控技术高速发展，视频的应用场景越来越广泛，各单位企业，家庭，个人都有对不同视频数据的消费需求，在视频智能分析领域，绝大部分摄像机视频码流均支持H.264和H.265两种编码格式，H.265视频编码相比H.264有着诸多优点：视频传输带宽减半、存储容量减半、画质提升等；因此，在大部分智慧安防项目中，H.265视频编码使用较为广泛，能够直接减少建设成本，提升用户体验。
但当下主流浏览器对H.265视频编码格式仍然未能够支持，主要还是支持H.264视频编码格式，随着Flash插件退出市场后，在Chrome浏览器下支持视频播放难度更甚，所以大部分智慧视频产品依然是在IE浏览器插件机制下支持着摄像机视频播放，插件播放模式下，存在一系列安全问题，需要对浏览器安全级别策略进行调整，首次使用需要下载并安装插件模块，经常出现加载不了，终端适配等问题，给用户使用带来了诸多不变。
随着Web前端技术的不断发展，WebAssembly技术提供了一种更加高效的前端应用可能性，WebAssembly是一种新型的二进制代码格式，这种格式的文件，可以被浏览器快速、高效地解释和执行，其设计目标在于是Web应用也可以有C/C++应用的运行速度；WebAssembly相对于传统JS的高效率，基于Web应用，有以下场景：1.视频图像处理；2.在线网络游戏；3.VR/AR应用；4.本地化智能行为识别；5.加解密服务应用等。
另外随着SVAC标准的颁布以及逐步推广，视频变解码标准（SVAC标准）也亟待在智慧视频应用场景中得到较好的支持，同时还需要考虑大量历史建设的视频前端设备还存在部分非标准视频变解码格式的兼容播放需求，如何解决上述问题是产业界共同关注和一直努力研究的课题；故此，本专利申请设计了一种基于Web技术的视频播放方法、装置、设备以及存储介质。
发明内容
有鉴于此，本发明旨在提出一种基于Web技术的视频播放方法、装置、设备以及存储介质，以期解决上述部分技术问题中的至少之一。
为达到上述目的，本发明的技术方案是这样实现的：
第一方面，本发明提供了一种基于Web技术的视频播放方法，所述方法包括：
实时获取多种类型的视频码流数据，将所述视频码流数据按照第一协议加载到缓冲队列后对所述视频码流数据进行编码加载操作后得到第一流数据；
将所述第一流数据进行解码和归一化处理后得到YUV帧数据；
将所述YUV帧数据进行Web离屏画布异步渲染后，得到第一帧数据；
将所述第一帧数据通过显示界面播放显示。
进一步的，所述多种类型的视频码流数据包括：
本地文件存储的文件流数据；
视频采集设备采集到的实时流数据；
录像存储设备存储的远端历史录像流数据。
进一步的，Web离屏画布异步渲染具体包括如下步骤：
1）主线程启动Web Worker线程，并请求初始化；
2）Web Worker线程创建离屏渲染OffscreenCanvas；
3）Web Worker线程获取离屏渲染OffscreenCanvas的画布绘制对象WebGLContext，并进行绘制；
4）Web Worker线程获取离屏渲染OffscreenCanvas的缓冲区ImageBitmap，然后转移回主线程；
5）主线程将Web Worker线程回传的缓冲区ImageBitmap分别绘制在两个不同的标签Canvas上，一个标签Canvas使用CanvasRenderingContext2D，另一个标签Canvas 使用ImageBitmapRenderingContext；
6）重复运行步骤3）至步骤5），完成对解码得到的YUV帧数据画面渲染，以得到第一帧数据。
第二方面，本发明还提供了一种基于Web技术的视频播放装置，所述装置包括视频数据加载层，用于实时获取多种类型的视频码流数据，将所述视频码流数据按照第一协议加载到缓冲队列后对所述视频码流数据进行编码加载操作后得到第一流数据；
视频解码层，用于将所述第一流数据进行解码和归一化处理后得到YUV帧数据；
视频渲染层，用于将所述YUV帧数据进行Web离屏画布异步渲染后，得到第一帧数据；
人机交互层，用于将所述第一帧数据通过显示界面播放显示。
进一步的，视频数据加载层、视频解码层和视频渲染层之间均通过Web worker线程进行数据传输，完成视频码流数据的加载、解码和渲染。
进一步的，人机交互层设置有若干API接口，用于为用户提供操作界面，以完成操作指令的输入。
第三方面，本发明还提供了一种电子设备，包括处理器，以及与处理器通信连接，且用于存储所述处理器可执行指令的存储器，所述处理器执行所述指令时实现第一方面所述的基于Web技术的视频播放方法的步骤。
第四方面，本发明还提供了一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现第一方面所述的基于Web技术的视频播放方法的步骤。
相对于现有技术，本发明所述的基于Web技术的视频播放方法、装置、设备以及存储介质具有以下有益效果：
（1）本发明所述的基于Web技术的视频播放方法、装置、设备以及存储介质通过对实时获取的视频码流数据，按照视频码流数据协议加载到缓冲队列，并进行编码数据加载，将编码分析的视频码流数据进行解码，解码后统一归化成YUV帧数据，对解码得到的YUV帧数据进行Web离屏画布异步渲染，将YUV帧数据渲染完成后得到的第一帧数据通过显示界面播放显示，解决了现阶段各类前端设备的编码格式不统一，对基于Web的免插件视频播放应用支撑不完善的问题，完整可靠高效的实现Web免插件视频播放应用需求，并实现不同类型的编码格式及封装格式下的高清视频的播放，具有良好的应用前景和经济价值。
（2）本发明所述的基于Web技术的视频播放方法、装置、设备以及存储介质轻量易于使用，无需安装视频解码插件或者本地解码服务，应用范围广，可扩展支持其他编码类型。
附图说明
构成本发明的一部分的附图用来提供对本发明的进一步理解，本发明的示意性实施例及其说明用于解释本发明，并不构成对本发明的不当限定。在附图中：
图1为本发明实施例所述的基于Web技术的视频播放方法流程图；
图2为本发明实施例所述的基于Web技术的视频播放装置结构示意图；
图3为本发明实施例所述的应用基于Web技术的视频播放方法的实时采集图。
具体实施方式
需要说明的是，在不冲突的情况下，本发明中的实施例及实施例中的特征可以相互组合。
下面将参考附图并结合实施例来详细说明本发明。
实施例一，本申请实施例提供了一种基于Web技术的视频播放方法，请参阅图1所示，所述方法包括：
实时获取多种类型的视频码流数据，将所述视频码流数据按照第一协议（利用第一协议对视频码流数据进行加载环冲，以优化对系统资源的占用）加载到缓冲队列后对所述视频码流数据进行编码加载操作后得到第一流数据；
将所述第一流数据进行解码和归一化处理后得到YUV帧数据；
将所述YUV帧数据进行Web离屏画布异步渲染后，得到第一帧数据；
将所述第一帧数据通过显示界面播放显示。
需要指出的是，尽管上述实施例中将各个步骤按照特定的先后顺序进行了描述，但是本领域技术人员可以理解，为了实现本发明的效果，不同的步骤之间并非必须按照这样的顺序执行，其可以同时（并行）执行或以其他顺序执行，这些变化都在本发明的保护范围之内。
所述多种类型的视频码流数据包括：本地文件存储的文件流数据；视频采集设备采集到的实时流数据；录像存储设备存储的远端历史录像流数据；本方法可同时支持本地文件播放、网络实时流播放、远端历史录像流播放。
Web离屏画布异步渲染具体包括如下步骤：
1）主线程启动Web Worker线程，并请求初始化；
2）Web Worker线程创建离屏渲染OffscreenCanvas；
3）Web Worker线程获取离屏渲染OffscreenCanvas的画布绘制对象WebGLContext，并进行绘制；
4）Web Worker线程获取离屏渲染OffscreenCanvas的缓冲区ImageBitmap，然后转移回主线程；
5）主线程将Web Worker线程回传的缓冲区ImageBitmap分别绘制在两个不同的标签Canvas上，一个标签Canvas使用CanvasRenderingContext2D，另一个标签Canvas 使用ImageBitmapRenderingContext；
6）重复运行步骤3）至步骤5），完成对解码得到的YUV帧数据画面渲染，以得到第一帧数据。
该方法是对现有的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技术的视频播放方法的实时采集图。
实施例二，本申请实施例提供了一种基于Web技术的视频播放装置，如图2所示，所述装置包括视频数据加载层，用于实时获取多种类型的视频码流数据，将所述视频码流数据按照第一协议加载到缓冲队列后对所述视频码流数据进行编码加载操作后得到第一流数据；
视频数据加载层负责将经过编码的视频码流数据按照视频码流数据协议加载到缓冲队列，同时感知上层的数据消费合理调配队列长度，优化对系统资源的占用；主要职能是适配不同类型的视频源，以达到能够播放本地视频文件、远端历史录像文件、实时视频流等多种视频源的目的；
视频数据加载层的特点在于插件化的架构，通过高度抽象的拉流聚合层以及各种不同的拉流器，包括但不限于http-ts拉流器、ws-ts拉流器、hls拉流器、quic-ts拉流器、本地文件拉流器等，后期可以通过内部扩展或者外部注册的方式增加不同的拉流器，以适配不同类型的推拉流方式，通过拉流器拉到流之后再经过拉流聚合层的数据清洗、数据整理，可以得到完全一致的视频流元数据，视频数据加载层解决不同类型推拉流方式存在的差异。
视频解码层，用于将所述第一流数据进行解码和归一化处理后得到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渲染层。
视频渲染层，用于将所述YUV帧数据进行Web离屏画布异步渲染后，得到第一帧数据；视频渲染层负责将解码得到的YUV帧数据呈现到显示设备，该层解决各种不同分辨率的视频源，高效流畅地显示到任意大小的窗口上，并且支持窗口缩放、电子缩放、播放速度设置等特性；本方案采用Web离屏渲染的方式，使用OffscreenCanvas离屏画布异步渲染；
Web离屏渲染方式，提供了一种异步且高资源利用率的方式来为WebGL的渲染准备基础结构，避免阻塞主线程，在正常的画面渲染，和在对视频画面进行缩放、翻转的场景下，都可以做到独立运行，不受主线程的影响，从而提升了渲染的帧率和避免了屏幕闪烁和减少卡顿，使视频播放过程更加流畅。
视频渲染层的特点在于使用了webgl2以及OffscreenCanvas离屏渲染技术，通过使用webgl2技术可以充分调动高性能gpu去渲染YUV420P的帧画面，并通过离屏渲染技术在UI线程外绘制好帧画面之后一次性绘制到UI线程中，极大的提高了渲染和绘制的性能。
视频加载层、视频解码层、视频渲染层都是通过Web worker线程实现的，视频码流二进制数据都是通过Transferable让渡内存控制权的方式转移二进制数据，避免了在线程中不断的复制巨大的二进制码流，从帧数据加载到开始创建唯一的二进制数据，直到帧画面渲染完成，通过不断优化内存数据以及线程行为，极大的提高了加载、解码和渲染的性能。
人机交互层，用于将所述第一帧数据通过显示界面播放显示；人机交互层负责为用户提供体验优良的操作界面，以及把用户的操作翻译成具体的动作指令，传达到播放器内部去执行，如画面分屏、全屏控制、播放速度控制、播放进度控制等；同时，该层还提供二次开发API接口，为更加个性化的界面定制、功能定制提供便利的基础支撑。
人机交互层的特点在于向外提供了所有的API接口，所有界面上使用到的功能和能力都是通过API接口实现的，所有的功能和能力均有API接口可用，所有的行为和状态均有事件可以响应，所有的状态均有配置项可以配置；人机交互层还带有调试器、状态监视器等协助开发、查错的能力。
实施例三，本申请实施例提供了一种电子设备，包括处理器，以及与处理器通信连接，且用于存储所述处理器可执行指令的存储器，所述处理器执行所述指令时实现实施例一所述的基于Web技术的视频播放方法的步骤。
实施例四，本申请实施例提供了一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现实施例一所述的基于Web技术的视频播放方法的步骤。
本领域普通技术人员可以意识到，结合本文中所公开的实施例描述的各示例的单元及方法步骤，能够以电子硬件、计算机软件或者二者的结合来实现，为了清楚地说明硬件和软件的可互换性，在上述说明中已经按照功能一般性地描述了各示例的组成及步骤。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本发明的范围。
在本申请所提供的几个实施例中，应该理解到，所揭露的方法和系统，可以通过其它的方式实现。例如，以上所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。上述单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本发明实施例方案的目的。
最后应说明的是：以上各实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述各实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分或者全部技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的范围，其均应涵盖在本发明的权利要求和说明书的范围当中。
以上所述仅为本发明的较佳实施例而已，并不用以限制本发明，凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。
Claims (8)
1.基于Web技术的视频播放方法，其特征在于，所述方法包括：
实时获取多种类型的视频码流数据，将所述视频码流数据按照第一协议加载到缓冲队列后对所述视频码流数据进行编码加载操作后得到第一流数据；
将所述第一流数据进行解码和归一化处理后得到YUV帧数据；
将所述YUV帧数据进行Web离屏画布异步渲染后，得到第一帧数据；
将所述第一帧数据通过显示界面播放显示。
2.根据权利要求1所述的基于Web技术的视频播放方法，其特征在于，所述多种类型的视频码流数据包括：
本地文件存储的文件流数据；
视频采集设备采集到的实时流数据；
录像存储设备存储的远端历史录像流数据。
3.根据权利要求1所述的基于Web技术的视频播放方法，其特征在于，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帧数据画面渲染，以得到第一帧数据。
4.基于Web技术的视频播放装置，其特征在于：所述装置包括视频数据加载层，用于实时获取多种类型的视频码流数据，将所述视频码流数据按照第一协议加载到缓冲队列后对所述视频码流数据进行编码加载操作后得到第一流数据；
视频解码层，用于将所述第一流数据进行解码和归一化处理后得到YUV帧数据；
视频渲染层，用于将所述YUV帧数据进行Web离屏画布异步渲染后，得到第一帧数据；
人机交互层，用于将所述第一帧数据通过显示界面播放显示。
5.根据权利要求4所述的基于Web技术的视频播放装置，其特征在于：视频数据加载层、视频解码层和视频渲染层之间均通过Web worker线程进行数据传输，完成视频码流数据的加载、解码和渲染。
6.根据权利要求4所述的基于Web技术的视频播放装置，其特征在于：人机交互层设置有若干API接口，用于为用户提供操作界面，以完成操作指令的输入。
7.一种电子设备，包括处理器，以及与处理器通信连接，且用于存储所述处理器可执行指令的存储器，其特征在于：所述处理器执行所述指令时实现权利要求1至3任一项所述的基于Web技术的视频播放方法的步骤。
8.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现权利要求1至3中任一项所述的基于Web技术的视频播放方法的步骤。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202211149182.XA CN115243102B (zh) | 2022-09-21 | 2022-09-21 | 基于Web技术的视频播放方法、装置、设备以及存储介质 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202211149182.XA CN115243102B (zh) | 2022-09-21 | 2022-09-21 | 基于Web技术的视频播放方法、装置、设备以及存储介质 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN115243102A true CN115243102A (zh) | 2022-10-25 |
| CN115243102B CN115243102B (zh) | 2023-02-28 |
Family
ID=83681561
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202211149182.XA Active CN115243102B (zh) | 2022-09-21 | 2022-09-21 | 基于Web技术的视频播放方法、装置、设备以及存储介质 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN115243102B (zh) |
Citations (9)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110198479A (zh) * | 2019-05-24 | 2019-09-03 | 浪潮软件集团有限公司 | 一种基于webassembly的浏览器音视频解码播放方法 |
| CN110662116A (zh) * | 2019-09-29 | 2020-01-07 | 中电福富信息科技有限公司 | 一种基于WebAssembly技术的Web播放器及播放方法 |
| CN111083167A (zh) * | 2019-12-31 | 2020-04-28 | 深圳市思博慧数据科技有限公司 | 一种跨浏览器的h.265视频播放方法 |
| CN112291628A (zh) * | 2020-11-25 | 2021-01-29 | 杭州视洞科技有限公司 | 一种基于web浏览器的多线程视频解码播放方法 |
| CN112738637A (zh) * | 2020-12-29 | 2021-04-30 | 南京金智视讯技术有限公司 | web页面实时视频播放方法、装置和计算机设备 |
| CN112770188A (zh) * | 2019-11-01 | 2021-05-07 | 杭州海康威视系统技术有限公司 | 一种视频播放方法及装置 |
| US20210274246A1 (en) * | 2018-06-20 | 2021-09-02 | Hangzhou Hikvision Digital Technology Co., Ltd. | Data Processing Method and Apparatus, Electronic Device, System, and Storage Medium |
| CN114095784A (zh) * | 2021-11-19 | 2022-02-25 | 浩云科技股份有限公司 | H.265格式视频流转码播放方法、系统、设备及介质 |
| CN114339382A (zh) * | 2021-12-24 | 2022-04-12 | 深圳市商汤科技有限公司 | 视频播放方法、装置、设备及计算机存储介质 |
-
2022
- 2022-09-21 CN CN202211149182.XA patent/CN115243102B/zh active Active
Patent Citations (9)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20210274246A1 (en) * | 2018-06-20 | 2021-09-02 | Hangzhou Hikvision Digital Technology Co., Ltd. | Data Processing Method and Apparatus, Electronic Device, System, and Storage Medium |
| CN110198479A (zh) * | 2019-05-24 | 2019-09-03 | 浪潮软件集团有限公司 | 一种基于webassembly的浏览器音视频解码播放方法 |
| CN110662116A (zh) * | 2019-09-29 | 2020-01-07 | 中电福富信息科技有限公司 | 一种基于WebAssembly技术的Web播放器及播放方法 |
| CN112770188A (zh) * | 2019-11-01 | 2021-05-07 | 杭州海康威视系统技术有限公司 | 一种视频播放方法及装置 |
| CN111083167A (zh) * | 2019-12-31 | 2020-04-28 | 深圳市思博慧数据科技有限公司 | 一种跨浏览器的h.265视频播放方法 |
| CN112291628A (zh) * | 2020-11-25 | 2021-01-29 | 杭州视洞科技有限公司 | 一种基于web浏览器的多线程视频解码播放方法 |
| CN112738637A (zh) * | 2020-12-29 | 2021-04-30 | 南京金智视讯技术有限公司 | web页面实时视频播放方法、装置和计算机设备 |
| CN114095784A (zh) * | 2021-11-19 | 2022-02-25 | 浩云科技股份有限公司 | H.265格式视频流转码播放方法、系统、设备及介质 |
| CN114339382A (zh) * | 2021-12-24 | 2022-04-12 | 深圳市商汤科技有限公司 | 视频播放方法、装置、设备及计算机存储介质 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN115243102B (zh) | 2023-02-28 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| WO2020010997A1 (zh) | 视频帧的提取方法、装置、计算机可读介质及电子设备 | |
| US8520734B1 (en) | Method and system for remotely communicating a computer rendered image sequence | |
| US9712589B2 (en) | System and method for playing a video on mobile web environments | |
| US20230362430A1 (en) | Techniques for managing generation and rendering of user interfaces on client devices | |
| CN110324706B (zh) | 一种视频封面的生成方法、装置及计算机存储介质 | |
| US11403121B2 (en) | Streaming per-pixel transparency information using transparency-agnostic video codecs | |
| CN105163127A (zh) | 视频分析方法及装置 | |
| US8799405B2 (en) | System and method for efficiently streaming digital video | |
| US20150117545A1 (en) | Layered Video Encoding and Decoding | |
| CN114071226B (zh) | 视频预览图的生成方法及装置、存储介质及电子设备 | |
| US20220094944A1 (en) | Systems and methods for video decoding | |
| US20150117515A1 (en) | Layered Encoding Using Spatial and Temporal Analysis | |
| CN111343503B (zh) | 视频的转码方法、装置、电子设备及存储介质 | |
| CN112929740A (zh) | 一种渲染视频流的方法、装置、存储介质及设备 | |
| US10237563B2 (en) | System and method for controlling video encoding using content information | |
| CN112486487A (zh) | 一种基于SoC NVR显示系统的快速开发方法 | |
| US20120218292A1 (en) | System and method for multistage optimized jpeg output | |
| CN113473126A (zh) | 视频流的处理方法、装置、电子设备及计算机可读介质 | |
| CN112804410A (zh) | 多显示屏同步显示方法及装置、视频处理设备和存储介质 | |
| CN116450149B (zh) | 一种硬件解码方法、设备及存储介质 | |
| CN114339412A (zh) | 视频质量增强方法、移动终端、存储介质及装置 | |
| CN114302176A (zh) | 视频播放方法及装置 | |
| CN113365150A (zh) | 视频处理方法和视频处理装置 | |
| CN115243102B (zh) | 基于Web技术的视频播放方法、装置、设备以及存储介质 | |
| CN114222185B (zh) | 视频播放方法、终端设备及存储介质 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |