几种前端h264播放器记录

近期做了点工作记录一下。主要是将H264流在html5上进行播放。众所周知，大多数的 video组件都是支持FLV或者MP4以及m3u8格式的，而如果是WebRTC是直接集成好了。本次要求的环境主要是通过Websocket方式进行流传输，不是RMTP也不是RTSP，所以最好的方式是能够直接在前端页面上进行播放。其中应该要包含H264的软解码或者硬解码。

下面介绍几种可以直接播放H264的播放器：

1. Broadway.js

该项目的说明是将Android的H264解码器通过Emscripten编译成WebGL可用的解码器，并且进行了优化。这个库也是许多后续库的基础，相对而言是一个非常好用的解码器库。

缺点：只支持Baseline格式的H264数据流，如果是其他格式的数据流则无法解析。

额外内容：h264 分为几种，一种为baseline，一种为main，一种为pro。如果一定要使用这个库的话必须要将视频流转为baseline流。

2. h264-live-player

该播放器可以直接结合Websocket播放h264流，并且还能够处理丢帧的问题。号称是一个实时播放器。在项目提供的四种Demo中的使用方法也是非常简单使用的。

缺点：问题同Broadway.js一样，因为这个项目基于Broadway.js实现的，因此存在的问题也一样，无法解析baseline以外的h264流。

3.wfs.js

这个播放器跟前两个对比就没有那么大的知名度的，在github上面也只有200星左右。根据说明来看是直接在标准 HTML5 元素和 MediaSource 扩展之上进行的工作，将 H264 NAL 单元转换为 ISO BMFF (MP4) 片段。这个库的实时性达到了我的要求，对于H264的其他流也能够进行解码，而且还有许多人对此进行各种修改来降低延迟，总之是个挺好用的库。

缺点：针对视频尺寸变化无法及时响应（比如横竖屏切换）。如果需要很好地工作需要自己改源码。

4. JMuxer

jMuxer是一个简单的mp4多路复用器，适用于浏览器和节点环境。借助媒体源扩展在浏览器上播放媒体文件。 它还可以在节点环境中导出 mp4。 输入的视频数据应该为原始 H264 视频数据和/或 AAC 音频数据。

这个库提供了一个demo，可以先将h264视频流保存成264/h264文件，先尝试一下能不能播放再选择是否可以使用。

demo: Online h264 player using jMuxer

缺点：实时性可能不够，当我将视频流传入库中解码的时候，依旧会有些许延迟。但是好的地方在于比起wfs.js能够适应横竖屏的切换。

5.H264-converter

这是一个TypeScripts写成的解码库，对于TypeScript阅读麻烦的可以直接看编译后的Js代码。这个库既可以识别横竖屏和分辨率切换的数据流，又具有比较高的实时性。但是由于是ts语言写的，使用方法Demo以及其他的使用资料都比较少，使用起来可能会出现问题。（具体在于参数配置上一定要和获取的视频流一致）

缺点：易读性较差，参数配置需要配置一致才能正常播放。使用方法以及文档太少。

6. ffmpeg

这个方式不是一种推荐的方式。总所周知，在视频领域通常绕不过FFmpeg这个库。这边具体的方式可以将FFmpeg编译成ffmpeg.js，通过调用C函数解码成FLV或者其他的格式，再使用FLV.JS或者Video甚至Canvas显示。

（1）. ffmpeg编译成js并显示

这个方法是将编译好的ffmpeg编译成js再使用canvas直接绘制倒UI上。可以参考。编译麻烦的也可以直接在github上搜索ffmpeg.js文件可以直接跳过这一过程。

（2）使用已经编译好的ffmpeg库

这个方法使用的是ffmpeg-fluent库将h264流解码成flv流，搭配bilibili开源的flv.js库播放。这边需要对ffmpeg的命令行稍作了解，由于在js中并不存在binarystreamer这种组件，所以大多数的工程中主要使用Pipe的方式将文件流替换为视频流。除了ffmpeg-fluent库以外也可以使用libav库达到同样的效果，不过libav库的说明文档较少。

（3）在后台使用ffmpeg.exe

为了减少前端计算性能的消耗保证实时性，可以直接在后端使用ffmpeg.exe进行转码，这边借鉴了Facebook的一个用法。不过笔者在具体使用的过程中发现ffmpeg初次启动进行解码会有比较大的延迟。比起前面几种虽然理论上降低web的负担，实际上并没有特别好的效果。