网页全终端视频流媒体视频直播/点播播放器EasyPlayer.js实现WEB播放H265/HEVC视频方案介绍
H.265/HEVC是当前非常火的视频压缩方式,相对于大家熟知的H.264 ,平均可以带来接近于50%的宽度节省。这对于我们做视频的开发者而言,无疑可以在同等流量下拿到更多的Buffer,无论是直播还是视频播放都是非常有收益的事情。
在HEVC编码架构中,整体被分为了三个基本单位,分别是编码单位(coding unit, CU)、预测单位(predict unit, PU)和转换单位(transform unit, TU)。
H.265/HEVC的编码架构大致上和H.264/AVC的架构相似,主要也包含帧内预测(intra prediction)、帧间预测(inter prediction)、转换(transform)、量化(quantization)、去区块滤波器(deblocking filter)、熵编码(entropy coding)等模块。
但是比起H.264/AVC,H.265/HEVC提供了更多不同的工具来降低码率。“更多的预测算法,更大的编码单位”形象的概括了H.265架构。以编码单位来说,H.264中每个宏块(macroblock/MB)大小都是固定的16x16像素,而H.265的编码单位可以选择从最小的8x8到最大的64x64。
同时,H.265的帧内预测模式支持33种方向(H.264只支持8种),并且提供了更好的运动补偿处理和矢量预测方法。反复的质量比较测试已经表明,在相同的图象质量下,相比于H.264,通过H.265编码的视频大小将减少大约39-44%。由于质量控制的测定方法不同,这个数据也会有相应的变化。
近一两年来,越来越多的监控厂家新出厂的设备,默认采用H265视频编码了。当我们要部署这类视频应用时,客户端解码是个大问题。然而,安防领域的网络摄像机(IPC)的WEB视频直播都依赖于浏览器插件,对于部署在web平台的流媒体播放器则又是一个亟待解决的难题。
要实现通用的跨平台,跨浏览器支持的解码器方案,wasm成为目前唯一的可能。Wasm的目标就是充分发挥硬件能力,使一些耗cpu的操作可以从原生的js中剥离出来独立运行。EasyPlayer.js流媒体播放器就支持这种方式,实现整个架构,我们采用Fetch从服务器上拉流,ffmpeg进行软解码,webgl进行显示。
EasyPlayer.js是一款集播放http-flv,rtmp,hls,websocket于一身的H5视频直播/视频点播播放器,使用简单,功能强大,能够播放http-flv/Websocket-flv协议的直播流。支持解码H.264视频(Baseline, Main, High Profile全支持,支持解码B帧视频),同时也支持解码H.265视频(flv id == 12),能够在 PC\Android\iOS 浏览器Webview内实现2秒以内低延迟直播播放。
随着浏览器的不断更新,wasm技术更加成熟,EasyPlayer.js现在也提供wasm版本,在性能方面会有50%~80%的提升,比较明显。目前已可以测试使用。