视频流播放方法及视频流播放设备

摘要

本申请提供一种视频流播放方法及视频流播放设备，涉及视频播放领域。本申请通过为浏览器单元安装与其独立的解码插件单元，使浏览器单元可基于其与解码插件单元之间的数据传输通道经该解码插件单元向视频流服务设备获取视频流，并使解码插件单元在接收到视频流时，独立地对该视频流进行解码得到对应的YUV色彩数据，而后将该YUV色彩数据基于数据传输通道传输给浏览器单元进行渲染并显示，从而使视频流解码功能通过独立于浏览器的进程资源进行实现，无需与视频流显示功能共用浏览器的进程资源，确保视频流解码功能与视频流显示功能在实现过程中均可获取到足够的进程资源，从而提高视频流解码性能，避免出现视频播放卡顿的现象。

说明书

技术领域

本申请涉及视频播放领域，具体而言，涉及一种视频流播放方法及视频流播放设备。

背景技术

随着互联网技术的不断发展，采用Web浏览器播放视频的技术也越发成熟。目前，业界主流在采用Web浏览器进行视频播放时，通过将获取需要播放的视频流并进行解码的功能及渲染输出解码后的视频流的功能均集成在Web浏览器上，并使用与Web浏览器匹配的JavaScript语言对上述两项功能进行代码表达，使上述两项功能得以在Web浏览器中正常实现。但这种实现Web浏览器播放视频的方案因Web浏览器的进程资源有限，使Web浏览器无法同时为视频流解码及视频流显示提供足够的进程资源，从而导致这种方案的视频流解码性能差，极易出现视频播放卡顿的问题。

发明内容

有鉴于此，本申请的目的在于提供一种视频流播放方法及视频流播放设备，其能够通过安装插件的方式为视频流解码功能的实现提供独立进程资源，使视频流解码功能无需与视频流显示功能共用浏览器的进程资源进行实现，确保视频流解码功能与视频流显示功能均可通过足够的进程资源进行实现，从而提高视频流解码性能，避免出现视频播放卡顿的现象。

为了实现上述目的，本申请实施例采用的技术方案如下：

第一方面，本申请实施例提供一种视频流播放方法，应用于视频流播放设备，所述视频流播放设备包括相互独立的解码插件单元及浏览器单元，所述解码插件单元与所述浏览器单元之间构建有数据传输通道，所述视频流播放方法包括：

所述浏览器单元通过所述数据传输通道经所述解码插件单元向与所述解码插件单元通信连接的视频流服务设备发送视频流获取请求；

所述解码插件单元接收由所述视频流服务设备发送的与所述视频流获取请求对应的视频流，并对接收到的所述视频流进行拼帧解码，得到所述视频流的亮度-色调-饱和度YUV色彩数据；

所述解码插件单元将得到的与所述视频流对应的YUV色彩数据通过所述数据传输通道传输给所述浏览器单元；

所述浏览器单元将接收到的所述YUV色彩数据渲染后进行显示。

在可选的实施方式中，所述数据传输通道的数目为多个，所述解码插件单元将得到的与所述视频流对应的YUV色彩数据通过所述数据传输通道传输给所述浏览器单元，包括：

根据得到的所述YUV色彩数据的数据量从多个所述数据传输通道中确定出至少一个目标通道；

对所述YUV色彩数据进行数据分割，得到多个YUV色彩数据分量，及每个YUV色彩数据分量在所述YUV色彩数据中的位置顺序；

将每个YUV色彩数据分量对应的位置顺序加载在该YUV色彩数据分量上，得到对应的YUV数据分量；

将得到的所有YUV数据分量通过所述至少一个目标通道传输给所述浏览器单元。

在可选的实施方式中，所述浏览器单元将接收到的所述YUV色彩数据渲染后进行显示，包括：

对接收到的每个YUV数据分量进行信息提取，得到该YUV数据分量包括的YUV色彩数据分量及其位置顺序；

按照每个YUV色彩数据分量的位置顺序，通过网页图形库WebGL对该YUV色彩数据分量进行渲染并显示。

在可选的实施方式中，所述将得到的所有YUV数据分量通过所述至少一个目标通道传输给所述浏览器单元，包括：

对得到的每个YUV数据分量进行图像格式转换，得到与该YUV数据分量对应的待渲染图像数据；

将得到的所有YUV数据分量各自对应的待渲染图像数据通过所述至少一个目标通道传输给所述浏览器单元；

其中，所述浏览器单元将接收到的所述YUV色彩数据渲染后进行显示，包括：

针对得到的每个待渲染图像数据，创建与该待渲染图像数据对应的统一资源定位符URL，并创建源地址指向该URL的图像对象；

按照每个待渲染图像数据所对应的YUV色彩数据分量的位置顺序，将该待渲染图像数据所对应的图像对象渲染到画布canvas中进行显示。

在可选的实施方式中，所述解码插件单元的数目为多个，所述视频流播放方法还包括：

所述解码插件单元检测自身被占用的内存资源量是否超过预设资源量阈值，并在超过所述预设资源量阈值时，向所述浏览器单元发送使用其他解码插件单元获取视频流的提示信息；

所述浏览器单元向所述其他解码插件单元发起传输连接请求，并在所述其他解码插件单元响应该传输连接请求时，创建与所述其他解码插件单元之间的数据传输通道，以通过创建的所述数据传输通道经所述其他解码插件单元获取视频流。

第二方面，本申请实施例提供一种视频流播放设备，所述视频流播放设备包括相互对立的解码插件单元及浏览器单元，所述解码插件单元与所述浏览器单元之间构建有数据传输通道，其中所述浏览器单元包括请求发送模块及渲染显示模块，所述解码插件单元包括视频解码模块及数据传输模块；

所述请求发送模块，用于通过所述数据传输通道经所述解码插件单元向与所述解码插件单元通信连接的视频流服务设备发送视频流获取请求；

所述视频解码模块，用于接收由所述视频流服务设备发送的与所述视频流获取请求对应的视频流，并对接收到的所述视频流进行拼帧解码，得到所述视频流的亮度-色调-饱和度YUV色彩数据；

所述数据传输模块，用于将得到的与所述视频流对应的YUV色彩数据通过所述数据传输通道传输给所述浏览器单元；

所述渲染显示模块，用于将接收到的所述YUV色彩数据渲染后进行显示。

在可选的实施方式中，所述数据传输通道的数目为多个，所述数据传输模块包括：

通道确定子模块，用于根据得到的所述YUV色彩数据的数据量从多个所述数据传输通道中确定出至少一个目标通道；

数据分割子模块，用于对所述YUV色彩数据进行数据分割，得到多个YUV色彩数据分量，及每个YUV色彩数据分量在所述YUV色彩数据中的位置顺序；

加载处理子模块，用于将每个YUV色彩数据分量对应的位置顺序加载在该YUV色彩数据分量上，得到对应的YUV数据分量；

分量传输子模块，用于将得到的所有YUV数据分量通过所述至少一个目标通道传输给所述浏览器单元。

在可选的实施方式中，所述渲染显示模块具体用于：

对接收到的每个YUV数据分量进行信息提取，得到该YUV数据分量包括的YUV色彩数据分量及其位置顺序；

按照每个YUV色彩数据分量的位置顺序，通过网页图形库WebGL对该YUV色彩数据分量进行渲染并显示。

在可选的实施方式中，所述分量传输子模块具体用于：

对得到的每个YUV数据分量进行图像格式转换，得到与该YUV数据分量对应的待渲染图像数据；

将得到的所有YUV数据分量各自对应的待渲染图像数据通过所述至少一个目标通道传输给所述浏览器单元；

其中，所述渲染显示模块具体用于：

针对得到的每个待渲染图像数据，创建与该待渲染图像数据对应的统一资源定位符URL，并创建源地址指向该URL的图像对象；

按照每个待渲染图像数据所对应的YUV色彩数据分量的位置顺序，将该待渲染图像数据所对应的图像对象渲染到画布canvas中进行显示。

在可选的实施方式中，所述解码插件单元的数目为多个，所述解码插件单元还包括资源检测模块；

所述资源检测模块，用于检测所述解码插件单元自身被占用的内存资源量是否超过预设资源量阈值，并在超过所述预设资源量阈值时，向所述浏览器单元发送使用其他解码插件单元获取视频流的提示信息；

所述请求发送模块，还用于向所述其他解码插件单元发起传输连接请求，并在所述其他解码插件单元响应该传输连接请求时，创建与所述其他解码插件单元之间的数据传输通道，以通过创建的所述数据传输通道经所述其他解码插件单元获取视频流。

相对于背景技术，本申请具有以下有益效果：

本申请通过为浏览器单元安装与其独立的解码插件单元，使浏览器单元可基于其与解码插件单元之间的数据传输通道经该解码插件单元向视频流服务设备获取视频流，并使解码插件单元在接收到视频流时，独立地对该视频流进行解码得到对应的YUV色彩数据，而后将该YUV色彩数据基于数据传输通道传输给浏览器单元进行渲染并显示，从而使视频流解码功能通过独立于浏览器的进程资源进行实现，无需与视频流显示功能共用浏览器的进程资源，确保视频流解码功能与视频流显示功能在实现过程中均可获取到足够的进程资源，从而提高视频流解码性能，避免出现视频播放卡顿的现象。同时，由于解码插件单元与浏览器单元相互独立，解码器插件单元的异常不会影响浏览器单元的运行，从而提高显示页面稳定性，确保用户体验。

为使本申请的上述目的、特征和优点能更明显易懂，下文特举较佳实施例，并配合所附附图，作详细说明如下。

附图说明

为了更清楚地说明本申请实施例的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，应当理解，以下附图仅示出了本申请的某些实施例，因此不应被看作是对范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。

图1为本申请实施例提供的视频流播放设备的应用方框示意图；

图2为本申请实施例提供的视频流播放方法的流程示意图之一；

图3为图2中的步骤S330包括的子步骤的流程示意图；

图4为本申请实施例提供的视频流播放方法的流程示意图之二；

图5为图1中的数据传输模块的功能模块示意图。

图标：10-视频流播放设备；100-解码插件单元；200-浏览器单元；20-视频流服务设备；110-视频解码模块；120-数据传输模块；210-请求发送模块；220-渲染显示模块；121-通道确定子模块；122-数据分割子模块；123-加载处理子模块；124-分量传输子模块；130-资源检测模块。

具体实施方式

下面将结合本申请实施例中附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。通常在此处附图中描述和示出的本申请实施例的组件可以以各种不同的配置来布置和设计。

因此，以下对在附图中提供的本申请的实施例的详细描述并非旨在限制要求保护的本申请的范围，而是仅仅表示本申请的选定实施例。基于本申请的实施例，本领域技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例，都属于本申请保护的范围。

需要说明的是，术语“第一”和“第二”等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

请参照图1，图1是本申请实施例提供的视频流播放设备10的应用方框示意图。在本申请实施例中，所述视频流播放设备10可通过浏览器进行视频播放，所述视频流播放设备10包括相互独立的解码插件单元100及浏览器单元200。

所述浏览器单元200可通过WebSocket通信协议与解码插件单元100建立WebSocket连接，并在与该浏览器单元200建立有WebSocket连接的解码插件单元100之间创建用于传输数据的数据传输通道。例如，图1中的位于浏览器单元200与解码插件单元100之间的具有双向箭头的实线用于表示该浏览器单元200与解码插件单元100建立有WebSocket连接，图1中的位于浏览器单元200与解码插件单元100之间的具有双向箭头的虚线用于表示该浏览器单元200与解码插件单元100未建立有WebSocket连接。

所述解码插件单元100通过RTSP(Real Time Streaming Protocol，实时流传输协议)协议与视频流服务设备20通信连接，用于从所述视频流服务设备20处获取需要进行视频播放的视频流，并针对获取到的视频流进行解码处理，而后通过所述数据传输通道传输给所述浏览器单元200进行渲染后，基于显示屏进行显示。其中，所述视频流服务设备20可以是存储有视频流的服务器，也可以是视频拍摄设备；所述视频流播放设备10可以是，但不限于，智能手机、个人电脑及平板电脑等。

在本实施例中，所述视频流播放设备10中的解码插件单元100与浏览器单元200可以是被加载到存储器中的由处理器执行的软件程序单元，也可以是被直接嵌入到硬件组件中进行功能实现的。所述视频流播放设备10通过为解码插件单元100及浏览器单元200各自分配足够的计算资源及内存资源，以确保解码插件单元100为视频流解码功能的实现提供足够的进程资源，浏览器单元200为视频流显示功能的实现提供足够的进程资源，使解码插件单元100的异常不会影响浏览器单元200的运行，视频流解码功能无需与视频流显示功能共用浏览器单元200的进程资源，从而提高视频流解码性能，避免出现视频播放卡顿的现象，提高显示页面稳定性，确保用户体验。其中，所述解码插件单元100所对应的视频流解码功能可采用C语言进行编程实现，所述浏览器单元200所对应的视频流显示功能可采用JavaScript语言进行编程实现。

其中，所述存储器可以是，但不限于，随机存取存储器(Random Access Memory，RAM)，只读存储器(Read Only Memory，ROM)，可编程只读存储器(Programmable Read-OnlyMemory，PROM)，可擦除只读存储器(Erasable Programmable Read-Only Memory，EPROM)，电可擦除只读存储器(Electric Erasable Programmable Read-Only Memory，EEPROM)等。所述处理器可以是一种具有信号的处理能力的集成电路芯片，所述处理器可以是通用处理器，包括中央处理器(Central Processing Unit，CPU)及网络处理器(Network Processor，NP)等。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等，可以实现或者执行本申请实施例中的公开的各方法、步骤及逻辑框图。

在本实施例中，所述解码插件单元100的数目为至少一个，所述浏览器单元200可根据需求(包括视频流量大小需求及视频流获取时效性需求)选取合适的任意一个与该浏览器单元200存在数据传输通道的解码插件单元100进行视频流获取操作及视频流解码操作，所述浏览器单元200也可根据需求选择未与该浏览器单元200建立WebSocket连接的解码插件单元100进行WebSocket连接建立操作及数据传输通道创建操作，以通过新连接的解码插件单元100进行视频流获取操作及视频流解码操作。其中，当所述解码插件单元100的数目为多个时，多个所述解码插件单元100相互之间可通过一条或多条通讯总线或信号线进行数据通信连接，并基于所述一条或多条通讯总线或信号线与所述视频流服务设备20通信连接。

可以理解的是，图1所示的方框示意图仅为视频流播放设备10的一种结构组成示意图，所述视频流播放设备10还可包括比图1中所示更多或者更少的组件，或者具有与图1所示不同的配置。图1中所示的各组件可以采用硬件、软件或其组合实现。

请参照图2，图2是本申请实施例提供的视频流播放方法的流程示意图之一。在本申请实施例中，所述视频流播放方法应用于上述的视频流播放设备10，下面对图2所示的视频流播放方法的具体流程和步骤进行详细阐述。

步骤S310，浏览器单元200通过数据传输通道经解码插件单元100向与所述解码插件单元100通信连接的视频流服务设备20发送视频流获取请求。

在本实施例中，当所述视频流播放设备10的使用人员需要进行视频播放时，该使用人员可通过在所述浏览器单元200提供的用户操作界面上进行操作，使所述浏览器单元200响应用户操作并生成视频流获取请求，其中所述视频流获取请求包括视频流的启流消息及视频流流量大小等。所述浏览器单元200在生成所述视频流获取请求后，会通过其与某个解码插件单元100之间的数据传输通道将该视频流获取请求发送给该解码插件单元100，以使该解码插件单元100将所述视频流获取请求发送给所述视频流服务设备20。

步骤S320，所述解码插件单元100接收由所述视频流服务设备20发送的与所述视频流获取请求对应的视频流，并对接收到的所述视频流进行拼帧解码，得到所述视频流的YUV色彩数据。

在本实施例中，所述YUV色彩数据用于反映对应视频流在亮度(Luma)-色调(Chrominance)-饱和度(Chroma)色彩空间中的具体表现。所述视频流服务设备20在得到所述视频流获取请求后，会向发送所述视频流获取请求的所述解码插件单元100反馈与所述视频流获取请求匹配的视频流，使所述解码插件单元100接收该视频流，并根据该视频流的码流格式对该视频流进行帧数据拼接并进行解码处理，得到该视频流在YUV色彩空间中对应的YUV色彩数据。

可选地，所述视频流播放设备10通过在存储器中存储不同码流格式的码流数据进行解码时的解码算法，并由所述解码插件单元100在确定出需要解码的视频流的码流格式时，从存储器中调用与该码流格式匹配的解码算法，并基于调用的该解码算法对所述视频流进行解码处理，从而确保所述解码插件单元100可以支持多种码流格式的视频流解码功能，提高视频流播放设备10的视频流解码全面性。其中，所述视频流的码流格式可以是，但不限于，MJPEG、MPEG-4、H.264及H.265等。

步骤S330，所述解码插件单元100将得到的与所述视频流对应的YUV色彩数据通过所述数据传输通道传输给所述浏览器单元200。

在本实施例中，所述视频流播放设备10通过将视频流解码功能集成在独立于浏览器单元200的解码插件单元100上，用以通过所述解码插件单元100为视频流解码功能的实现提供足够的进程资源，确保视频流播放设备10具有极强的视频流解码性能，并在所述解码插件单元100完成解码操作后，经其与所述浏览器单元200之间的数据传输通道将解码得到的视频流对应的YUV色彩数据发送给所述浏览器单元200进行直接显示播放，无需浏览器单元200再做消耗性能的解码操作，从而避免视频流解码功能对视频流显示功能的实现过程造成影响，避免出现视频播放卡顿的现象，并提高显示页面稳定性，确保用户体验。同时，因YUV色彩数据是任意浏览器在进行显示播放时所需的显示数据，所述视频流播放设备10将无需在于该浏览器单元200所对应的浏览器种类，使所述视频流播放设备10可以支持多种浏览器种类的视频流显示功能。其中，所述浏览器种类可以是，但不限于，IE浏览器、谷歌浏览器(Chrome)、火狐浏览器(Firefox)及苹果浏览器(Safari)等。

在本实施例的一种实施方式中，所述解码插件单元100与所述浏览器单元200之间的数据传输通道的数目为一个，此时所述解码插件单元100在得到的YUV色彩数据的数据量不大于预设数据量阈值时，可直接将该YUV色彩数据通过该数据传输通道传输给所述浏览器单元200，也可通过将该YUV色彩数据进行图像格式转换，得到与该YUV色彩数据对应的待渲染图像数据，并将该YUV色彩数据对应的待渲染图像数据通过该数据传输通道传输给所述浏览器单元200。其中，所述图像格式可以是，但不限于，JPEG格式、GIF格式、PNG格式及TIFF格式等，所述解码插件单元100通过图像格式转换的方式对待传输数据的数据量进行压缩，以增强数据传输效率。

此外，所述解码插件单元100在得到的YUV色彩数据的数据量大于预设数据量阈值时，可通过对该YUV色彩数据进行数据分割，并将分割得到的每份YUV色彩数据组成通过该数据传输通道传输给所述浏览器单元200，也可在得到该YUV色彩数据的所有YUV色彩数据组成时，将每份YUV色彩数据组成进行图像格式转换，得到与该YUV色彩数据组成对应的待渲染图像数据，并将所有YUV色彩数据组成所对应的待渲染图像数据通过该数据传输通道传输给所述浏览器单元200。

可选地，请参照图3，图3是图2中的步骤S330包括的子步骤的流程示意图。在本实施例的另一种实施方式中，所述解码插件单元100与所述浏览器单元200之间的数据传输通道的数目为多个，此时所述步骤S330包括子步骤S331、子步骤S332、子步骤S333及子步骤S334。

子步骤S331，根据得到的YUV色彩数据的数据量从多个数据传输通道中确定出至少一个目标通道。

其中，所述视频流播放设备10可针对需要传输给浏览器单元200的YUV色彩数据设定目标通道选取策略，以便于所述解码插件单元100根据所述YUV色彩数据的数据量选取合适的数据传输通道进行数据传输。其中，所述目标通道选取策略可以是设定不同目标通道的数目与多个数据量数值范围之间的对应关系，以根据所述YUV色彩数据位于哪个数据量数值范围内的判断结果，选取对应数目的数据传输通道作为目标通道；所述目标通道选取策略也可以是将每个数据传输通道当前可传输的数据量大小与所述YUV色彩数据的数据量大小进行数值比对，以选取某个数据传输通道或多个数据传输通道的组合来完成对所述YUV色彩数据的传输过程。

子步骤S332，对所述YUV色彩数据进行数据分割，得到多个YUV色彩数据分量，及每个YUV色彩数据分量在所述YUV色彩数据中的位置顺序。

其中，所述解码插件单元100可按照预设数据量间隔地对得到的所述YUV色彩数据进行数据分割，得到多个YUV色彩数据分量，及每个YUV色彩数据分量在所述YUV色彩数据中的位置顺序。

子步骤S333，将每个YUV色彩数据分量对应的位置顺序加载在该YUV色彩数据分量上，得到对应的YUV数据分量。

子步骤S334，将得到的所有YUV数据分量通过所述至少一个目标通道传输给浏览器单元200。

其中，上述的YUV色彩数据组成即为YUV数据分量，所述解码插件单元100在确定出所述至少一个目标通道及所述YUV色彩数据所对应的所有YUV数据分量后，可直接将所述YUV色彩数据所对应的所有YUV数据分量分配给所述至少一个目标通道进行数据传输，也可对每个YUV数据分量进行处理后再分配给所述至少一个目标通道进行数据传输。所述解码插件单元100在进行数据分配传输的过程中，可根据选定的所述至少一个目标通道各自的数据传输效率进行数据分配，也可预先确定好每个YUV数据分量通过哪个目标通道进行数据传输。

可选地，当所述解码插件单元100需要对发送给所述浏览器单元200的YUV数据分量进行处理时，所述解码插件单元100选择对该YUV数据分量进行图像格式转换，则所述将得到的所有YUV数据分量通过所述至少一个目标通道传输给浏览器单元200的步骤，包括：

对得到的每个YUV数据分量进行图像格式转换，得到与该YUV数据分量对应的待渲染图像数据；

将得到的所有YUV数据分量各自对应的待渲染图像数据通过所述至少一个目标通道传输给所述浏览器单元200。

其中，所述图像格式可以是，但不限于，JPEG格式、GIF格式、PNG格式及TIFF格式等，所述解码插件单元100通过图像格式转换的方式对YUV数据分量的数据量进行压缩，以增强数据传输效率。

请再次参照图2，步骤S340，所述浏览器单元200将接收到的所述YUV色彩数据渲染后进行显示。

在本实施例中，所述浏览器单元200根据接收到的所述YUV色彩数据的表现形式的不同，可采用不同的方式将对应表现形式的所述YUV色彩数据进行渲染并显示，从而避免视频流显示功能与视频流解码功能在实现过程中共用所述浏览器单元200的进程资源，避免出现视频播放卡顿的现象。

其中，若所述浏览器单元200接收到的YUV色彩数据为整个视频流所对应的YUV色彩数据，则所述浏览器单元200将直接针对该YUV色彩数据通过WebGL(Web GraphicsLibrary，网页图形库)进行渲染并显示；

若所述浏览器单元200接收到的YUV色彩数据为整个视频流所对应的待渲染图像数据，则所述浏览器单元200将直接创建与该视频流的待渲染图像数据对应的URL(UniformResource Locator，统一资源定位符)，并创建源地址指向该URL的图像对象，而后将该图像对象渲染到canvas(画布)中进行显示；

若所述浏览器单元200接收到的YUV色彩数据为该YUV色彩数据所对应的所有YUV数据分量，则所述浏览器单元200通过对接收到的该YUV色彩数据对应的每个YUV数据分量进行信息提取，得到该YUV数据分量包括的YUV色彩数据分量及其位置顺序，并按照每个YUV色彩数据分量的位置顺序，通过WebGL对该YUV色彩数据分量进行渲染并显示；

若所述浏览器单元200接收到的YUV色彩数据为该YUV色彩数据所对应的所有YUV数据分量各自对应的待渲染图像数据，则所述浏览器单元200针对得到的每个YUV数据分量所对应的待渲染图像数据，创建与该待渲染图像数据对应的URL，并创建源地址指向该URL的图像对象，而后按照每个待渲染图像数据所对应的YUV色彩数据分量的位置顺序，将该待渲染图像数据所对应的图像对象渲染到canvas中进行显示。

请参照图4，图4是本申请实施例提供的视频流播放方法的流程示意图之二。在本申请实施例中，当所述解码插件单元100的数目为多个时，所述视频流播放方法还包括步骤S350及步骤S360。

步骤S350，解码插件单元100检测自身被占用的内存资源量是否超过预设资源量阈值，并在超过所述预设资源量阈值时，向浏览器单元200发送使用其他解码插件单元100获取视频流的提示信息。

在本实施例中，每个与所述浏览器单元200建立有WebSocket连接的解码插件单元100均会实时检测自身当前被占用的内存资源量，并将检测到的被占用的内存资源量与预设资源量阈值进行比对。若检测到的被占用的内存资源量超过所述预设资源量阈值时，表明该解码插件单元100无法承接所述浏览器单元200的其他视频流解码业务，该解码插件单元100将通过其与所述浏览器单元200之间的数据传输通道告知所述浏览器单元200使用其他解码插件单元100进行视频流获取操作及视频流解码操作。

步骤S360，所述浏览器单元200向所述其他解码插件单元100发起传输连接请求，并在所述其他解码插件单元100响应该传输连接请求时，创建与所述其他解码插件单元100之间的数据传输通道，以通过创建的所述数据传输通道经所述其他解码插件单元100获取视频流。

在本实施例的一种实施方式中，所述浏览器单元200在得到与其存在WebSocket连接的某个解码插件单元100的用于提示该浏览器单元200使用其他解码插件单元100获取视频流的提示信息后，选择除发送所述提示信息的解码插件单元100之外的其他的与该浏览器单元200存在WebSocket连接的解码插件单元100进行视频流获取操作及视频流解码操作。

在本实施例的另一种实施方式中，所述浏览器单元200在得到与其存在WebSocket连接的某个解码插件单元100的提示信息后，选择向其他未与该浏览器单元200存在WebSocket连接的解码插件单元100发送传输连接请求，并在接收到所述传输连接请求的解码插件单元100响应该传输连接请求，且向该浏览器单元200反馈允许建立传输连接的消息时，该浏览器单元200将建立其与对应解码插件单元100之间的WebSocket连接，并创建其与该解码插件单元100之间的数据传输通道，以通过新创建的所述数据传输通道经对应的解码插件单元100获取视频流并进行视频流解码操作。

其中，所述解码插件单元100在向所述浏览器单元200反馈允许建立传输连接的消息时，会附带自身对应的插件版本号信息，使所述浏览器单元200判断该解码插件单元100的插件版本是否与自身的页面状况匹配，并在不匹配时告知所述视频流播放设备10的使用人员及时更新该解码插件单元100的插件版本，使更新后的解码插件单元100与该浏览器单元200匹配。

请再次参照图1，在本申请实施例中，所述浏览器单元200包括请求发送模块210及渲染显示模块220，所述解码插件单元100包括视频解码模块110及数据传输模块120。

所述请求发送模块210，用于通过数据传输通道经解码插件单元100向与所述解码插件单元100通信连接的视频流服务设备20发送视频流获取请求。

所述视频解码模块110，用于接收由所述视频流服务设备20发送的与所述视频流获取请求对应的视频流，并对接收到的所述视频流进行拼帧解码，得到所述视频流的YUV色彩数据。

所述数据传输模块120，用于将得到的与所述视频流对应的YUV色彩数据通过所述数据传输通道传输给浏览器单元200。

可选地，所述数据传输模块120可直接将整个视频流所对应的YUV色彩数据传输给浏览器单元200；所述数据传输模块120也可将整个视频流所对应的YUV色彩数据转换为待渲染图像数据，并将整个视频流所对应的待渲染图像数据传输给浏览器单元200。

可选地，请参照图5，图5是图1中的数据传输模块120的功能模块示意图。在本实施例中，当所述数据传输通道的数目为多个，所述数据传输模块120可以包括通道确定子模块121、数据分割子模块122、加载处理子模块123及分量传输子模块124。

所述通道确定子模块121，用于根据得到的YUV色彩数据的数据量从多个数据传输通道中确定出至少一个目标通道。

所述数据分割子模块122，用于对所述YUV色彩数据进行数据分割，得到多个YUV色彩数据分量，及每个YUV色彩数据分量在所述YUV色彩数据中的位置顺序。

所述加载处理子模块123，用于将每个YUV色彩数据分量对应的位置顺序加载在该YUV色彩数据分量上，得到对应的YUV数据分量。

所述分量传输子模块124，用于将得到的所有YUV数据分量通过所述至少一个目标通道传输给所述浏览器单元200。

其中，所述分量传输子模块124可具体用于：

对得到的每个YUV数据分量进行图像格式转换，得到与该YUV数据分量对应的待渲染图像数据；

将得到的所有YUV数据分量各自对应的待渲染图像数据通过所述至少一个目标通道传输给所述浏览器单元200。

所述渲染显示模块220，用于将接收到的所述YUV色彩数据渲染后进行显示。

其中，在本实施例的第一种实施方式中，当所述渲染显示模块220接收到整个视频流所对应的YUV色彩数据时，所述渲染显示模块220将直接对该YUV色彩数据通过WebGL(WebGraphics Library，网页图形库)进行渲染并显示。

在本实施例的第二种实施方式中，当所述渲染显示模块220接收到整个视频流所对应的由YUV色彩数据转换得到的待渲染图像数据时，所述渲染显示模块220将直接创建与该视频流的待渲染图像数据对应的URL，并创建源地址指向该URL的图像对象，而后将该图像对象渲染到canvas中进行显示。

在本实施例的第三种实施方式中，当所述渲染显示模块220接收到视频流所对应的YUV数据分量时，所述渲染显示模块220具体用于：

对接收到的每个YUV数据分量进行信息提取，得到该YUV数据分量包括的YUV色彩数据分量及其位置顺序；

按照每个YUV色彩数据分量的位置顺序，通过网页图形库WebGL对该YUV色彩数据分量进行渲染并显示。

在本实施例的第四种实施方式中，当所述渲染显示模块220接收到视频流对应的YUV数据分量所对应的待渲染图像数据时，所述渲染显示模块220具体用于：

针对得到的每个待渲染图像数据，创建与该待渲染图像数据对应的URL，并创建源地址指向该URL的图像对象；

按照每个待渲染图像数据所对应的YUV色彩数据分量的位置顺序，将该待渲染图像数据所对应的图像对象渲染到canvas中进行显示。

可选地，请再次参照图1，在本申请实施例中，当所述解码插件单元100的数目为多个时，所述解码插件单元100还包括资源检测模块130。

所述资源检测模块130，用于检测所述解码插件单元100自身被占用的内存资源量是否超过预设资源量阈值，并在超过所述预设资源量阈值时，向所述浏览器单元200发送使用其他解码插件单元100获取视频流的提示信息。

所述请求发送模块210，还用于向所述其他解码插件单元100发起传输连接请求，并在所述其他解码插件单元100响应该传输连接请求时，创建与所述其他解码插件单元100之间的数据传输通道，以通过创建的所述数据传输通道经所述其他解码插件单元100获取视频流。

需要说明的是，本实施例所提供的解码插件单元100所包括的软件功能模块及浏览器单元200所包括的软件功能模块，其基本原理及产生的技术效果和上述视频流播放方法中的各步骤相同，为简要描述，本实施例部分未提及之处，可参考上述的针对视频流播放方法的实施例中相应内容。

在本申请所提供的实施例中，应该理解到，所揭露的设备和方法，也可以通过其它的方式实现。以上所描述的装置实施例仅仅是示意性的，例如，附图中的流程图和框图显示了根据本申请的实施例的装置、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段或代码的一部分，所述模块、程序段或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现方式中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个连续的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或动作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。

另外，在本申请各个实施例中的各功能模块可以集成在一起形成一个独立的部分，也可以是各个模块单独存在，也可以两个或两个以上模块集成形成一个独立的部分。

所述功能如果以软件功能模块的形式实现并作为独立的产品销售或使用时，可以存储在一个可读存储介质中。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本申请各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、磁碟或者光盘等各种可以存储程序代码的介质。

综上所述，在本申请提供的一种视频流播放方法及视频流播放设备中，本申请通过为浏览器单元安装与其独立的解码插件单元，使浏览器单元可基于其与解码插件单元之间的数据传输通道经该解码插件单元向视频流服务设备获取视频流，并使解码插件单元在接收到视频流时，独立地对该视频流进行解码得到对应的YUV色彩数据，而后将该YUV色彩数据基于数据传输通道传输给浏览器单元进行渲染并显示，从而使视频流解码功能通过独立于浏览器的进程资源进行实现，无需与视频流显示功能共用浏览器的进程资源，确保视频流解码功能与视频流显示功能在实现过程中均可获取到足够的进程资源，从而提高视频流解码性能，避免出现视频播放卡顿的现象。同时，由于解码插件单元与浏览器单元相互独立，解码器插件单元的异常不会影响浏览器单元的运行，从而提高显示页面稳定性，确保用户体验。

以上所述仅为本申请的优选实施例而已，并不用于限制本申请，对于本领域的技术人员来说，本申请可以有各种更改和变化。凡在本申请的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本申请的保护范围之内。