隨著各行各業(yè)安防系統(tǒng)的建設(shè)，激增了攝像頭視頻web播放的需要。
為此需要一個(gè)web播放器來(lái)播放攝像頭的視頻。
想做好一個(gè)能兼容所有瀏覽器和所有攝像頭編碼的web播放器存在很多沖突點(diǎn)。
- 支持h5的瀏覽器只支持h264和aac編碼，而攝像頭存在各種編碼；
- 攝像頭獲取流是通過(guò)rtsp或GB28181協(xié)議，而瀏覽器只支持http和websocket；
- 瀏覽器存在PC、移動(dòng)端、小程序差異，如何設(shè)計(jì)一個(gè)播放器既能解決編碼問(wèn)題也能解決不同瀏覽器環(huán)境問(wèn)題；
- 還有一個(gè)奇葩瀏覽器IE如何兼容。
方案對(duì)比
| 編號(hào) | 方案 | 優(yōu)點(diǎn) | 缺點(diǎn) |
|---|---|---|---|
| 1 | Active控件 | 不需要服務(wù)器轉(zhuǎn)協(xié)議、兼任各種攝像頭編碼，大部分?jǐn)z像頭廠家采用此方案 | 僅支持IE及低版本W(wǎng)ebkit內(nèi)核瀏覽器 |
| 2 | 后臺(tái)轉(zhuǎn)協(xié)議，如轉(zhuǎn)成HLS/DASH/http-flv協(xié)議 | 此方案兼容H5 Video標(biāo)簽，成熟的開(kāi)源播放器較多 | 此方案有兩個(gè)缺陷，一是由于瀏覽器解碼限制導(dǎo)致攝像頭只能采用H264+AAC編碼，而很多攝像頭采用H265+G711編碼，二是多了個(gè)后臺(tái)協(xié)議轉(zhuǎn)換程序，增加了運(yùn)維復(fù)雜度 |
| 3 | 后臺(tái)實(shí)時(shí)轉(zhuǎn)碼，轉(zhuǎn)成H264+AAC編碼 | 同方案2，且彌補(bǔ)了方案2不能播放非H264+AAC攝像頭視頻問(wèn)題 | 此方案最大問(wèn)題是需要后臺(tái)有大量的計(jì)算資源，一般一臺(tái)服務(wù)器只能同時(shí)轉(zhuǎn)碼很少路數(shù)的視頻，在并發(fā)大時(shí)，后臺(tái)需要部署大量服務(wù)器用于轉(zhuǎn)碼 |
| 4 | 瀏覽器用wasm/asm解碼非H264+AAC攝像頭的視頻 | 最理想方案，不需要復(fù)雜的后臺(tái)、不需要在本機(jī)安裝插件程序，兼容各種編碼格式，兼容PC、移動(dòng)、小程序等瀏覽器 | 理想很豐滿，現(xiàn)實(shí)很骨感，wasm解碼性能比native低幾十倍，只能滿足低分辨率、低幀率的視頻解碼 |
| 5 | PC上安裝native程序?qū)⒔獯a后的數(shù)據(jù)送到瀏覽器展示 | 解碼效率高、不用后臺(tái)資源、兼容各種編碼格式 | 初次使用需要安裝一個(gè)程序在PC后臺(tái)運(yùn)行，不支持移動(dòng)端、小程序的瀏覽器 |
方案選擇
小孩子才做選擇題，成年人當(dāng)然是全都要。
特性
- 所有條件下都可使用：同時(shí)支持方案1~5，滿足移動(dòng)、PC、小程序、IE、非IE，各種音視頻編碼；
- 零學(xué)習(xí)成本：使用方式與H5的video標(biāo)簽一致。
方案設(shè)計(jì)
采用video.js+擴(kuò)展的方式，video.js自帶方案2和3，需要為其擴(kuò)展1/4/5。
擴(kuò)展單獨(dú)實(shí)現(xiàn)為一個(gè)js庫(kù)，與video.js搭配使用，不破壞其原有結(jié)構(gòu)。
如果視頻源為HLS/DASH/HTTP-FLV/MP4則直接走video.js。
如果視頻源為RTSP則走擴(kuò)展的js庫(kù)，此時(shí)video.js只是擴(kuò)展js庫(kù)的API wrapper，也就是在使用者角度看是走的video.js API，但實(shí)際調(diào)用的是擴(kuò)展js庫(kù)的API。
擴(kuò)展js庫(kù)設(shè)計(jì)
擴(kuò)展庫(kù)由1或2個(gè)worker線程+膠水API組成
worker線程流程：
- 接收從websocket/http chunk來(lái)的數(shù)據(jù)；
- 解封裝；
- 如果是解碼后的數(shù)據(jù)，則送到UI線程進(jìn)行渲染；
- 如果需要解碼，則送到wasm解碼線程進(jìn)行解碼，由wasm解碼線程將解碼后的數(shù)據(jù)送到UI線程進(jìn)行渲染。
膠水API：
完成與video.js的整合。
開(kāi)始使用
<link 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>
說(shuō)明：
- 多引入了一個(gè)videojs-rtsp.min.js，此庫(kù)為video.js的擴(kuò)展;
- 多了一個(gè)forcesize屬性，用于設(shè)置圖像是否按原比例，true為不按原比例，拉伸充滿窗口，默認(rèn)為false；
- data-setup屬性中的techOrder增加rtsp的選項(xiàng)
- source 為視頻源rtsp地址，不能多個(gè)，只有一個(gè)，source中的type必須為video/rtsp
