CN114339382A - 视频播放方法、装置、设备及计算机存储介质 - Google Patents
视频播放方法、装置、设备及计算机存储介质 Download PDFInfo
- Publication number
- CN114339382A CN114339382A CN202111599901.3A CN202111599901A CN114339382A CN 114339382 A CN114339382 A CN 114339382A CN 202111599901 A CN202111599901 A CN 202111599901A CN 114339382 A CN114339382 A CN 114339382A
- Authority
- CN
- China
- Prior art keywords
- video
- stream
- browser
- data
- audio
- 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.)
- Withdrawn
Links
- 238000000034 method Methods 0.000 title claims abstract description 90
- 238000004806 packaging method and process Methods 0.000 claims abstract description 19
- 238000012545 processing Methods 0.000 claims description 15
- 238000005538 encapsulation Methods 0.000 claims description 12
- 238000009877 rendering Methods 0.000 claims description 10
- 238000004590 computer program Methods 0.000 claims description 6
- 230000008569 process Effects 0.000 description 23
- 238000010586 diagram Methods 0.000 description 10
- 230000003993 interaction Effects 0.000 description 7
- 230000000694 effects Effects 0.000 description 6
- 230000005540 biological transmission Effects 0.000 description 4
- 238000004891 communication Methods 0.000 description 4
- 230000006835 compression Effects 0.000 description 4
- 238000007906 compression Methods 0.000 description 4
- 230000006870 function Effects 0.000 description 4
- 230000011664 signaling Effects 0.000 description 4
- 230000008878 coupling Effects 0.000 description 3
- 238000010168 coupling process Methods 0.000 description 3
- 238000005859 coupling reaction Methods 0.000 description 3
- 230000003287 optical effect Effects 0.000 description 3
- 241000023320 Luma <angiosperm> Species 0.000 description 2
- 238000005516 engineering process Methods 0.000 description 2
- 230000014509 gene expression Effects 0.000 description 2
- OSWPMRLSEDHDFF-UHFFFAOYSA-N methyl salicylate Chemical compound COC(=O)C1=CC=CC=C1O OSWPMRLSEDHDFF-UHFFFAOYSA-N 0.000 description 2
- 230000001360 synchronised effect Effects 0.000 description 2
- 230000009286 beneficial effect Effects 0.000 description 1
- JEIPFZHSYJVQDO-UHFFFAOYSA-N iron(III) oxide Inorganic materials O=[Fe]O[Fe]=O JEIPFZHSYJVQDO-UHFFFAOYSA-N 0.000 description 1
- 210000001503 joint Anatomy 0.000 description 1
- 238000005457 optimization Methods 0.000 description 1
- 238000011084 recovery Methods 0.000 description 1
- 238000011160 research Methods 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
- 238000012546 transfer Methods 0.000 description 1
Images
Landscapes
- Information Transfer Between Computers (AREA)
Abstract
本申请实施例公开了一种视频播放方法、装置、设备及计算机存储介质，其中，所述方法包括：对原始视频数据进行解协议和解封装，得到视频裸流；在确定所述浏览器的视频播放器支持硬件解码的情况下，将所述裸视频流封装为预设格式的待播放视频；基于所述视频播放器播放所述待播放视频。
Description
技术领域
本申请实施例涉及互联网服务技术领域，涉及但不限于一种视频播放方法、装置、设备及计算机存储介质。
背景技术
用户需要在客户端的浏览器上观看视频采集终端采集到的实时音视频数据。实际情况中存在视频采集终端采集到多种多样格式的音视频数据，导致出现了一些格式的音视频数据无法直接在浏览器上播放的情况，进而无法满足用户的播放需求。由于用户对播放安全的要求，在不安装特殊软件或者插件的情况下，可以直接预览这些音视频数据，成了用户亟需解决的问题。
发明内容
有鉴于此，本申请实施例提供一种视频播放方法、装置、设备及计算机存储介质。
本申请实施例的技术方案是这样实现的：
第一方面，本申请实施例提供一种视频播放方法，应用于浏览器，所述方法包括：对原始视频数据进行解协议和解封装，得到视频裸流；在确定所述浏览器的视频播放器支持硬件解码的情况下，将所述裸视频流封装为预设格式的待播放视频；基于所述视频播放器播放所述待播放视频。
第二方面，本申请实施例提供一种视频播放装置，所述装置包括：解协议和解封装模块，用于对原始视频数据进行解协议和解封装，得到视频裸流；封装模块，用于在确定所述浏览器的视频播放器支持硬件解码的情况下，将所述裸视频流封装为预设格式的待播放视频；播放模块，用于基于所述视频播放器播放所述待播放视频。
第三方面，本申请实施例提供一种电子设备，包括存储器和处理器，所述存储器存储有可在处理器上运行的计算机程序，所述处理器执行所述程序时实现上述方法。
第四方面，本申请实施例提供一种计算机存储介质，存储有可执行指令，用于引起处理器执行时，实现上述方法。
本申请实施例中，浏览器首先对原始视频数据进行解协议和解封装，得到视频裸流；然后在确定所述浏览器的视频播放器支持硬件解码的情况下，将所述裸视频流封装为预设格式的待播放视频；最后基于所述视频播放器播放所述待播放视频。这样，可以实现不安装特殊软件或者插件，在判断浏览器原生支持硬件解码的情况下，充分发挥浏览器以及硬件的能力，实现直接预览音视频数据，解决了用户亟需解决的问题。
附图说明
图1为本申请实施例提供的一种视频播放方法的实现流程示意图；
图2为本申请实施例提供的一种视频播放方法的实现流程示意图；
图3A为本申请实施例提供的一种RTSP服务器、websocket代理服务器和浏览器交互流程的示意图；
图3B为本申请实施例提供的一种RTSP服务器、websocket代理服务器和浏览器交互流程的示意图；
图3C为本申请实施例提供的一种视频播放方法的实现流程示意图；
图4为本申请实施例提供的一种视频播放方法的实现流程示意图；
图5为本申请实施例提供的视频播放装置的组成结构示意图；
图6为本申请实施例提供的电子设备的一种硬件实体示意图。
具体实施方式
为使本申请实施例的目的、技术方案和优点更加清楚，下面将结合本申请实施例中的附图，对发明的具体技术方案做进一步详细描述。以下实施例用于说明本申请，但不用来限制本申请的范围。
在以下的描述中，涉及到“一些实施例”，其描述了所有可能实施例的子集，但是可以理解，“一些实施例”可以是所有可能实施例的相同子集或不同子集，并且可以在不冲突的情况下相互结合。
在以下的描述中，所涉及的术语“第一\第二\第三”仅仅是是区别类似的对象，不代表针对对象的特定排序，可以理解地，“第一\第二\第三”在允许的情况下可以互换特定的顺序或先后次序，以使这里描述的本申请实施例能够以除了在这里图示或描述的以外的顺序实施。
除非另有定义，本文所使用的所有的技术和科学术语与属于本申请的技术领域的技术人员通常理解的含义相同。本文中所使用的术语只是为了描述本申请实施例的目的，不是旨在限制本申请。
对本申请实施例进行进一步详细说明之前，对本申请实施例中涉及的名词和术语进行说明，本申请实施例中涉及的名词和术语适用于如下的解释。
WebAssembly：是一种新的编码方式，可以在网络浏览器中运行；是一种低级的类汇编语言，具有紧凑的二进制格式，可以接近原生的性能运行，并为诸如C/C++等语言提供一个编译目标，以便可以在全球广域网(World Wide Web，Web)上运行。也被设计为可以与JavaScript共存，允许两者一起工作。其中，JavaScript是Web的编程语言。
H.265：是视频编码专家组(Video Coding Experts Group，VCEG)继H.264之后所制定的新的视频编码标准。H.265标准围绕着现有的视频编码标准H.264，保留原来的某些技术，同时对一些相关的技术加以改进。新技术使用先进的技术用以改善码流、编码质量、延时和算法复杂度之间的关系，达到最优化设置。具体的研究内容包括：提高压缩效率、提高鲁棒性和错误恢复能力、减少实时的时延、减少信道获取时间和随机接入时延、降低复杂度等。H.264由于算法优化，可以低于1兆比特每秒(Mbps)的速度实现标清(分辨率在1280P*720以下)数字图像传送；H.265则可以实现利用1至2Mbps的传输速度传送720P(分辨率1280*720)普通高清音视频传送，其中，720P是美国电影电视工程师协会(SMPTE)制定的高等级高清数字电视的格式标准。
媒体源扩展(Media Source Extensions，MSE)提供了实现无插件且基于Web的流媒体的功能。使用MSE，媒体串流能够通过JavaScript创建，并且能通过使用<audio>和<video>元素进行播放。
实时流传输协议(Real Time Streaming Protocol，RTSP)：是应用级协议，控制实时数据的发送。RTSP提供了一个可扩展框架，使实时数据，如音频与视频的受控点播成为可能。
YUV：是一种颜色编码方法，YUV颜色空间中，Y表示明亮度(Luminance、Luma)，也就是灰阶值，U、V表示色度(Chrominance或Chroma)，描述的是色调和饱和度。
下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述。
应当理解，此处所描述的一些实施例仅仅用以解释本申请的技术方案，并不用于限定本申请的技术范围。
本申请实施例提供的一种视频播放方法，应用于浏览器，如图1所示，该方法包括：
步骤S110、对原始视频数据进行解协议和解封装，得到视频裸流；
这里，视频播放可以是指在浏览器容器内进行视频播放，主要分为实时视频播放和文件视频播放。实时视频播放是指对摄像机、相机等设备实时捕捉到的图像信号进行实时同步播放；文件视频播放是指对历史视频图像、电影或者其他视频格式的文件进行回放。
原始视频数据可以从RTSP客户端上获取到的格式为H.265的实时视频数据。
解协议的作用就是将流媒体协议的数据解析为标准的相应的封装格式数据。在一些实施例中，音视频在网络上传播的时候常常采用各种流媒体协议，例如HTTP、RTMP或者是MMS等等。这些协议在传输音视频数据的同时，也会传输一些信令信息。这些信令数据包括对播放的控制(播放、暂停、停止)，或者对网络状态的描述等。解协议的过程中会去除掉信令数据而只保留音视频数据。例如，采用RTMP协议传输的数据，经过解协议操作后，输出FLV格式的数据。
解封装的作用就是将输入的封装格式的数据，分离成为音频流压缩编码数据和视频流压缩编码数据。在一些实施例中，封装的格式种类很多，例如MP4、MKV、RMVB、TS、FLV、AVI等等，作用就是将已经压缩编码的视频数据和音频数据按照一定的格式放到一起。例如，FLV格式的数据经过解封装操作后，输出H.264或H.265编码的视频裸流和AAC编码的音频码流。
步骤S120、在确定所述浏览器的视频播放器支持硬件解码的情况下，将所述裸视频流封装为预设格式的待播放视频；
这里，嵌套在浏览器中的视频播放器的解码方式可以包括软件解码和硬件解码，软件解码是由中央处理器(central processing unit，CPU)执行软件程序对视频进行解码的一种解码方式，硬件解码是通过图形处理器(graphics processing unit，GPU)中的硬件解码器对视频进行解码的一种解码方式。解码的作用就是将视频/音频压缩编码数据解码成为非压缩的视频/音频原始数据。在一些实施例中，视频的压缩编码标准则包含H.265、H.264、MPEG2、VC-1等等。解码是整个***中最重要也是最复杂的一个环节。通过解码，压缩编码的视频数据输出成为非压缩的颜色数据，例如YUV420P、RGB等等。
在实施过程中，当浏览器中的视频播放器接收到播放指令时，可以利用HTML媒体元素中的HTMLMediaElement.canPlayType函数判断浏览器是否原生支持硬件解码，在确定浏览器的视频播放器支持硬件解码的情况下，将裸视频流封装为预设格式的待播放视频。这里，预设格式可以是支持硬件解码的格式，举例来说，苹果电脑上的safari浏览器支持H.265格式的视频文件，则可以将裸视频流封装为H.265格式的待播放视频。
步骤S130、基于所述视频播放器播放所述待播放视频。
本申请实施例中，浏览器首先对原始视频数据进行解协议和解封装，得到视频裸流；然后在确定所述浏览器的视频播放器支持硬件解码的情况下，将所述裸视频流封装为预设格式的待播放视频；最后基于所述视频播放器播放所述待播放视频。这样，可以实现不安装特殊软件或者插件，在判断浏览器原生支持硬件解码的情况下，充分发挥浏览器以及硬件的能力，实现直接预览音视频数据，解决了用户亟需解决的问题。
本申请实施例提供的一种视频播放方法，应用于浏览器，如图2所示，该方法包括：
步骤S210、获取与所述浏览器连接的websocket代理服务器发送的原始音视频数据，其中，所述原始音视频数据包括原始视频数据和原始音频数据；
这里，websocket代理服务器只需要转从发RTSP客户端上获取到的实时视频数据，而不需要将RTSP封装格式转换为其它封装格式如FLV或者MP4。即，实现一个Websocket代理RTSP的服务端。
在实施过程中，websocket代理服务器分别与浏览器和RTSP客户端连接。这样，浏览器可以获取与websocket代理服务器从RTSP客户端得到的原始音视频数据。原始音视频数据不仅包括原始视频数据，还包括原始音频数据。
图3A为本申请实施例提供的一种RTSP服务器、websocket代理服务器和浏览器交互流程的示意图，如图3A所示，该示意图包括：RTSP服务器31、websocket代理服务器32和浏览器33，其中，交互流程包括：
步骤S301、浏览器与RTSP服务器连接；
在实施过程中，浏览器33向websocket代理服务器32发送初始化命令，包括待连接的PTSP的IP地址和端口(port)；websocket代理服务器32基于待连接的PTSP的IP地址和端口(port)向对应的RTSP服务器31发送建立TCP连接的命令；RTSP服务器31向websocket代理服务器32返回TCP建立成功的命令；websocket代理服务器32在接收到TCP建立成功的命令后，向浏览器33发送返回的RTSP服务器对应的通道标识(ChannelID)，完成浏览器33与RTSP服务器31的连接。
步骤S302、浏览器与RTSP服务器数据交互。
在实施过程中，浏览器33向websocket代理服务器32发送命令，具体命令结构如图3A所示的结构34；websocket代理服务器32向RTSP服务器31发送命令，具体命令结构如图3A所示的结构35；RTSP服务器31向websocket代理服务器32发送命令，具体命令结构如图3A所示的结构36；websocket代理服务器32向浏览器3331发送命令，具体命令结构如图3A所示的结构37。这样，完成浏览器与RTSP服务器数据交互。
步骤S220、对所述原始音视频数据进行解协议，得到封装格式数据；
这里，可以对音视频数据同时进行解协议，以去除掉原始音频数据在传输过程中产生的信令数据而只保留视音频数据，即封装格式数据。
步骤S230、对所述封装格式数据进行解封装，得到视频裸流和音频裸流；
对所述封装格式数据进行解封装，即，将输入的封装格式数据，分离成为视频裸流和音频裸流。其中，高级音频编码(Advanced Audio Coding，AAC)原始码流(又称为“裸流”)是由一个一个的音频数据传输流(Audio Data Transport Stream，ADTS)帧组成的。ADTS是AAC的一种常见的传输格式。
步骤S240、在确定所述浏览器的视频播放器支持硬件解码的情况下，将所述裸视频流封装为预设格式的待播放视频；
步骤S250、基于所述浏览器的音频处理模块播放所述音频裸流，同时基于所述视频播放器播放所述音频裸流对应的待播放视频。
这里，待播放音频可以统一用AudioContext进行播放，独立于视频画面渲染逻辑，其中，AudioContext接口表示由链接在一起的音频模块构建的音频处理模块。
在实施过程中，需要浏览器在播放待播放音频和待播放视频的情况下，实现视音频同步，即，根据解封装模块处理过程中获取到的参数信息，同步解码出来的视频和音频数据，并将视频音频数据送至***的显卡和声卡播放出来。
本申请实施例中，浏览器首先获取与websocket代理服务器发送的原始音视频数据，然后对所述原始音视频数据进行解协议，得到封装格式数据；对所述封装格式数据进行解封装，得到视频裸流和音频裸流；在确定所述浏览器的视频播放器支持硬件解码的情况下，将所述裸视频流封装为预设格式的待播放视频；最后基于所述浏览器的音频处理模块播放所述音频裸流，同时基于所述视频播放器播放所述音频裸流对应的待播放视频。这样，独立于视频的渲染判断逻辑，原始音视频数据中的音频裸流可以从封装格式数据中解封出来，再使用视频播放器的音频处理模独立进行播放，实现统一整套方案中的音频处理效果。
上述步骤S240“在确定所述浏览器的视频播放器支持硬件解码的情况下，将所述裸视频流封装为预设格式的待播放视频”可以通过以下步骤实现：
步骤241、在确定所述浏览器的视频播放器支持硬件解码的情况下，将所述裸视频流封装为MP4格式的待播放视频；
这里，MP4(Moving Picture Experts Group 4Part 14，MPEG-4Part 14)为最常用的多媒体文件格式，广泛应用于各种终端中，是一套用于音频、视频信息的压缩编码标准。MP4文件可以作为各种视频文件的存储容器，存储于终端设备中或者网络服务器上，在终端设备中使用MP4播放器即可点播各种MP4文件。
由于支持硬件解码的视频播放器可以直接播放MP4格式的视频，所以可以将裸视频流封装为MP4格式。举例来说，可以在前端javascript代码中将解封装的H.265裸流封装为fragmented MP4格式，其中，fragmented MP4的文件结构与MP4文件结构不同，是基于MPEG-4Part 12的流媒体格式，是一个流式的封装格式。
步骤242、通过媒体源扩展接口将所述MP4格式的待播放视频加载至所述视频播放器。
在实施过程中，可以采用媒体源扩展(Media Source Extensions)接口，效可以有效提升视频播放的效果，特别是播放如4K的H.265视频。其中，4K分辨率属于超高清分辨率。在此分辨率下，观众将可以看清画面中的每一个细节，每一个特写。
本申请实施例中，在确定所述浏览器的视频播放器支持硬件解码的情况下，将所述裸视频流封装为MP4格式的待播放视频，通过媒体源扩展接口将所述MP4格式的待播放视频加载至所述视频播放器。这样，在浏览器原生支持MP4格式的时候，采用媒体源扩展接口，可以有效提升视频播放的效果。
上述步骤S220“对所述封装格式数据进行解封装，得到视频裸流和音频裸流”可以通过以下步骤实现：
步骤221、对所述封装格式数据进行解封装，得到音频压缩数据和视频压缩数据；
步骤222、对所述音频压缩数据进行解压缩，得到所述音频裸流；
步骤223、对所述视频压缩数据进行解压缩，得到所述视频裸流。
本申请实施例中，首先对所述封装格式数据进行解封装，得到音频压缩数据和视频压缩数据，然后分别对音频压缩数据和视频压缩数据进行解压缩，可以有效得到音频裸流和视频裸流。
上述步骤S210“获取与所述浏览器连接的websocket代理服务器发送的原始音视频数据”可以通过以下步骤实现：
步骤211、基于websocket协议，发送所述原始视频数据的播放指令至与所述websocket代理服务器；
步骤212、获取所述websocket代理服务器发送的原始音频数据，其中，所述原始音频数据是所述websocket代理服务器基于RTP协议从RTSP服务器获取的。
图3B为本申请实施例提供的一种RTSP服务器、websocket代理服务器和浏览器交互流程的示意图，如图3B所示，该示意图包括：RTSP服务器31、websocket代理服务器32和浏览器33，其中，
浏览器33与websocket代理服务器32是基于websocket代理RTSP协议交互；websocket代理服务器32与RTSP服务器31是正常的RTSP交互。
在实施过程中，浏览器33基于websocket协议，发送所述原始视频数据的播放指令至与所述websocket代理服务器32；浏览器33获取所述websocket代理服务器32发送的原始音频数据，其中，所述原始音频数据是所述websocket代理服务器32基于RTP协议从RTSP服务器31获取的。
本申请实施例中，利用websocket代理服务器实现浏览器33从RTSP服务器获取原始音频数据。
本申请实施例提供的一种视频播放方法，应用于浏览器，如图3C所示，该方法包括：
步骤S311、对原始视频数据进行解协议和解封装，得到视频裸流；
步骤S312、在确定所述浏览器的视频播放器支持硬件解码的情况下，将所述裸视频流封装为预设格式的待播放视频；
步骤S313、在确定所述浏览器的视频播放器不支持硬件解码的情况下，利用WebAssembly解码所述裸视频流得到至少一帧YUV图像；
WebAssembly是运行在Web平台上的Assembly。WebAssembly可以看做是Web平台的x86硬件通用指令集，作为一层中间语言，上层对接Java、Python、Rust、Cpp，让这些语言都能编译成统一的格式，用于Web平台运行。
在实施过程中，在确定所述浏览器的视频播放器不支持硬件解码的情况下，WebAssembly将从RTSP拿到的裸视频流用开源解码器解码，得到每一帧的YUV图像。
步骤S314、基于所述裸视频流的帧率，渲染每一帧所述YUV图像得到所述待播放视频；
在实施过程中，可以使用Web图形库(Web Graphics Library，WebGL)渲染每一帧YUV图像得到所述待播放视频。
步骤S315、基于所述视频播放器播放所述待播放视频。
本申请实施例中，浏览器在确定所述浏览器的视频播放器不支持硬件解码的情况下，利用WebAssembly解码所述裸视频流得到至少一帧YUV图像基于所述裸视频流的帧率，渲染每一帧所述YUV图像得到所述待播放视频。这样，在浏览器的视频播放器不支持硬件解码的情况下，可以使用Webassembly进行软件解码，以实现有效播放待播放视频。
上述步骤S320“在确定所述浏览器的视频播放器不支持硬件解码的情况下，利用WebAssembly解码所述裸视频流得到至少一帧YUV图像”可以通过以下步骤实现：
步骤S321、在确定所述浏览器的视频播放器不支持硬件解码的情况下，利用WebAssembly将所述原始视频数据的解码器编译为WASM文件；
如图3B所示的浏览器33，获取解封装的H265裸流，可以利用emscripten编译工具将FFmpeg编译为WASM文件，即将c/c++编译为WASM的工具链，实现在网页上无插件调用。其中，FFmpeg是一套可以用来记录、转换数字音频、视频，并能将其转化为流的开源计算机程序。
步骤S322、基于所述WASM文件解码所述裸视频流得到至少一帧YUV图。
本申请实施例中，可以利用WebAssembly将所述原始视频数据的解码器编译为WASM文件，然后基于WASM文件解码所述裸视频流得到至少一帧YUV图。
网页由于安全原因有一些限制，不能直接发起传输控制协议(TransmissionControl Protocol，TCP)连接，只能用业务层的HTTP或者Websocket协议。要在网页上播放RTSP视频，需要部署一个中转服务，让原始视频数据能通过Websocket或者HTTP协议传输到网页上。由于HTTP、WebSocket等应用层协议，都是基于TCP协议来传输数据的，所以可以把这些高级协议理解成对TCP的封装。
现有技术中网页(浏览器)播放视频，不能直接播放H.265，只能播放H.264视频，需要将现有的H.265视频转成H.264才能直接播放，要部署一个转码服务，这种转码服务对服务器性能压力比较大。
图4为本申请实施例提供的一种音视频播放方法的流程示意图，如图4所述，该方法包括：
步骤S410、使用javascript对封装格式数据进行解封装，其中，封装格式数据是对所述原始音视频数据进行解协议得到的；
利用HTML媒体元素中的HTMLMediaElement.canPlayType函数判断浏览器是否原生支持H.265编码，如果原生支持，前端javascript代码中将解封装的H.265裸流封装为fragmented MP4格式；通过浏览器暴露的标准的Media Source Extensions接口，充分利用硬件的能力进行H.265解码；如果浏览器不原生支持H.265编码，则获取解封装的H.265裸流；
步骤S420、用开源解码器解码H.265裸流，得到每一帧的YUV图像；
将开源解码器如libde265通过emscripten编译工具编译为WebAssembly(WASM)，可在网页上无插件调用；其中，WASM是一种使用非JavaScript代码，并使其在浏览器中运行的方法。这些代码可以是C、C++或Rust等。可以被编译进的浏览器，在CPU上以接近原生的速度运行。这些代码的形式是二进制文件，可以直接在JavaScript中当作模块来用。在实施过程中，使用开源解码器libde265解码H.265裸流，可以得到每一帧的YUV图片数据。
这里，YUV，是一种颜色编码方法。YUV颜色空间中，Y表示明亮度(Luminance、Luma)，也就是灰阶值，U、V表示色度(Chrominance或Chroma)，描述的是色调和饱和度，YUV是模拟信号。
步骤S430、基于裸视频流的帧率，使用三维绘图协议渲染每一帧YUV图像，以实现播放视频；
在实施过程中，可以使用Web图形库(Web Graphics Library，WebGL)渲染每一帧YUV图像，以实现播放视频。
步骤S440、在浏览器原生支持硬件解码的情况下，将解封装的H.265裸流封装为fragmented MP4格式；
在浏览器原生支持硬件解码的情况下，利用前端javascript代码将解封装的H.265裸流封装为fragmented MP4格式。在实施过程中，可以通过浏览器暴露的标准的Media Source Extensions接口，充分利用硬件的能力进行H.265解码。
步骤S450、对原始音视频数据中的音频数据基于AudioContext进行播放；
在实施过程中，可以先解封原始音频数据中的音频数据，得到高级音频编码(Advanced Audio Coding，AAC)裸流，再使用AudioContext独立播放AAC裸流。这样音频部分可以独立于视频的渲染判断逻辑，以达到统一整套方案中的音频处理的效果。
这里，AudioContext接口表示由链接在一起的音频模块构建的音频处理图，每个模块由一个AudioNode表示。音频上下文控制包含的节点的创建和音频处理或解码的执行。
本申请实施例中，通过前端javascript代码中判断，在浏览器原生支持H.265视频的时候(如苹果电脑上的safari浏览器)，直接使用Media SourceExtension，充分发挥浏览器以及硬件的能力；在浏览器不能支持的时候，将开源解码器编译成WebAssembly，实现网页无插件解码H.265视频。这样，支持网页上无插件播放RTSP封装的H.265视频，并能自动判断浏览器对编码的支持情况，选择最优方案。同时支持在原生支持的浏览器上，利用浏览器实现硬件解码；在不原生H.265的浏览器上使用Webassembly进行软件解码；音频统一用AudioContext进行播放，独立于视频画面渲染逻辑。
基于前述的实施例，本申请实施例提供一种视频播放装置，该装置包括所包括的各模块，各模块包括各子模块，可以通过电子设备中的处理器来实现；当然也可通过具体的逻辑电路实现；在实施的过程中，处理器可以为中央处理器(CPU)、微处理器(MPU)、数字信号处理器(DSP)或现场可编程门阵列(FPGA)等。
图5为本申请实施例提供的视频播放装置的组成结构示意图，如图5所示，所述装置500包括：
解协议和解封装模块510，用于对原始视频数据进行解协议和解封装，得到视频裸流；
封装模块520，用于在确定所述浏览器的视频播放器支持硬件解码的情况下，将所述裸视频流封装为预设格式的待播放视频；
播放模块530，用于基于所述视频播放器播放所述待播放视频。
在一些实施例中，所述视频播放装置还包括获取模块，用于获取与所述浏览器连接的websocket代理服务器发送的原始音视频数据，其中，所述原始音视频数据包括原始视频数据和原始音频数据；对应地，所述解协议和解封装模块510包括解协议子模块和解封装子模块，其中，所述解协议子模块，用于对所述原始音视频数据进行解协议，得到封装格式数据；所述解封装子模块，用于对所述封装格式数据进行解封装，得到视频裸流和音频裸流
在一些实施例中，所述播放模块530，还用于基于所述视频播放器的音频处理模块播放所述音频裸流，同时基于所述视频播放器播放所述音频裸流对应的待播放视频。
在一些实施例中，所述封装模块520包括封装子模块和加载子模块，其中，所述封装子模块，用于在确定所述浏览器的视频播放器支持硬件解码的情况下，将所述裸视频流封装为MP4格式的待播放视频；所述加载子模块，用于通过媒体源扩展接口将所述MP4格式的待播放视频加载至所述视频播放器。
在一些实施例中，所述装置还包括解码模块和渲染模块，其中，所述解码模块，用于在确定所述浏览器的视频播放器不支持硬件解码的情况下，利用WebAssembly解码所述裸视频流得到至少一帧YUV图像；所述渲染模块，用于基于所述裸视频流的帧率，渲染每一帧所述YUV图像得到所述待播放视频。
在一些实施例中，所述解码模块包括编译子模块和解码子模块，其中，所述编译子模块，用于在确定所述浏览器的视频播放器不支持硬件解码的情况下，利用WebAssembly将所述原始视频数据的解码器编译为WASM文件；所述解码子模块，用于基于所述WASM文件解码所述裸视频流得到至少一帧YUV图像。
在一些实施例中，所述获取模块包括发送子模块和获取子模块，其中，所述发送子模块，用于基于websocket协议，发送所述原始视频数据的播放指令至与所述websocket代理服务器；所述获取子模块，用于获取所述websocket代理服务器发送的原始音频数据，其中，所述原始音频数据是所述websocket代理服务器基于RTP协议从RTSP服务器获取的。
以上装置实施例的描述，与上述方法实施例的描述是类似的，具有同方法实施例相似的有益效果。对于本申请装置实施例中未披露的技术细节，请参照本申请方法实施例的描述而理解。
需要说明的是，本申请实施例中，如果以软件功能模块的形式实现上述方法，并作为独立的产品销售或使用时，也可以存储在一个计算机可读取存储介质中。基于这样的理解，本申请实施例的技术方案本质上或者说对相关技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得电子设备(可以是手机、平板电脑、笔记本电脑、台式计算机等)执行本申请各个实施例所述方法的全部或部分。而前述的存储介质包括：U盘、移动硬盘、只读存储器(Read Only Memory，ROM)、磁碟或者光盘等各种可以存储程序代码的介质。这样，本申请实施例不限制于任何特定的硬件和软件结合。
对应地，本申请实施例提供一种计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时实现上述实施例中提供的视频播放方法中的步骤。
对应地，本申请实施例提供一种电子设备，图6为本申请实施例提供的电子设备的一种硬件实体示意图，如图6所示，该设备600的硬件实体包括：包括存储器601和处理器602，所述存储器601存储有可在处理器602上运行的计算机程序，所述处理器602执行所述程序时实现上述实施例中提供的视频播放方法中的步骤。
存储器601配置为存储由处理器602可执行的指令和应用，还可以缓存待处理器602以及电子设备600中各模块待处理或已经处理的数据(例如，图像数据、音频数据、语音通信数据和视频通信数据)，可以通过闪存(FLASH)或随机访问存储器(Random AccessMemory，RAM)实现。
这里需要指出的是：以上存储介质和设备实施例的描述，与上述方法实施例的描述是类似的，具有同方法实施例相似的有益效果。对于本申请存储介质和设备实施例中未披露的技术细节，请参照本申请方法实施例的描述而理解。
应理解，说明书通篇中提到的“一个实施例”或“一实施例”意味着与实施例有关的特定特征、结构或特性包括在本申请的至少一个实施例中。因此，在整个说明书各处出现的“在一个实施例中”或“在一实施例中”未必一定指相同的实施例。此外，这些特定的特征、结构或特性可以任意适合的方式结合在一个或多个实施例中。应理解，在本申请的各种实施例中，上述各过程的序号的大小并不意味着执行顺序的先后，各过程的执行顺序应以其功能和内在逻辑确定，而不应对本申请实施例的实施过程构成任何限定。上述本申请实施例序号仅仅为了描述，不代表实施例的优劣。
需要说明的是，在本文中，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者装置不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者装置所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括该要素的过程、方法、物品或者装置中还存在另外的相同要素。
在本申请所提供的几个实施例中，应该理解到，所揭露的设备和方法，可以通过其它的方式实现。以上所描述的设备实施例仅仅是示意性的，例如，所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，如：多个单元或组件可以结合，或可以集成到另一个***，或一些特征可以忽略，或不执行。另外，所显示或讨论的各组成部分相互之间的耦合、或直接耦合、或通信连接可以是通过一些接口，设备或单元的间接耦合或通信连接，可以是电性的、机械的或其它形式的。
上述作为分离部件说明的单元可以是、或也可以不是物理上分开的，作为单元显示的部件可以是、或也可以不是物理单元；既可以位于一个地方，也可以分布到多个网络单元上；可以根据实际的需要选择其中的部分或全部单元来实现本实施例方案的目的。
另外，在本申请各实施例中的各功能单元可以全部集成在一个处理单元中，也可以是各单元分别单独作为一个单元，也可以两个或两个以上单元集成在一个单元中；上述集成的单元既可以采用硬件的形式实现，也可以采用硬件加软件功能单元的形式实现。
本领域普通技术人员可以理解：实现上述方法实施例的全部或部分步骤可以通过程序指令相关的硬件来完成，前述的程序可以存储于计算机可读取存储介质中，该程序在执行时，执行包括上述方法实施例的步骤；而前述的存储介质包括：移动存储设备、只读存储器(Read Only Memory，ROM)、磁碟或者光盘等各种可以存储程序代码的介质。
或者，本申请上述集成的单元如果以软件功能模块的形式实现并作为独立的产品销售或使用时，也可以存储在一个计算机可读取存储介质中。基于这样的理解，本申请实施例的技术方案本质上或者说对相关技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得电子设备(可以是手机、平板电脑、笔记本电脑、台式计算机等)执行本申请各个实施例所述方法的全部或部分。而前述的存储介质包括：移动存储设备、ROM、磁碟或者光盘等各种可以存储程序代码的介质。
本申请所提供的几个方法实施例中所揭露的方法，在不冲突的情况下可以任意组合，得到新的方法实施例。
本申请所提供的几个产品实施例中所揭露的特征，在不冲突的情况下可以任意组合，得到新的产品实施例。
本申请所提供的几个方法或设备实施例中所揭露的特征，在不冲突的情况下可以任意组合，得到新的方法实施例或设备实施例。
以上所述，仅为本申请的实施方式，但本申请的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本申请揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本申请的保护范围之内。因此，本申请的保护范围应以所述权利要求的保护范围为准。
Claims (10)
1.一种视频播放方法，应用于浏览器，其特征在于，所述方法包括：
对原始视频数据进行解协议和解封装，得到视频裸流；
在确定所述浏览器的视频播放器支持硬件解码的情况下，将所述裸视频流封装为预设格式的待播放视频；
基于所述视频播放器播放所述待播放视频。
2.如权利要求1所述的方法，其特征在于，在所述对原始视频数据进行解协议和解封装，得到视频裸流之前，所述方法还包括：
获取与所述浏览器连接的websocket代理服务器发送的原始音视频数据，其中，所述原始音视频数据包括原始视频数据和原始音频数据；
对应地，所述对原始视频数据进行解协议和解封装，得到视频裸流，包括：
对所述原始音视频数据进行解协议，得到封装格式数据；
对所述封装格式数据进行解封装，得到视频裸流和音频裸流。
3.如权利要求2所述的方法，其特征在于，所述基于所述视频播放器播放所述待播放视频，包括：
基于所述视频播放器的音频处理模块播放所述音频裸流，同时基于所述视频播放器播放所述音频裸流对应的待播放视频。
4.如权利要求1所述的方法，其特征在于，所述在确定所述浏览器的视频播放器支持硬件解码的情况下，将所述裸视频流封装为预设格式的待播放视频，包括：
在确定所述浏览器的视频播放器支持硬件解码的情况下，将所述裸视频流封装为MP4格式的待播放视频；
通过媒体源扩展接口将所述MP4格式的待播放视频加载至所述视频播放器。
5.如权利要求1至4任一项所述的方法，其特征在于，所述方法还包括：
在确定所述浏览器的视频播放器不支持硬件解码的情况下，利用WebAssembly解码所述裸视频流得到至少一帧YUV图像；
基于所述裸视频流的帧率，渲染每一帧所述YUV图像得到所述待播放视频。
6.如权利要求5所述的方法，其特征在于，所述在确定所述浏览器的视频播放器不支持硬件解码的情况下，利用WebAssembly解码所述裸视频流得到至少一帧YUV图像，包括：
在确定所述浏览器的视频播放器不支持硬件解码的情况下，利用WebAssembly将所述原始视频数据的解码器编译为WASM文件；
基于所述WASM文件解码所述裸视频流得到至少一帧YUV图像。
7.如权利要求2所述的方法，其特征在于，所述获取与所述浏览器连接的websocket代理服务器发送的原始音视频数据，包括：
基于websocket协议，发送所述原始视频数据的播放指令至与所述websocket代理服务器；
获取所述websocket代理服务器发送的原始音频数据，其中，所述原始音频数据是所述websocket代理服务器基于RTP协议从RTSP服务器获取的。
8.一种视频播放装置，其特征在于，所述装置包括：
解协议和解封装模块，用于对原始视频数据进行解协议和解封装，得到视频裸流；
封装模块，用于在确定所述浏览器的视频播放器支持硬件解码的情况下，将所述裸视频流封装为预设格式的待播放视频；
播放模块，用于基于所述视频播放器播放所述待播放视频。
9.一种电子设备，包括存储器和处理器，所述存储器存储有可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述程序时实现权利要求1至7任一项所述方法中的步骤。
10.一种计算机存储介质，其特征在于，存储有可执行指令，用于引起处理器执行时，实现权利要求1至7任一项所述的方法中的步骤。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111599901.3A CN114339382A (zh) | 2021-12-24 | 2021-12-24 | 视频播放方法、装置、设备及计算机存储介质 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111599901.3A CN114339382A (zh) | 2021-12-24 | 2021-12-24 | 视频播放方法、装置、设备及计算机存储介质 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN114339382A true CN114339382A (zh) | 2022-04-12 |
Family
ID=81013300
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202111599901.3A Withdrawn CN114339382A (zh) | 2021-12-24 | 2021-12-24 | 视频播放方法、装置、设备及计算机存储介质 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN114339382A (zh) |
Cited By (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN115209220A (zh) * | 2022-06-08 | 2022-10-18 | 阿里巴巴（中国）有限公司 | 视频文件处理方法、装置、存储介质及电子设备 |
| CN115243102A (zh) * | 2022-09-21 | 2022-10-25 | 天讯瑞达通信技术有限公司 | 基于Web技术的视频播放方法、装置、设备以及存储介质 |
| CN115643426A (zh) * | 2022-10-17 | 2023-01-24 | 中国科学院空间应用工程与技术中心 | 一种面向空间应用领域的通用视频播放方法和*** |
| CN117499570A (zh) * | 2023-10-13 | 2024-02-02 | 唐山开用网络信息服务有限公司 | 远程提讯*** |
| CN117692681A (zh) * | 2023-12-21 | 2024-03-12 | 广州开得联智能科技有限公司 | 视频流播放方法、装置、设备及可读存储介质 |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111355976A (zh) * | 2020-03-31 | 2020-06-30 | 北京东方国信科技股份有限公司 | 一种基于hevc标准的视频直播方法及*** |
| CN112788431A (zh) * | 2020-12-24 | 2021-05-11 | 四川云从天府人工智能科技有限公司 | 基于html5的视频播放方法、装置、***、介质及浏览器 |
| CN112822518A (zh) * | 2021-04-19 | 2021-05-18 | 浙江华创视讯科技有限公司 | 视频播放方法、装置、***、电子设备和存储介质 |
| CN113556579A (zh) * | 2021-06-07 | 2021-10-26 | 武汉众智数字技术有限公司 | 一种基于HTML5的web无插件播放安防实时视频的方法 |
-
2021
- 2021-12-24 CN CN202111599901.3A patent/CN114339382A/zh not_active Withdrawn
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111355976A (zh) * | 2020-03-31 | 2020-06-30 | 北京东方国信科技股份有限公司 | 一种基于hevc标准的视频直播方法及*** |
| CN112788431A (zh) * | 2020-12-24 | 2021-05-11 | 四川云从天府人工智能科技有限公司 | 基于html5的视频播放方法、装置、***、介质及浏览器 |
| CN112822518A (zh) * | 2021-04-19 | 2021-05-18 | 浙江华创视讯科技有限公司 | 视频播放方法、装置、***、电子设备和存储介质 |
| CN113556579A (zh) * | 2021-06-07 | 2021-10-26 | 武汉众智数字技术有限公司 | 一种基于HTML5的web无插件播放安防实时视频的方法 |
Cited By (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN115209220A (zh) * | 2022-06-08 | 2022-10-18 | 阿里巴巴（中国）有限公司 | 视频文件处理方法、装置、存储介质及电子设备 |
| CN115243102A (zh) * | 2022-09-21 | 2022-10-25 | 天讯瑞达通信技术有限公司 | 基于Web技术的视频播放方法、装置、设备以及存储介质 |
| CN115243102B (zh) * | 2022-09-21 | 2023-02-28 | 天讯瑞达通信技术有限公司 | 基于Web技术的视频播放方法、装置、设备以及存储介质 |
| CN115643426A (zh) * | 2022-10-17 | 2023-01-24 | 中国科学院空间应用工程与技术中心 | 一种面向空间应用领域的通用视频播放方法和*** |
| CN115643426B (zh) * | 2022-10-17 | 2023-11-21 | 中国科学院空间应用工程与技术中心 | 一种面向空间应用领域的通用视频播放方法和*** |
| CN117499570A (zh) * | 2023-10-13 | 2024-02-02 | 唐山开用网络信息服务有限公司 | 远程提讯*** |
| CN117692681A (zh) * | 2023-12-21 | 2024-03-12 | 广州开得联智能科技有限公司 | 视频流播放方法、装置、设备及可读存储介质 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US11073969B2 (en) | Multiple-mode system and method for providing user selectable video content | |
| CN114339382A (zh) | 视频播放方法、装置、设备及计算机存储介质 | |
| US10567809B2 (en) | Selective media playing method and apparatus according to live streaming and recorded streaming | |
| US9514783B2 (en) | Video editing with connected high-resolution video camera and video cloud server | |
| US10979785B2 (en) | Media playback apparatus and method for synchronously reproducing video and audio on a web browser | |
| CN110740363A (zh) | 投屏方法和***、电子设备 | |
| JP5444476B2 (ja) | コンテンツデータ生成装置、コンテンツデータ生成方法、コンピュータプログラムおよび記録媒体 | |
| US20140139735A1 (en) | Online Media Data Conversion Method, Online Video Playing Method and Corresponding Device | |
| CN111355976B (zh) | 一种基于hevc标准的视频直播方法及*** | |
| KR20140004194A (ko) | 뷰 스위칭을 위한 방법 및 디바이스 | |
| US10965969B2 (en) | Method and apparatus for playing online television program | |
| CN112788431A (zh) | 基于html5的视频播放方法、装置、***、介质及浏览器 | |
| CN113938470B (zh) | 一种浏览器播放rtsp数据源的方法、装置以及流媒体服务器 | |
| KR20180086113A (ko) | 웹 브라우저 상에서 비디오와 오디오를 동기화하여 재생하는 미디어 재생 장치 및 방법 | |
| EP2312859A2 (en) | Method and system for communicating 3D video via a wireless communication link | |
| WO2022116822A1 (zh) | 沉浸式媒体的数据处理方法、装置和计算机可读存储介质 | |
| CN116233490A (zh) | 视频合成方法、***、装置、电子设备及存储介质 | |
| CN115134664A (zh) | 实时视频流的播放方法及***、非易失性存储介质 | |
| US20190158898A1 (en) | Hybrid transmission protocol | |
| CN114125550A (zh) | 一种视频处理方法、装置、设备及可读存储介质 | |
| CN115278366B (zh) | 虚拟机视频流的数据处理方法、装置以及电子设备 | |
| CN113141536B (zh) | 视频封面的添加方法、装置、电子设备及存储介质 | |
| CN105323635B (zh) | 一种视频处理***及方法 | |
| CN114466225A (zh) | 视频数据播放方法及装置、电子设备和可读存储介质 | |
| CN117651186A (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 | ||
| WW01 | Invention patent application withdrawn after publication | ||
| WW01 | Invention patent application withdrawn after publication |
Application publication date: 20220412 |