08年HTML5第一份正式草案發布后，業界就視其為一個充滿希望的新生兒。有人曾預言HTML5將成為互聯網的新大陸，在那些年這是個充滿爭議的話題，而如今其伴隨移動互聯網而野蠻生長和無孔不入，當年的預言也逐漸成為現實。

14年手機小游戲《圍住神經貓》的一夜爆紅令HTML5游戲開發工具白鷺引擎一舉成名，同時也讓更多人看到了HTML5的廣闊前景。隨著其最大絆腳石IE+Flash的日漸式微，HTML5在移動互聯時代高歌猛進，成為唯一通吃Windows、Linux、OS X、iOS、安卓和WP的跨平臺語言。

我們知道，在移動互聯網初期原生APP制約了開發規則和利潤分配，商家、開發者都急于尋求一種規范統一、技術開放的WebAPP來打破原生APP的壟斷，HTML5顯然成了他們的垂青對象。HTML5依賴開放Web分布，很好地繼承了傳統Web超文本時代的鏈接經濟；同時還能實現原本只有原生APP才能實現的諸如LBS、本地數據存儲、音視頻播放、調用攝像頭和GPU硬件加速等功能。也就是說，WebAPP不僅繼承了Web的特性，還能夠替代APP的大部分功能，無論從用戶體驗層面還是從應用間數據傳輸來看都是非常棒的選擇。這讓人不禁想起B/S架構取代C/S風靡互聯網的種種經典案例。

隨著HTML5未來愈漸明朗，互聯網公司圍繞著WebAPP的建設也開始大張旗鼓。搜狐力推的快站，百度的直達號，騰訊的微信公眾賬號，阿里的UC應用中心，都采用HTML5技術，各大平臺都希望利用WebAPP來打造移動產品的生態基礎。這不僅僅說明HTML5技術、開發上的便利性，更體現在商業模式上的多元化，用戶體驗和生態擴大的固有需求。

很多人已經知道搜狐快站是一個一站式移動建站云平臺，服務貼近中小企業需求，而近期其所宣布的全面免費也頗體現了互聯網的開放分享精神。快站樊功臣在無窮俱樂部沙龍上強調了APP和HTML5之間為什么選擇后者，一方面是看中了HTML5重交互、重開放的特性， H5能滿足中小企業百分之八九十的建站需求，企業對信息服務的推廣是在任何地方傳播任何內容，它可以無孔不入，相對APP的成本壁壘則較低；另一方面APP還面臨一個更新難的問題，更新一個功能需要來回發版重做，效率低下，而HTML5能夠克服各種困難，因為它背后的驅動力非常強大，國內幾乎平臺級公司都是其推動者。

我們認為，快站集搜狐技術部15年建站的組織過程資產積累，包括CMS、社區互動和電子商務版本，其產品成熟品質可靠值得肯定，而上線數月來已打通百度直達號、微信公眾平臺和各大搜索引擎等等，為快站的13萬多家站點提供強力引流的成績來看，其發展還是非常迅速的。這也從側面驗證了HTML5的生態滲透性是如何地“無孔不入”。

盡管HTML5具備眾多卓越性，但在移動端與原生APP之爭仍處下風，主要原因歸結為以下四點：

1、標準尚未完善，技術不成熟，開發者生態不完整；

2、尚未突破載體瓶頸，瀏覽器渲染性能低下；

3、缺乏渠道、運營商等成熟生態支持；

4、對網絡環境依賴較大。

這些原因最終造成HTML5在部分功能和體驗上大打折扣，但事實上我們發現隨著互聯網公司逐漸入局和開發者生態日漸完善，加之業界上游對技術性能的解決，大多是可以克服的。

未來趨勢來看，HTML5成為主流我們幾乎都可預見。跨平臺、低成本、程序快速迭代、開放的數據交互，這些顯著優勢都將成為企業、開發者選擇HTML5的理由。以版本交付為例，很多開發者有這樣的體會，一個原生APP上線，這時突如其來的一個大BUG往往成為大麻煩，開發者須連夜修復然后靜待二、三周Apple審核，這段時間往往就已決定這款產品的成敗。而HTML5則沒有這樣的問題，你只需修復再刷新即可。

最近，業界傳來了可喜消息：W3C宣布HTML5標準于今年10月底正式定稿，這為所有HTML5開發者注入了一針強心劑，也預示著HTML5的時代即將全面來臨。有了標準，剩下的就是完善生態的事情了。值得一提，搜狐在新聞客戶端產品曾領跑至前，而快站的免費策略與開發者體系的支持完善，匯聚更多開發人才和專業者智慧，打造全面擁抱移動互聯網的HTML5移動建站云平臺及衍生生態，其未來表現令人期許。

近項目中需要實時播放攝像頭rtsp視頻流，于是就專門做了些研究。而瀏覽器不能直接播放，只有通過插件或者轉碼來實現這個需求。

要實現這個目的，可以采用的方案非常得多，有商業的也有開源的，這里主要列舉一些開源的方案。這里的方案都是我嘗試過了的，有些成功，有些沒成功。但是因為每個項目情況不同，這次沒成的方法，換個項目也許就能成。

方案一: html5 + websocket_rtsp_proxy 實現視頻流直播

實現原理

實現步驟

1. 服務器安裝streamedian服務器
2. 客戶端通過video標簽播放

<video id="test_video" controls autoplay></video>

<script src="free.player.1.8.4.js"></script>
<script>

    if (window.Streamedian) {
        var errHandler = function(err){
            console.log('err', err.message);
        };

        var infHandler = function(inf) {
            console.log('info', inf)
        };

        var playerOptions = {
            socket: "ws://localhost:8088/ws/",
            redirectNativeMediaErrors : true,
            bufferDuration: 30,
            errorHandler: errHandler,
            infoHandler: infHandler
        };

        var html5Player  = document.getElementById("test_video");
        html5Player.src = "rtsp://184.72.239.149/vod/mp4://BigBuckBunny_175k.mov";

        var player = Streamedian.player('test_video', playerOptions);

        
        window.onbeforeunload = function(){
            player && player.destroy();
            player = null;
            Request = null;
        }
    }
</script>

注意：測試時先從官網申請license key，否則socket 只能識別localhost和127.0.0.1

優缺點

• 優點：實現比較簡單
• 缺點：收費的，免費版有很多限制

參考鏈接

• html5 + websocket_rtsp_proxy 實現視頻流直播
• streamedian
• html5_rtsp_player

方案二：ffmpeg + nginx + video，rtsp轉rtmp播放

rtmp是adobe開發的協議，一般使用adobe media server 可以方便的搭建起來；隨著開源時代的到來，有大神開發了nginx的rtmp插件，也可以直接使用nginx實現rtmp

rtmp方式的最大的優點在于低延時，經過測試延時普遍在1-3秒，可以說很實時了；缺點在于它是adobe開發的，rtmp的播放嚴重依賴flash，而由于flash本身的安全，現代瀏覽器大多禁用flash

相關學習資料推薦，點擊下方鏈接免費報名，先碼住不迷路~】

音視頻免費學習地址：FFmpeg/WebRTC/RTMP/NDK/Android音視頻流媒體高級開發

【免費分享】音視頻學習資料包、大廠面試題、技術視頻和學習路線圖，資料包括（C/C++，Linux，FFmpeg webRTC rtmp hls rtsp ffplay srs 等等）有需要的可以點擊788280672加群免費領取~

實現步驟

1. 安裝ffmpeg工具
2. 安裝nginx 注意：linux系統需要安裝 nginx-rtmp-module 模塊，Windows系統安裝包含rtmp的(如nginx 1.7.11.3 Gryphon)
3. 更改nginx配置

rtmp{
    server{
    listen 1935;

        application live{
          live on;
          record off;
        }
        application hls{
          live on;
          hls on;
          hls_path nginx-rtmp-module/hls;
          hls_cleanup off;
        }
    }
}

ffmpeg轉碼

ffmpeg -i "rtsp://184.72.239.149/vod/mp4://BigBuckBunny_175k.mov" -f flv -r 25 -s 1080*720 -an "rtmp://127.0.0.1:1935/hls/mystream"

video 播放

<html>
<head>
<title>video</title>
<!-- 引入css -->
<link rel="stylesheet" type="text/css" href="./videojs/video-js.min.css" />

</head>
<body>
<video id="test_video" class="video-js vjs-default-skin vjs-big-play-centered" controls autoplay>
    <source src='rtmp://127.0.0.1:1935/hls/mystream' type='rtmp/flv'/>
</video>

</body>
</html>
<!-- 引入js -->
<script type="text/javascript" src="./videojs/video.min.js"></script>
<script type="text/javascript" src="./videojs/videojs-flash.js"></script>

<script>
videojs.options.flash.swf = "./videojs/video-js.swf"
    var player = videojs('test_video', {"autoplay":true});
    player.play();
</script>

注意：使用谷歌瀏覽器播放時，需要開啟flash允許

參考鏈接

• 在 Nginx 中啟用 RTMP 服務
• ffmpeg.org
• videojs
• videojs flash

方案三：ffmpeg + video，rtsp轉hls播放

HLS (HTTP Live Streaming) 直播 是有蘋果提出的一個基于http的協議。其原理是把整個流切分成一個個的小視頻文件，然后通過一個m3u8的文件列表來管理這些視頻文件

HTTP Live Streaming 并不是一個真正實時的流媒體系統，這是因為對應于媒體分段的大小和持續時間有一定潛在的時間延時。在客戶端，至少在一個分段媒體文件被完全下載后才能夠開始播放，而通常要求下載完兩個媒體文件之后才開始播放以保證不同分段音視頻之間的無縫連接。

此外，在客戶端開始下載之前，必須等待服務器端的編碼器和流分割器至少生成一個TS文件，這也會帶來潛在的時延。

服務器軟件將接收到的流每緩存一定時間后包裝為一個新的TS文件，然后更新m3u8文件。m3u8文件中只保留最新的幾個片段的索引，以保證觀眾任何時候連接進來都會看到較新的內容，實現近似直播的效果。
這種方式的理論最小延時為一個ts文件的時長，一般為2-3個ts文件的時長。
實現步驟

1. 安裝ffmpeg工具
2. ffmpeg轉碼

ffmpeg -i "rtsp://184.72.239.149/vod/mp4://BigBuckBunny_175k.mov" -c copy -f hls -hls_time 2.0 -hls_list_size 0 -hls_wrap 15 "D:/Program Files/html/hls/test.m3u8"

ffmpeg 關于hls方面的指令說明

• -hls_time n: 設置每片的長度，默認值為2。單位為秒
• -hls_list_size n:設置播放列表保存的最多條目，設置為0會保存有所片信息，默認值為5
• -hls_wrap n:設置多少片之后開始覆蓋，如果設置為0則不會覆蓋，默認值為0.這個選項能夠避免在磁盤上存儲過多的片，而且能夠限制寫入磁盤的最多的片的數量
• -hls_start_number n:設置播放列表中sequence number的值為number，默認值為0

1. video 播放

<html>
<head>
<title>video</title>
<!-- 引入css -->
<link rel="stylesheet" type="text/css" href="./videojs/video-js.min.css" />

</head>
<body>
<div class="videoBox">
    <video id="my_video_1" class="video-js vjs-default-skin" controls>
        <source src="http://localhost:8088/hls/test.m3u8" type="application/x-mpegURL"> 
    </video>
</div>

</body>
</html>
<script type="text/javascript" src="./videojs/video.min.js"></script>
<script type="text/javascript" src="./videojs/videojs-contrib-hls.min.js"></script>
<script>
videojs.options.flash.swf = "./videojs/video-js.swf"
    var player = videojs('my_video_1', {"autoplay":true});
    player.play();
</script>

參考鏈接

• ffmpeg hls
• videojs
• videojs-contrib-hls

方案四：VLC插件播放

播放步驟

1. 下載安裝vlc
2. 瀏覽器播放

<object type='application/x-vlc-plugin' pluginspage="http://www.videolan.org/" id='vlc' events='false' width="720" height="410">
    <param name='mrl' value='rtsp://admin:12345@192.168.10.235:554/h264/ch1/main/av_stream' />
    <param name='volume' value='50' />
    <param name='autoplay' value='true' />
    <param name='loop' value='false' />
    <param name='fullscreen' value='false' />
    <param name='controls' value='false' />
</object>

優缺點

• 優點： 可以直接播放RTSP，無需任何中介服務器的幫助
• 缺點： 需要手動安裝插件； 基于NPAPI，不被最新的 Chrome 和 Firefox 支持
• 如果你項目的其他功能都能兼容客戶電腦上的 IE 瀏覽器，這個方案就是首選。

參考鏈接

• VLC wiki
• 插件安裝方法

其他方案

WebRTC

WebRTC 是支持網頁瀏覽器進行實時音視頻的一套API，例如：HTML5 通過 webRTC 直接調用攝像頭，但是如果要實現遠程視頻流的顯示，則需要將 RTSP 轉換為 WebRTC 流，供 web 端顯示。
參考地址：github.com/lulop-k/kur…

h5stream

參考地址：

• github.com/liweilup/h5…
• 使用H5Stream開發實時監控系統
• H5Stream入門級應用，播放RTSP流視頻

GB28181

參考地址：

• LiveGBS GB28181流媒體服務
• github

jsmpeg.js + ffmpeg + websocket + node

參考地址

• # 在web中播放rtsp視頻方案對比

原文 瀏覽器播放rtsp視頻流解決方案 - 掘金