[发明专利]一种基于WebAssembly技术的Web播放器及播放方法

说明书

本发明公开一种基于WebAssembly技术的Web播放器及播放方法，其包括UI界面、Js层、WebAssemble层和基础库；所述UI界面：进行播放相关控制；所述Js层：接收来自UI界面的控制指令；从远端服务器下载媒体流文件并传送至WebAssemble层；接收WebAssemble层解码后的音频数据和视频数据并在UI界面进行播放；所述WebAssemble层：将媒体流文件放入未解码队列中；调取未解码队列中的媒体流文件对其解码形成音频文件和视频文件，然后传送给Js层；所述基础库：包括开源库FFMPEGA和系统自带的WebGL和Web Audio API。本发明使用WebAssemble技术，能够在PC和手机端通过不下载原生程序，使用其浏览器（比如微信内嵌的浏览器）进行直播观看和点播观看。

技术领域

本发明属于Web播放器领域，具体涉及一种基于WebAssembly技术的Web播放器及播放方法。

背景技术

随着智能终端和网络的普及，人们日益形成使用智能终端观看视频习惯，经常使用手机观看在线视频或短视频文件。大量视频网站也提供了对应的Web播放器和原生程序提供插件下载，播放视频流通常要要求用户下载对应播放程序或插件，插件通常以OCX 形式存在，只能在IE播放，造成用户体验不足。移动端播放数据延时比较明显。支持的音视频编码有限，无法满足监控行业常用的H264/H265 AAC，G711的算法。提供的分辨率和码率比较小，无法播放较高的清晰度与码率的媒体流。

发明内容

本发明的目的在于提供一种基于WebAssembly技术的Web播放器及播放方法。

为实现上述目的，本发明采用以下技术方案：

一种基于WebAssembly技术的Web播放器，其包括UI界面、Js层、WebAssemble层和基础库；

所述UI界面：进行播放相关控制；

所述Js层：接收来自UI界面的控制指令；从远端服务器下载媒体流文件并传送至WebAssemble层；接收WebAssemble层解码后的音频数据和视频数据并在UI界面进行播放；

所述WebAssemble层：将媒体流文件放入未解码队列中；调取未解码队列中的媒体流文件对其解码形成音频文件和视频文件，然后传送给Js层；

所述基础库：包括开源库FFMPEGA和系统自带的WebGL和Web Audio API。

所述媒体流文件包括WebSocket/flv或Http-flv媒体流文件。

采用本发明Web播放器的播放方法，包括以下步骤：

1）用户访问远端服务器，请求播放视频；

2）Js层从远端服务器下载媒体流文件后传送给WebAssemble层，WebAssemble层将下载的媒体流文件数据无拷贝放入未解码队列中；

3）WebAssemble层中的解码模块中未解码队列中调取出媒体流文件，根据媒体流文件的编码格式，读取相应的媒体信息，然后调用对应的解码库进行解码，解码形成PCM的音频文件和YUV的视频文件，最后将解码形成的音频文件和视频文件放入音视频播放队列中；

4）Js从音视频播放队列中调取音频文件和视频文件并在UI界面进行播放。

进一步的，步骤4）中，所述Js层从音视频播放队列中调取出音频文件和视频文件后，需要进行音视频同步，以音频为参考，落后音频的时间戳的视频数据则丢弃，其中Js层调用WebGL加快渲染视频文件，调用Web Audio API来播放音频文件。

本发明采用以上技术，具有以下有益效果：