一、背景

如果你問一個前端技術人員，近幾年最火的前端框架技術是什么，肯定會有人說VUE，確實VUE憑借其簡單特性贏得了大家的喜愛，而近期公司有個項目，需要在VUE框架網頁上播放RTSP實時視頻。

小編對目前市場上的所有方案進行了測試，發(fā)現市面上行大部分方案都是轉碼轉流方案，需要服務器不停的轉碼轉流，不僅延遲高，能達到幾秒甚至幾分鐘，播放高清視頻或者H.265格式視頻容易卡頓，同時多路播放效果也差，比如WebAssembly甚至本地錄像抓圖功能都不能實現，很難用于商業(yè)。

二、方案

1.服務器轉流前端轉碼方案

服務器端先把RTSP流用Web Socket或WebRTC推送到前端，再通過WASM轉碼MP4播放。此方案雖號稱是無插件方案，但是需要服務器支持，兩次轉碼導致延遲較高，一般高達數秒甚至數分鐘。此方案首屏畫面顯示很慢。因為需要服務器不斷轉碼轉流，對CPU和內存消耗較大，帶寬占用高，長期綜合使用成本也很高。如果多路播放或者看高分辨率或 H.265視頻，很可能就會出現卡頓、花屏等情況。

綜合來看，此方案攝像頭較少或者對延遲、畫面要求較低的需求，商用難堪重任。

2.服務器轉碼轉流再轉碼方案

原理是服務器端先把RTSP流轉FLV后，再用Web Socket或WebRTC推送到前端，然后再轉為MP4播放。目前在高版本瀏覽器（除IE外）中，已經支持 WASM技術，可以使用此技術在終端電腦上把RTSP視頻流轉碼后播放。此方案同樣需要服務器的支持，由于在終端電腦轉碼，終端電腦配置好壞決定了播放質量，并且由于WASM只能軟解碼，無法利用終端電腦的加速能力，且不支持多線程，不支持水印、字幕及本地錄像及抓圖等，多路播放或者H.265格式視頻，也容易出現卡頓、花屏等情況，大量占用電腦CPU和內存，電腦無法再做其他事情，體驗非常不好。

綜合來看，此方案也盡量慎用。

3.低版本瀏覽器方案（VLC原生播放插件）：

2015年之前Chrome等瀏覽器還未取消對 NPAPI插件支持的時候方案，繼續(xù)使用低版本Chrome、Firefox等瀏覽器，通過VLC原生播放器直接播放，也不需要服務器支持，延遲非常低，終端也可以使用硬件的加速能力，多路播放也毫無壓力。

缺點也非常明顯：無法使用最新的瀏覽器和操作系統，不適合商用。如果能解決高版本的Chrome、Firefox、Edge等瀏覽器使用，此方案無疑是最佳選擇！

4.最終升級方案：猿大師內嵌VLC原生播放程序

猿大師的VLC播放程序是基于猿大師中間件提供的內嵌網頁播放的專利技術，底層調用VLC客戶端的ActiveX控件可實現在Chrome等高版本瀏覽器中內嵌播放?？低?、大華等攝像頭的RTSP視頻流。由于實際調用的是VLC本地原生播放控件，因此可充分利用本機硬件加速能力實現高效硬解碼播放多路或高清視頻(H.265)，低延遲至300毫秒，支持回訪、抓圖、錄像，最多可支持25路同時播放，最低可用在Chrome 41、Firefox 50、Edge 80(Chromium內核)、360極速/安全、IE、Oprea 36、QQ等瀏覽器，也兼容運行于這些瀏覽器的最新版本。

1.猿大師官網：http://www.yuanmaster.com?

2.猿大師與大華官方網頁延遲對比：https://www.bilibili.com/video/BV1ff4y1j7qg/

3.猿大師VLC播放程序與?？低暪俜骄W頁延遲對比：https://www.bilibili.com/video/BV1mr4y127oX/