CN117812388A - 支持HEVC解码的web播放方法及web播放器 - Google Patents

Abstract

本发明公开了一种支持HEVC解码的web播放方法，采用分段下载和实时解码方式，能够减少视频流传输的延迟，实现低延迟的视频播放；通过WebAssembly技术，实现了HEVC视频流在Web播放器中的解封装和解码，使Web播放器能够高效地处理HEVC编码格式的视频流；HEVC编码格式的视频流具有更好的画质和压缩性能，能够提升视频播放质量，提供更好的用户体验。

Description

支持HEVC解码的web播放方法及web播放器

技术领域

本发明属于视频播放的技术领域，尤其涉及一种支持HEVC解码的web播放方法及web播放器。

背景技术

H.265又称HEVC(全称High Efficiency Video Coding，高效率视频编码)，是ITU-T H.264/MPEG-4AVC标准的继任者。相比H.264，H.265拥有更高的压缩率，也就意味着同样码率(又称比特率是指每秒传送的比特(bit)数。单位为bps(Bit Per Second)，比特率越高，每秒传送数据就越多，画质就越清晰)，H.265的画质会更清晰，更高的压缩率就能使用更低的存储和传输成本。

目前，随着互联网的发展，视频内容的传输和播放需求日益增加。HLS(HTTP LiveStreaming)协议作为一种实时流媒体传输协议，被广泛应用于在线视频的传输。而HEVC作为一种高效的视频编码标准，能够提供更好的视频压缩性能和画质。然而，HLS协议默认支持的视频编码格式并不包括HEVC，因此在Web播放器中实现HLS协议下的HEVC解码成为一项挑战。

目前已有的解决方案包括使用Flash插件、JavaScript解码或转码等。然而，Flash插件已逐渐被淘汰，而JavaScript解码效率有限，导致HEVC格式的视频在Web播放器中播放效果不佳。

发明内容

本发明的目的是提供一种支持HEVC解码的web播放方法及web播放器，实现在web环境下高效、稳定地播放HEVC编码格式的视频流。

为解决上述问题，本发明的技术方案为：

一种支持HEVC解码的web播放方法，包括：

Web播放器通过JavaScript从服务器端下载m3u8文件，解析m3u8文件，得到视频流的分片URL；所述m3u8文件包含视频流的分片信息及相关参数；

根据分片URL，通过JavaScript发起HTTP请求，下载相应的视频分片数据；

采用WebAssembly技术对视频分片数据进行实时解封装及解码，得到符合HLS分片格式的视频数据，从中提取YUV视频数据及PCM音频数据；

通过回调机制，将YUV视频数据和PCM音频数据传递至JavaScript，在JavaScript中完成YUV视频数据的渲染和PCM音频数据的播放。

根据本发明一实施例，所述Web播放器通过JavaScript从服务器端下载m3u8文件进一步包括：

Web播放器通过JavaScript的XMLHttpRequest对象或通过fetch API从服务器端下载获取m3u8文件。

根据本发明一实施例，所述解析m3u8文件，得到视频流的分片URL进一步包括：

设置定时器，动态分段下载m3u8文件，实时解析是否存在分片更新，

若是，则发起HTTP请求，下载相应的视频分片数据。

根据本发明一实施例，所述采用WebAssembly技术对视频分片数据进行实时解封装及解码进一步包括：

将下载的视频分片数据传递至WebAssembly中的解封装解码模块，所述解封装解码模块对视频分片数据进行解封装，提取HEVC视频数据，得到相应的视频编码格式、分辨率、帧率、时间基参数信息；同时，提取音频数据，得到相应的音频编码格式、采样率、通道数、时间基参数信息；

基于得到的视频参数信息及音频参数信息，分别对HEVC视频解码器、AAC解码器进行初始化；将HEVC编码格式的视频流数据使用HEVC解码器进行解码，得到YUV格式的视频数据；将AAC编码格式的数据使用AAC解码器解码得到PCM格式的音频数据。

根据本发明一实施例，所述通过回调机制，将YUV视频数据和PCM音频数据传递至JavaScript进一步包括：

通过回调机制传递视频分辨率至JavaScript，用于初始化Canvas画布的宽度；将YUV视频数据按照自身携带的播放时间戳PTS、时间基换算出相对于当前的系统时间，计算出回调时机；当回调时，将YUV视频数据通过回调机制传递给JavaScript；

通过回调机制传递采样率、通道数至JavaScript，用于初始化web Audio；将PCM音频数据按照自身携带的播放时间戳PTS、时间基换算出相对于当前的系统时间，计算出回调时机；当回调时，将PCM音频数据通过回调机制传递给JavaScript。

根据本发明一实施例，所述在JavaScript中完成YUV视频数据的渲染和PCM音频数据的播放进一步包括：

JavaScript根据回调得到的YUV视频数据，在Canvas进行渲染显示；同时，将PCM音频数据使用web Audio API进行音频播放。

一种支持HEVC解码的web播放器，包括：

下载模块，用于Web播放器通过JavaScript从服务器端下载m3u8文件，解析m3u8文件，得到视频流的分片URL；所述m3u8文件包含视频流的分片信息及相关参数；根据分片URL，通过JavaScript发起HTTP请求，下载相应的视频分片数据；

解封装解码模块，用于web播放器采用WebAssembly技术对视频分片数据进行实时解封装及解码，得到符合HLS分片格式的视频数据，从中提取YUV视频数据及PCM音频数据；

播放模块，用于web播放器通过回调机制，将YUV视频数据和PCM音频数据传递至JavaScript，在JavaScript中完成YUV视频数据的渲染和PCM音频数据的播放。

根据本发明一实施例，所述下载模块设置定时器，动态分段下载m3u8文件，实时解析是否存在分片更新，若是，则发起HTTP请求，下载相应的视频分片数据。

根据本发明一实施例，所述解封装解码模块被配置为：

对视频分片数据进行解封装，提取HEVC视频数据，得到相应的视频编码格式、分辨率、帧率、时间基参数信息；同时，提取音频数据，得到相应的音频编码格式、采样率、通道数、时间基参数信息；

基于得到的视频参数信息及音频参数信息，分别对HEVC视频解码器、AAC解码器进行初始化；将HEVC编码格式的视频流数据使用HEVC解码器进行解码，得到YUV格式的视频数据；将AAC编码格式的数据使用AAC解码器解码得到PCM格式的音频数据。

根据本发明一实施例，所述播放模块被配置为：

通过回调机制传递视频分辨率至JavaScript，用于初始化Canvas画布的宽度；将YUV视频数据按照自身携带的播放时间戳PTS、时间基换算出相对于当前的系统时间，计算出回调时机；当回调时，将YUV视频数据通过回调机制传递给JavaScript；JavaScript根据回调得到的YUV视频数据，在Canvas进行渲染显示；

通过回调机制传递采样率、通道数至JavaScript，用于初始化web Audio；将PCM音频数据按照自身携带的播放时间戳PTS、时间基换算出相对于当前的系统时间，计算出回调时机；当回调时，将PCM音频数据通过回调机制传递给JavaScript，将PCM音频数据使用webAudio API进行音频播放。

本发明由于采用以上技术方案，使其与现有技术相比具有以下的优点和积极效果：

本发明一实施例中的支持HEVC解码的web播放方法，采用分段下载和实时解码方式，能够减少视频流传输的延迟，实现低延迟的视频播放；通过WebAssembly技术，实现了HEVC视频流在Web播放器中的解封装和解码，使Web播放器能够高效地处理HEVC编码格式的视频流；HEVC编码格式的视频流具有更好的画质和压缩性能，能够提升视频播放质量，提供更好的用户体验。

附图说明

图1为本发明一实施例中的支持HEVC解码的web播放方法流程图；

图2为本发明一实施例中的动态分段下载的流程图；

图3为本发明一实施例中的解码回调流程图；

图4为本发明一实施例中的支持HEVC解码的web播放器的结构框图。

具体实施方式

以下结合附图和具体实施例对本发明提出的一种支持HEVC解码的web播放方法及web播放器作进一步详细说明。根据下面说明和权利要求书，本发明的优点和特征将更清楚。

由于目前的HLS协议默认支持的视频编码格式并不包括HEVC，使得web播放器不能实现HLS协议下的HEVC解码，不能直接播放HEVC格式的视频。针对该问题，本实施例提供了一种支持HEVC解码的web播放方法，实现在web环境下高效、稳定地播放HEVC编码格式的视频流。

请参看图1，该支持HEVC解码的web播放方法包括以下步骤：

S1：Web播放器通过JavaScript从服务器端下载m3u8文件，解析m3u8文件，得到视频流的分片URL；该m3u8文件包含视频流的分片信息及相关参数；根据分片URL，通过JavaScript发起HTTP请求，下载相应的视频分片数据；

S2：采用WebAssembly技术对视频分片数据进行实时解封装及解码，得到符合HLS分片格式的视频数据，从中提取YUV视频数据及PCM音频数据；

S3：通过回调机制，将YUV视频数据和PCM音频数据传递至JavaScript，在JavaScript中完成YUV视频数据的渲染和PCM音频数据的播放。

该web播放方法通过WebAssembly技术，实现了HEVC视频流在Web播放器中的解封装和解码，使Web播放器能够高效地处理HEVC编码格式的视频流；HEVC编码格式的视频流具有更好的画质和压缩性能，能够提升视频播放质量，提供更好的用户体验。

具体的，随着4K视频越来越流行，迎来了HEVC(高效视频编码，也称H.265)这一新的行业标准。与现行的H.264视频压缩标准相比，它的视频压缩率最高可提升40％之多。使用H.265，在保持视频画质不变的情况下，视频流媒体传输效果更好。而在相同码率下，能给质量带来近两倍的提升。

一般来说操作系统借助硬件(显卡)进行H.265编码视频的解码工作，其好处是硬解的功耗低，解码速度快。但目前H.265编码在浏览器中的硬件解码支持情况并不普及。

由于Web端硬解方案目前限于浏览器支持情况无法实现，软件解码便成为了唯一的选择。而H.265视频的解码是一个对性能要求很高的CPU密集任务，Web端脚本语言实现的解码器的性能很难达到要求。

WebAssembly是Web端的字节码技术，它定义了一个通用的、体积紧凑、加载迅捷的二进制格式为编译目标，能发挥通用硬件的性能，以更接近原生应用的速度运行。在浏览器中对H.265编码的视频进行软件解码，是一项对性能非常有挑战的任务，JavaScript等脚本语言无法胜任此项工作。因此可以将C/C++语言编写的高性能解码库编译成字节码，再通过JavaScript调用来运行。

本实施例基于该发明构思，提供了一种支持HEVC解码的web播放方法，通过WebAssembly技术，实现了HEVC视频流在Web播放器中的解封装和解码，使Web播放器能够高效地处理HEVC编码格式的视频流。

本实施例选取m3u8文件作为待播放的视频文件。m3u8是一种视频码流的文件格式，通常用于HLS(HTTP Live Streaming)流媒体传输协议。m3u8其实是一个视频播放列表，它是一种文本文件，里面记录了一系列的视频片段的网络地址。这些视频片段通常是ts格式的，也就是传输流(transport stream)格式。ts格式的视频片段可以很快地在网络上传输和播放，而不需要等待整个文件下载完毕。

在步骤S1中，Web播放器通过JavaScript从服务器端下载m3u8文件，解析m3u8文件，得到视频流的分片URL。

下面介绍一下如何使用JavaScript获取m3u8文件。

1.使用XMLHttpRequest对象获取m3u8文件

我们可以使用JavaScript中封装好的XMLHttpRequest对象获取m3u8文件。具体步骤如下:

(1)创建XMLHttpRequest对象:

var xhr＝new XMLHttpRequest()；

(2)使用open方法打开m3u8文件:

xhr.open('GET'，'http://example.com/video.m3u8',true)；

(3)注册onload事件，当文件加载完毕时执行回调函数:

xhr.onload＝function(){

var m3u8file＝xhr.responseText；//处理m3u8文件}；

(4)发送请求:

xhr.send()；

2.使用fetch方法获取m3u8文件

fetch是ES6提供的一个新API，可以更方便地获取网络资源。因此，也可以使用fetch方法获取m3u8文件，具体操作如下:

(1)使用fetch方法获取m3u8文件:

fetch('http://example.com/video.m3u8')

.then(response＝>response.text()).then(m3u8file＝>{

//处理m3u8文件})；

以上两种方法都可以用于获取m3u8文件，但需要注意的是，浏览器跨域限制可能会导致XHR请求失效。因此，可以使用服务器代理的方式，将m3u8文件下载到服务器上，然后使用JavaScript获取代理服务器上的文件。

3.使用第三方JS库获取m3u8文件

在JavaScript中，有很多第三方JS库可以方便地获取m3u8文件。如HIs js、Video.js等，这些JS库都提供了一套用于处理m3u8文件的API，可以直接调用。

m3u8文件包含视频流的分片信息及相关参数，获取到m3u8文件后，对其进行解析得到分片地址。根据分片URL，通过JavaScript发起HTTP请求，下载相应的视频分片数据。

由于m3u8文件其实质是一个播放列表，包含一系列的视频片段，因此，可采用分段下载和实时解码的方式，减少视频流传输的延迟。请参看图2，本实施例通过设置定时器，在获取m3u8文件后，解析m3u8文件，得到其中的最新的视频分片URL以及分片时长t秒，并通过JavaScript发起HTTP请求，下载视频分片文件。设置定时器的间隔t-1秒时长之后下载m3u8文件解析是否有新的分片更新，若有则下载最新分片。如此，通过动态分段下载视频数据的方式，实现低延迟的视频播放。

在步骤S2中，采用WebAssembly技术对视频分片数据进行实时解封装及解码，得到符合HLS分片格式的视频数据，从中提取YUV视频数据及PCM音频数据。

获取视频分片数据后，进行实时解封装及解码。为了实现HEVC编码格式的解码，本实施例采用WebAssembly技术实现。通过编写C/C++代码，使用EMScripten等工具将代码编译成WebAssembly二进制文件(.wasm)。在Web播放器中引入WebAssembly模块。在JavaScript中初始化WebAssembly模块，并加载对应的解封装和解码函数。

请参看图3，JavaScript将下载的视频ts分片数据传递给WebAssembly模块中的解封装和解码函数。解封装函数处理ts分片格式，提取其中的HEVC视频数据，得到视频编码格式、分辨率、帧率、时间基等信息；同时提取音频数据，得到音频编码格式比如AAC、采样率、通道数、时间基等信息。基于获取的信息，初始化视频解码器、音频解码器，将HEVC编码格式的视频流数据使用HEVC解码器进行快速、高效的解码操作，解码得到YUV格式的视频数据，将AAC编码格式的数据使用AAC解码器解码得到PCM格式的音频数据，方便后续处理和渲染。

在步骤S3中，通过回调机制，将YUV视频数据和PCM音频数据传递至JavaScript，在JavaScript中完成YUV视频数据的渲染和PCM音频数据的播放。

即，通过回调机制传递视频分辨率给JavaScript用于初始化Canvas画布的宽高，解码函数将解封装后的YUV视频数据按照自身携带的播放时间戳PTS、时间基换算出相对于当前的系统时间，计算出回调时机，并通过回调机制将YUV视频数据传递给JavaScript。在JavaScript中使用Canvas渲染YUV视频数据。

同理，对于PCM音频数据通过回调机制传递采样率、通道数给JavaScript用于初始化Web Audio，解码函数将解封装后的PCM音频数据按照自身携带的播放时间戳PTS、时间基换算出相对于当前的系统时间，计算出回调时机，通过回调机制将PCM音频数据传递给JavaScript。在JavaScript中使用Web Audio API进行PCM音频数据的播放。

上述通过WebAssembly从JavaScript接收视频分片数据，对视频分片数据进行实时解封装解码，然后通过回调的方式将解码后的YUV视频数据及PCM音频数据传送回JavaScript，最终使用Canvas渲染YUV视频数据，同时，使用Web Audio API进行PCM音频数据的播放，实现HLS协议的HEVC视频播放。

基于相同的构思，本实施例还提供了一种支持HEVC解码的web播放器，请参看图4，该web播放器包括：

下载模块1，用于Web播放器通过JavaScript从服务器端下载m3u8文件，解析m3u8文件，得到视频流的分片URL；所述m3u8文件包含视频流的分片信息及相关参数；根据分片URL，通过JavaScript发起HTTP请求，下载相应的视频分片数据；

解封装解码模块2，用于web播放器采用WebAssembly技术对视频分片数据进行实时解封装及解码，得到符合HLS分片格式的视频数据，从中提取YUV视频数据及PCM音频数据；

播放模块3，用于web播放器通过回调机制，将YUV视频数据和PCM音频数据传递至JavaScript，在JavaScript中完成YUV视频数据的渲染和PCM音频数据的播放。

其中，下载模块1设置定时器，动态分段下载m3u8文件，实时解析是否存在分片更新，若是，则发起HTTP请求，下载相应的视频分片数据。

解封装解码模块2被配置为：

对视频分片数据进行解封装，提取HEVC视频数据，得到相应的视频编码格式、分辨率、帧率、时间基参数信息；同时，提取音频数据，得到相应的音频编码格式、采样率、通道数、时间基参数信息；

基于得到的视频参数信息及音频参数信息，分别对HEVC视频解码器、AAC解码器进行初始化；将HEVC编码格式的视频流数据使用HEVC解码器进行解码，得到YUV格式的视频数据；将AAC编码格式的数据使用AAC解码器解码得到PCM格式的音频数据。

播放模块3被配置为：

通过回调机制传递视频分辨率至JavaScript，用于初始化Canvas画布的宽度；将YUV视频数据按照自身携带的播放时间戳PTS、时间基换算出相对于当前的系统时间，计算出回调时机；当回调时，将YUV视频数据通过回调机制传递给JavaScript；JavaScript根据回调得到的YUV视频数据，在Canvas进行渲染显示；

通过回调机制传递采样率、通道数至JavaScript，用于初始化web Audio；将PCM音频数据按照自身携带的播放时间戳PTS、时间基换算出相对于当前的系统时间，计算出回调时机；当回调时，将PCM音频数据通过回调机制传递给JavaScript，将PCM音频数据使用webAudio API进行音频播放。

上面结合附图对本发明的实施方式作了详细说明，但是本发明并不限于上述实施方式。即使对本发明作出各种变化，倘若这些变化属于本发明权利要求及其等同技术的范围之内，则仍落入在本发明的保护范围之中。

Claims (10)

1.一种支持HEVC解码的web播放方法，其特征在于，包括：

Web播放器通过JavaScript从服务器端下载m3u8文件，解析m3u8文件，得到视频流的分片URL；所述m3u8文件包含视频流的分片信息及相关参数；

根据分片URL，通过JavaScript发起HTTP请求，下载相应的视频分片数据；

采用WebAssembly技术对视频分片数据进行实时解封装及解码，得到符合HLS分片格式的视频数据，从中提取YUV视频数据及PCM音频数据；

通过回调机制，将YUV视频数据和PCM音频数据传递至JavaScript，在JavaScript中完成YUV视频数据的渲染和PCM音频数据的播放。

2.如权利要求1所述的支持HEVC解码的web播放方法，其特征在于，所述Web播放器通过JavaScript从服务器端下载m3u8文件进一步包括：

Web播放器通过JavaScript的XMLHttpRequest对象或通过fetch API从服务器端下载获取m3u8文件。

3.如权利要求1所述的支持HEVC解码的web播放方法，其特征在于，所述解析m3u8文件，得到视频流的分片URL进一步包括：

设置定时器，动态分段下载m3u8文件，实时解析是否存在分片更新，若是，则发起HTTP请求，下载相应的视频分片数据。

4.如权利要求1所述的支持HEVC解码的web播放方法，其特征在于，所述采用WebAssembly技术对视频分片数据进行实时解封装及解码进一步包括：

将下载的视频分片数据传递至WebAssembly中的解封装解码模块，所述解封装解码模块对视频分片数据进行解封装，提取HEVC视频数据，得到相应的视频编码格式、分辨率、帧率、时间基参数信息；同时，提取音频数据，得到相应的音频编码格式、采样率、通道数、时间基参数信息；

基于得到的视频参数信息及音频参数信息，分别对HEVC视频解码器、AAC解码器进行初始化；将HEVC编码格式的视频流数据使用HEVC解码器进行解码，得到YUV格式的视频数据；将AAC编码格式的数据使用AAC解码器解码得到PCM格式的音频数据。

5.如权利要求1所述的支持HEVC解码的web播放方法，其特征在于，所述通过回调机制，将YUV视频数据和PCM音频数据传递至JavaScript进一步包括：

通过回调机制传递视频分辨率至JavaScript，用于初始化Canvas画布的宽度；将YUV视频数据按照自身携带的播放时间戳PTS、时间基换算出相对于当前的系统时间，计算出回调时机；当回调时，将YUV视频数据通过回调机制传递给JavaScript；

通过回调机制传递采样率、通道数至JavaScript，用于初始化web Audio；将PCM音频数据按照自身携带的播放时间戳PTS、时间基换算出相对于当前的系统时间，计算出回调时机；当回调时，将PCM音频数据通过回调机制传递给JavaScript。

6.如权利要求1所述的支持HEVC解码的web播放方法，其特征在于，所述在JavaScript中完成YUV视频数据的渲染和PCM音频数据的播放进一步包括：

JavaScript根据回调得到的YUV视频数据，在Canvas进行渲染显示；同时，将PCM音频数据使用web Audio API进行音频播放。

7.一种支持HEVC解码的web播放器，其特征在于，包括：

下载模块，用于Web播放器通过JavaScript从服务器端下载m3u8文件，解析m3u8文件，得到视频流的分片URL；所述m3u8文件包含视频流的分片信息及相关参数；根据分片URL，通过JavaScript发起HTTP请求，下载相应的视频分片数据；

解封装解码模块，用于web播放器采用WebAssembly技术对视频分片数据进行实时解封装及解码，得到符合HLS分片格式的视频数据，从中提取YUV视频数据及PCM音频数据；

播放模块，用于web播放器通过回调机制，将YUV视频数据和PCM音频数据传递至JavaScript，在JavaScript中完成YUV视频数据的渲染和PCM音频数据的播放。

8.如权利要求7所述的支持HEVC解码的web播放器，其特征在于，所述下载模块设置定时器，动态分段下载m3u8文件，实时解析是否存在分片更新，若是，则发起HTTP请求，下载相应的视频分片数据。

9.如权利要求7所述的支持HEVC解码的web播放器，其特征在于，所述解封装解码模块被配置为：

对视频分片数据进行解封装，提取HEVC视频数据，得到相应的视频编码格式、分辨率、帧率、时间基参数信息；同时，提取音频数据，得到相应的音频编码格式、采样率、通道数、时间基参数信息；

基于得到的视频参数信息及音频参数信息，分别对HEVC视频解码器、AAC解码器进行初始化；将HEVC编码格式的视频流数据使用HEVC解码器进行解码，得到YUV格式的视频数据；将AAC编码格式的数据使用AAC解码器解码得到PCM格式的音频数据。

10.如权利要求7所述的支持HEVC解码的web播放器，其特征在于，所述播放模块被配置为：

通过回调机制传递视频分辨率至JavaScript，用于初始化Canvas画布的宽度；将YUV视频数据按照自身携带的播放时间戳PTS、时间基换算出相对于当前的系统时间，计算出回调时机；当回调时，将YUV视频数据通过回调机制传递给JavaScript；JavaScript根据回调得到的YUV视频数据，在Canvas进行渲染显示；

通过回调机制传递采样率、通道数至JavaScript，用于初始化web Audio；将PCM音频数据按照自身携带的播放时间戳PTS、时间基换算出相对于当前的系统时间，计算出回调时机；当回调时，将PCM音频数据通过回调机制传递给JavaScript，将PCM音频数据使用webAudio API进行音频播放。