随着各行各业安防系统的建设，激增了摄像头视频web播放的需要。
为此需要一个web播放器来播放摄像头的视频。
想做好一个能兼容所有浏览器和所有摄像头编码的web播放器存在很多冲突点。
- 支持h5的浏览器只支持h264和aac编码，而摄像头存在各种编码；
- 摄像头获取流是通过rtsp或GB28181协议，而浏览器只支持http和websocket；
- 浏览器存在PC、移动端、小程序差异，如何设计一个播放器既能解决编码问题也能解决不同浏览器环境问题；
- 还有一个奇葩浏览器IE如何兼容。
方案对比
| 编号 | 方案 | 优点 | 缺点 |
|---|---|---|---|
| 1 | Active控件 | 不需要服务器转协议、兼任各种摄像头编码，大部分摄像头厂家采用此方案 | 仅支持IE及低版本Webkit内核浏览器 |
| 2 | 后台转协议，如转成HLS/DASH/http-flv协议 | 此方案兼容H5 Video标签，成熟的开源播放器较多 | 此方案有两个缺陷，一是由于浏览器解码限制导致摄像头只能采用H264+AAC编码，而很多摄像头采用H265+G711编码，二是多了个后台协议转换程序，增加了运维复杂度 |
| 3 | 后台实时转码，转成H264+AAC编码 | 同方案2，且弥补了方案2不能播放非H264+AAC摄像头视频问题 | 此方案最大问题是需要后台有大量的计算资源，一般一台服务器只能同时转码很少路数的视频，在并发大时，后台需要部署大量服务器用于转码 |
| 4 | 浏览器用wasm/asm解码非H264+AAC摄像头的视频 | 最理想方案，不需要复杂的后台、不需要在本机安装插件程序，兼容各种编码格式，兼容PC、移动、小程序等浏览器 | 理想很丰满，现实很骨感，wasm解码性能比native低几十倍，只能满足低分辨率、低帧率的视频解码 |
| 5 | PC上安装native程序将解码后的数据送到浏览器展示 | 解码效率高、不用后台资源、兼容各种编码格式 | 初次使用需要安装一个程序在PC后台运行，不支持移动端、小程序的浏览器 |
方案选择
小孩子才做选择题，成年人当然是全都要。
特性
- 所有条件下都可使用：同时支持方案1~5，满足移动、PC、小程序、IE、非IE，各种音视频编码；
- 零学习成本：使用方式与H5的video标签一致。
方案设计
采用video.js+扩展的方式，video.js自带方案2和3，需要为其扩展1/4/5。
扩展单独实现为一个js库，与video.js搭配使用，不破坏其原有结构。
如果视频源为HLS/DASH/HTTP-FLV/MP4则直接走video.js。
如果视频源为RTSP则走扩展的js库，此时video.js只是扩展js库的API wrapper，也就是在使用者角度看是走的video.js API，但实际调用的是扩展js库的API。
扩展js库设计
扩展库由1或2个worker线程+胶水API组成
worker线程流程：
- 接收从websocket/http chunk来的数据；
- 解封装；
- 如果是解码后的数据，则送到UI线程进行渲染；
- 如果需要解码，则送到wasm解码线程进行解码，由wasm解码线程将解码后的数据送到UI线程进行渲染。
胶水API：
完成与video.js的整合。
开始使用
<link href="https://vjs.zencdn.net/7.11.4/video-js.css" rel="stylesheet" />
<script src="https://vjs.zencdn.net/7.11.4/video.min.js"></script>
<script src="videojs-rtsp.min.js"></script>
<video id="my-video-1" class="video-js vjs-big-play-centered" controls forcesize width="640" height="240"
data-setup='{"techOrder": ["html5","rtsp"]}'>
<source src="rtsp://admin:admin@10.10.20.2" type='video/rtsp' />
</video>
说明：
- 多引入了一个videojs-rtsp.min.js，此库为video.js的扩展;
- 多了一个forcesize属性，用于设置图像是否按原比例，true为不按原比例，拉伸充满窗口，默认为false；
- data-setup属性中的techOrder增加rtsp的选项
- source 为视频源rtsp地址，不能多个，只有一个，source中的type必须为video/rtsp
