一种基于HTML5的流媒体处理方法、系统及相关组件与流程

本申请涉及通信技术领域，更具体地说，涉及一种基于html5的流媒体处理方法、系统及一种电子设备和一种计算机可读存储介质。

背景技术：

在浏览器端，html5播放技术正快速替代以往的flash播放技术。flash原生支持碎片化数据传输，且可直接操作原始音视频数据，并通过netstream的appendbytes()方法将音视频数据传递给底层解码器。而html5则缺少像flash这样封装完善的多源流媒体播放方案。

因此，如何基于html5播放技术，实现多源流媒体播放是本领域技术人员需要解决的问题。

技术实现要素：

本申请的目的在于提供一种基于html5的流媒体处理方法、系统及一种电子设备和一种计算机可读存储介质，基于html5播放技术，实现了多源流媒体播放。

为实现上述目的，本申请提供了一种基于html5的流媒体处理方法，包括：

多源获取播放请求对应的第一流媒体数据，并判断所述第一流媒体数据是否为fragmentmp4格式；

若否，则将所述第一流媒体数据转封装为fragmentmp4格式的第二流媒体数据；

将所述第二流媒体数据发送至mse，以便所述mse播放所述第二流媒体数据。

其中，若所述第一流媒体数据为fragmentmp4格式，则还包括：

将所述第一流媒体数据发送至mse，以便所述mse播放所述第一流媒体数据。

其中，所述多源获取播放请求对应的第一流媒体数据，包括：

利用cdn服务多源获取所述播放请求对应的第一流媒体数据，并将所述第一流媒体数据存入缓存。

其中，判断所述第一流媒体数据是否为fragmentmp4格式，包括：

每隔预设的时间从所述缓存中取出缓存流媒体数据，并判断所述缓存流媒体是否为fragmentmp4格式；其中，所述缓存流媒体数据包括所述第一流媒体数据。

其中，还包括：

当所述播放请求对应的流媒体数据全部播放完成时，释放所述缓存流媒体数据。

其中，将所述第一流媒体数据转封装为fragmentmp4格式的第二流媒体数据，包括：

利用demuxer对所述第一流媒体数据进行解封装操作，并利用remuxer将解封装得到的数据封装为fragmentmp4格式的所述第二流媒体数据。

其中，将所述第二流媒体数据发送至mse，以便所述mse播放所述第二流媒体数据，包括：

将所述第二流媒体数据加入等待队列中，并将所述等待队列中的待播放流媒体数据顺序发送至所述mse，以便所述mse解码并播放所述待播放流媒体数据；其中，所述待播放流媒体数据包括所述第二流媒体数据。

为实现上述目的，本申请提供了一种基于html5的流媒体处理系统，包括：

获取模块，用于多源获取播放请求对应的第一流媒体数据，并判断所述第一流媒体数据是否为fragmentmp4格式；

转封装模块，用于当所述第一流媒体数据不为fragmentmp4格式时，将所述第一流媒体数据转封装为fragmentmp4格式的第二流媒体数据；

第一发送模块，用于将所述第二流媒体数据发送至mse，以便所述mse播放所述第二流媒体数据。

为实现上述目的，本申请提供了一种电子设备，包括：

存储器，用于存储计算机程序；

处理器，用于执行所述计算机程序时实现如上述基于html5的流媒体处理方法的步骤。

为实现上述目的，本申请提供了一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现如上述基于html5的流媒体处理方法的步骤。

通过以上方案可知，本申请提供的一种基于html5的流媒体处理方法，包括：多源获取播放请求对应的第一流媒体数据，并判断所述第一流媒体数据是否为fragmentmp4格式；若否，则将所述第一流媒体数据转封装为fragmentmp4格式的第二流媒体数据；将所述第二流媒体数据发送至mse，以便所述mse播放所述第二流媒体数据。

本申请提供的流媒体播放方法，通过mse(mediasourceextension)配合html5播放技术，实现了碎片化的流数据播放。虽然mse仅支持fragmentmp4格式，但本申请可以将其他音视频封装格式(flv、mp4、hls等)的数据流转封装为fragmentmp4格式，实现了多种格式的流媒体数据的点播。另外，在获取流媒体数据时，本申请不限定具体的传输方式，支持多种传输协议，例如http、ws或其他私有协议等，可扩展性较强。本申请还公开了一种基于html5的流媒体处理系统及一种电子设备和一种计算机可读存储介质，同样能实现上述技术效果。

附图说明

为了更清楚地说明本申请实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1为本申请实施例公开的一种基于html5的流媒体处理方法的流程图；

图2为本申请实施例公开的另一种基于html5的流媒体处理方法的流程图；

图3为本申请实施例公开的一种基于html5的流媒体处理方法的架构图；

图4为本申请实施例公开的一种基于html5的流媒体处理系统的结构图；

图5为本申请实施例公开的一种电子设备的结构图；

图6为本申请实施例公开的另一种电子设备的结构图。

具体实施方式

下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。

本申请实施例公开了一种基于html5的流媒体处理方法，基于html5播放技术，实现了多源流媒体播放。

参见图1，本申请实施例公开的一种基于html5的流媒体处理方法的流程图，如图1所示，包括：

s101：多源获取播放请求对应的第一流媒体数据，并判断所述第一流媒体数据是否为fragmentmp4格式；若是，则进入s102；若否，则进入s103；

此处的播放请求包括待播放的流数据的下载地址，当接收到客户端的播放请求时，按播放顺序依次在下载地址中下载流媒体数据。作为一种优选实施方式，可以利用cdn(中文全称：内容分发网络，英文全称：contentdeliverynetwork)服务多源下载流媒体数据，并依次将下载完成的流媒体数据存入缓存。当然也可以利用其它方式下载流媒体数据，本实施例不进行具体限定。

可以理解的是，由于mse仅支持fragmentmp4格式，因此在下载流媒体数据之后，还需判断该流媒体数据是否为fragmentmp4格式，若是，则进入s102；若否，则进入s103。当下载完成的流媒体数据入缓存时，每隔预设的时间从所述缓存中取出缓存流媒体数据，并判断该缓存流媒体是否为fragmentmp4格式。

s102：将所述第一流媒体数据发送至mse，以便所述mse播放所述第一流媒体数据；

在具体实施中，当上一步骤中的第一流媒体数据为fragmentmp4格式时，直接将该第一流媒体数据发送至mse，mse会按播放顺序播放接收到的流媒体数据。

s103：将所述第一流媒体数据转封装为fragmentmp4格式的第二流媒体数据；

在具体实施中，当步骤s101中的第一流媒体数据不为fragmentmp4格式时，转封装为fragmentmp4格式的第二流媒体数据。具体的，可以利用demuxer对该第一流媒体数据进行解封装操作，并利用remuxer将解封装得到的数据封装为fragmentmp4格式的第二流媒体数据。

s104：将所述第二流媒体数据发送至mse，以便所述mse播放所述第二流媒体数据。

在具体实施中，转封装完成后，将fragmentmp4格式的第二流媒体数据发送至mse，mse会按播放顺序播放接收到的流媒体数据。作为一种优选实施方式，可以将将该第二流媒体数据加入等待队列中，并将等待队列中的待播放流媒体数据顺序发送至所述mse，以便所述mse解码并播放所述待播放流媒体数据。

本申请实施例提供的流媒体播放方法，通过mse(mediasourceextension)配合html5播放技术，实现了碎片化的流数据播放。虽然mse仅支持fragmentmp4格式，但本申请可以将其他音视频封装格式(flv、mp4、hls等)的数据流转封装为fragmentmp4格式，实现了多种格式的流媒体数据的点播。另外，在获取流媒体数据时，本申请不限定具体的传输方式，支持多种传输协议，例如http、ws或其他私有协议等，可扩展性较强。

本申请实施例公开了一种基于html5的流媒体处理方法，相对于上一实施例，本实施例对技术方案作了进一步的说明和优化。具体的：

参见图2，本申请实施例提供的另一种基于html5的流媒体处理方法的流程图，如图2所示，包括：

s201：当接收到播放请求时，利用cdn服务多源获取所述播放请求对应的第一流媒体数据，并将所述第一流媒体数据存入缓存；

本实施例提供的流媒体处理方法应用于html5播放技术，该方法实现时具体的系统架构如图4所示，利用cdn服务负责获取流媒体数据，cdn支持多种传输协议，如http、ws、其他私有协议等，且支持多种音视频封装格式，如flv、mp4、hls等。

mse是媒体源扩展api，由w3c制定，提供了实现无插件且基于web的流媒体功能。使用mediasource对象代替src，由多个sourcebuffer对象表示不同的媒体数据块。通过mse可以根据需要将来自不同源的媒体数据处理后传递给<video>或<audio>标签，实现媒体数据的精确控制。

msecontroller(mse控制器)用于创建并维护mediasource对象、sourcebuffer对象，并使用sourcebuffer的appendbuffer()接口，将数据传递给底层解码器。

loader(下载器)负责支持基于多种协议的请求、接收数据功能。

cache(高速缓冲存储器)用于缓存从loader获取的数据。

demuxer(视音频分离器)用于对不同的格式(如flv、hls等)进行解封装。remuxer(封装格式转换器)用于将解封装后的数据，加封装为fragmentmp4格式，单位为segment。

transmuxer为总控制模块，包括下载策略、数据缓存控制、转封装及mse控制，并提供播放控制接口，包括load()、unload()、seek()等。

在具体实施中，首先调用transmuxer的load()，控制loader模块从cdn多源下载数据，loader接收到的数据由transmuxer控制写入cache。

s202：每隔预设的时间从所述缓存中取出缓存流媒体数据，并判断所述缓存流媒体是否为fragmentmp4格式；若是，则进入s203；若否，则进入s204；

由于当前mseapi只支持fragmentmp4格式，因此需要判断下载的流媒体数据是否为fragmentmp4格式，对非fragmentmp4的流媒体数据进行转封装处理。

s203：将所述缓存流媒体数据加入等待队列中；

s204：利用demuxer对所述缓存流媒体数据进行解封装操作，利用remuxer将解封装得到的数据封装为fragmentmp4格式的目标流媒体数据，并将所述目标流媒体数据加入所述等待队列中；

在具体实施中，transmuxer定时从cache读取数据(即缓存流媒体数据)，传给相应格式的demuxer。demuxer解封装，并将数据传给remuxer。remuxer将数据加封装为fragmentmp4的数据段(segment)(即目标流媒体数据)，并由transmuxer传递给msecontroller，msecontroller将segment加入等待队列。

s205：将所述等待队列中的待播放流媒体数据顺序发送至所述mse，以便所述mse解码并播放所述待播放流媒体数据；

在具体实施中，循环调用sourcebuffer的appendbuffer接口将等待队列中的待播放流媒体数据顺序发送至底层解码器，底层解码器解码后mse播放所述待播放流媒体数据。

s206：当所述播放请求对应的流媒体数据全部播放完成时，释放所述缓存流媒体数据。

在具体实施中，当播放请求对应的流媒体数据全部播放完成时，调用transmuxer的unload()，停止下载清理并释放缓存中的资源。

下面对本申请实施例提供的一种基于html5的流媒体处理系统进行介绍，下文描述的一种基于html5的流媒体处理系统与上文描述的一种基于html5的流媒体处理方法可以相互参照。

参见图4，本申请实施例提供的一种基于html5的流媒体处理系统的结构图，如图4所示，包括：

获取模块401，用于多源获取播放请求对应的第一流媒体数据，并判断所述第一流媒体数据是否为fragmentmp4格式；

转封装模块402，用于当所述第一流媒体数据不为fragmentmp4格式时，将所述第一流媒体数据转封装为fragmentmp4格式的第二流媒体数据；

第一发送模块403，用于将所述第二流媒体数据发送至mse，以便所述mse播放所述第二流媒体数据。

本申请实施例提供的流媒体播放系统，通过mse(mediasourceextension)配合html5播放技术，实现了碎片化的流数据播放。虽然mse仅支持fragmentmp4格式，但本申请可以将其他音视频封装格式(flv、mp4、hls等)的数据流转封装为fragmentmp4格式，实现了多种格式的流媒体数据的播放。另外，在获取流媒体数据时，本申请不限定具体的传输方式，支持多种传输协议，例如http、ws或其他私有协议等，可扩展性较强。

在上述实施例的基础上，作为一种优选实施方式，基于html5的流媒体处理系统则还包括：

第二发送模块，若所述第一流媒体数据为fragmentmp4格式，用于将所述第一流媒体数据发送至mse，以便所述mse播放所述第一流媒体数据。

在上述实施例的基础上，作为一种优选实施方式，所述获取模块401包括：

获取单元，用于利用cdn服务获取所述播放请求对应的第一流媒体数据，并将所述第一流媒体数据存入缓存；

判断单元，用于判断所述第一流媒体数据是否为fragmentmp4格式。

在上述实施例的基础上，作为一种优选实施方式，所述判断单元具体为每隔预设的时间从所述缓存中取出缓存流媒体数据，并判断所述缓存流媒体是否为fragmentmp4格式；其中，所述缓存流媒体数据包括所述第一流媒体数据的单元。

在上述实施例的基础上，作为一种优选实施方式，还包括：

释放模块，用于当所述播放请求对应的流媒体数据全部播放完成时，释放所述缓存流媒体数据。

在上述实施例的基础上，作为一种优选实施方式，所述转封装模块402具体为利用demuxer对所述第一流媒体数据进行解封装操作，并利用remuxer将解封装得到的数据封装为fragmentmp4格式的所述第二流媒体数据的模块。

在上述实施例的基础上，作为一种优选实施方式，所述第一发送模块403具体为将所述第二流媒体数据加入等待队列中，并将所述等待队列中的待播放流媒体数据顺序发送至所述mse，以便所述mse解码并播放所述待播放流媒体数据；其中，所述待播放流媒体数据包括所述第二流媒体数据的模块。

本申请还提供了一种电子设备，参见图5，本申请实施例提供的一种电子设备的结构图，如图5所示，包括：

存储器100，用于存储计算机程序；

处理器200，用于执行所述计算机程序时可以实现上述实施例所提供基于html5的流媒体处理方法。

具体的，存储器100包括非易失性存储介质、内存储器。该非易失性存储介质存储有操作系统和计算机可读指令，该内存储器为非易失性存储介质中的操作系统和计算机可读指令的运行提供环境。处理器200为电子设备提供计算和控制能力，执行所述存储器100中保存的计算机程序时，可以实现如上述任一实施例提供的基于html5的流媒体处理方法。

本实施例中的电子设备，可以作为内容分发网络的节点设备，也可以作为区块链网络中的节点设备。

在上述实施例的基础上，作为优选实施方式，参见图6，所述电子设备还包括：

输入接口300，与处理器200相连，用于获取外部导入的计算机程序、参数和指令，经处理器200控制保存至存储器100中。该输入接口300可以与输入装置相连，接收用户手动输入的参数或指令。该输入装置可以是显示屏上覆盖的触摸层，也可以是终端外壳上设置的按键、轨迹球或触控板，也可以是键盘、触控板或鼠标等。

显示单元400，与处理器200相连，用于显示处理器200发送的数据。该显示单元400可以为pc机上的显示屏、液晶显示屏或者电子墨水显示屏等。具体的，在本实施例中，可以通过显示单元400播放流媒体数据等。

网络端口500，与处理器200相连，用于与外部各终端设备进行通信连接。该通信连接所采用的通信技术可以为有线通信技术或无线通信技术，如移动高清链接技术(mhl)、通用串行总线(usb)、高清多媒体接口(hdmi)、无线保真技术(wifi)、蓝牙通信技术、低功耗蓝牙通信技术、基于ieee802.11s的通信技术等。

本申请实施例提供通过mse(mediasourceextension)配合html5播放技术，实现了碎片化的流数据播放。虽然mse仅支持fragmentmp4格式，但本申请可以将其他音视频封装格式(flv、mp4、hls等)的数据流转封装为fragmentmp4格式，实现了多种格式的流媒体数据的播放。另外，在获取流媒体数据时，本申请不限定具体的传输方式，支持多种传输协议，例如http、ws或其他私有协议等，可扩展性较强。

本申请还提供了一种计算机可读存储介质，该存储介质可以包括：u盘、移动硬盘、只读存储器(read-onlymemory，rom)、随机存取存储器(randomaccessmemory，ram)、磁碟或者光盘等各种可以存储程序代码的介质。该存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现如上述任一实施例提供的基于html5的流媒体处理方法的步骤。

说明书中各个实施例采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似部分互相参见即可。对于实施例公开的系统而言，由于其与实施例公开的方法相对应，所以描述的比较简单，相关之处参见方法部分说明即可。应当指出，对于本技术领域的普通技术人员来说，在不脱离本申请原理的前提下，还可以对本申请进行若干改进和修饰，这些改进和修饰也落入本申请权利要求的保护范围内。

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