瀏覽器播放rtsp視頻流解決方案

時間 2019-11-06

標籤瀏覽器播放 rtsp 視頻解決方案欄目瀏覽器简体版

原文原文鏈接

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

要實現這個目的，能夠採用的方案很是得多，有商業的也有開源的，這裏主要列舉一些開源的方案。這裏的方案都是我嘗試過了的，有些成功，有些沒成功。可是由於每一個項目狀況不一樣，此次沒成的方法，換個項目也許就能成。css

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

實現原理 html

實現步驟html5

服務器安裝streamedian服務器java
客戶端經過video標籤播放linux

<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.1nginx

優缺點git

優勢：實現比較簡單
缺點：收費的，免費版有不少限制

參考連接github

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

rtmp是adobe開發的協議，通常使用adobe media server 能夠方便的搭建起來；隨着開源時代的到來，有大神開發了nginx的rtmp插件，也能夠直接使用nginx實現rtmpweb

rtmp方式的最大的優勢在於低延時，通過測試延時廣泛在1-3秒，能夠說很實時了；缺點在於它是adobe開發的，rtmp的播放嚴重依賴flash，而因爲flash自己的安全，現代瀏覽器大多禁用flash

實現步驟

安裝ffmpeg工具
安裝nginx 注意：linux系統須要安裝 nginx-rtmp-module 模塊，Windows系統安裝包含rtmp的(如nginx 1.7.11.3 Gryphon)
更改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容許

參考連接

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

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

HTTP Live Streaming 並非一個真正實時的流媒體系統，這是由於對應於媒體分段的大小和持續時間有必定潛在的時間延時。在客戶端，至少在一個分段媒體文件被徹底下載後纔可以開始播放，而一般要求下載完兩個媒體文件以後纔開始播放以保證不一樣分段音視頻之間的無縫鏈接。

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

服務器軟件將接收到的流每緩存必定時間後包裝爲一個新的TS文件，而後更新m3u8文件。m3u8文件中只保留最新的幾個片斷的索引，以保證觀衆任什麼時候候鏈接進來都會看到較新的內容，實現近似直播的效果。

這種方式的理論最小延時爲一個ts文件的時長，通常爲2-3個ts文件的時長。

實現步驟

安裝ffmpeg工具
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

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>
複製代碼

參考連接

方案四：VLC插件播放

播放步驟

下載安裝vlc
瀏覽器播放

<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>
複製代碼