GoldVideo-基于Web Assembly的H265播放器实现

GoldVideo-基于Web Assembly的H265播放器实现

随着视频编码技术的发展，相比H.264, H.265同等画质体积仅为一半、带宽占用省一半、画质更细腻等诸多优势。 但Web浏览器还不支持H.265的解码播放，因此本项目基于Web Assembly(封装FFmpeg)、JS解封装、Canvas投影以及AudioContext实现了Web端的H265播放。

 

基于Web Assembly的H265 Player的开源项目也不少，但真正可以达到线上应用以及把原理剖析的如此清晰的，Goldvideo算是比较好的一个。我们可以fork源码来分析。

 

功能简介

播放器主要分为UI、Loader、数据处理、数据渲染四个部分和3个线程。一个是主线程，包括界面控制、下载控制、数据流控制、音视频控制等功能；数据加载线程，完成元数据和数据片段的请求；数据处理线程，完成数据解封装和解码。

数据处理流程如下：

播放器的实现主要分为以下四个部分：

• UI：播放器显示，包括screen和controlbar两部分，screen包括视频图像展示、弹窗、海报图等。controlbar包括进度条、播放按钮、音量控制等组件。
• Loader：负责媒体数据的加载和解析，目前仅支持HLS协议。通过worker实现数据的请求，加载完成后，根据设置缓存大小，存储请求的ts数据，当达到缓存上限后停止加载。解码器从ts数据队列获取ts后，Hls Loader会把请求过的ts释放，继续加载下一个ts，达到最大缓存限制后停止加载
• 数据处理：主要包括数据解封装和H265解码，解封装通过demuxe.js这个类库实现，H265解码通过ffmpeg打包生成的wasm软解来实现，cpu使用率较高。
• 数据渲染：包括视屏渲染和音频渲染，视频渲染通过ImagePlayer把解码后的yuv数据直接渲染到canvas，音频通过AudioPlayer把AAC数据解码后进行音频播放，最后通过pts实现音视频的同步。同步策略是以音频为参考，判断当前视频pts与获取到的音频pts的差值来调整视频显示时间来达到音视频同步。

项目地址

本项目是一个公开的基础可用版本，并不含有具体的业务代码。业务可基于此项目进行具体业务实现。本项目实现代码：https://github.com/goldvideo

包含三个相关项目：

demuxer: 纯JS解码TS/MP4工具

decoder_wasm: 借助于WebAssembly技术，基于ffmpeg的H.265解码器。

h265player: H265播放器