网页视频流媒体视频直播，点播，播放器实现WEB播放H265/HEVC视频方案

朱雀 2024-03-23 23:39 103阅读 0赞

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中剥离出来独立运行。livewebPlayer流媒体播放器就支持这种方式，实现整个架构，我们采用Fetch从服务器上拉流，ffmpeg进行软解码，webgl进行显示。

livewebPlayer是一款集播放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内实现300毫秒以内低延迟直播播放。

随着浏览器的不断更新，wasm技术更加成熟，在性能方面会有很高的提升，比较明显。目前已可以测试使用。

![fae7a2d1f2fa4f7aa51f89359b5637a1.webp][]

[fae7a2d1f2fa4f7aa51f89359b5637a1.webp]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/a44a213695ac4a138acf1d7fc64d33a0.png