有同學問道：需要實時播放攝像頭rtsp視頻流，而瀏覽器不能直接播放，怎樣解決？
實現這個需求可以通過插件或者轉碼來實現。
要實現這個目的，可以采用的方案非常得多，有商業的也有開源的，這里主要列舉一些開源的方案。這里的方案都是我嘗試過了的，有些成功，有些沒成功。但是因為每個項目情況不同，這次沒成的方法，換個項目也許就能成。
方案一: html5 + websocket_rtsp_proxy 實現視頻流直播
實現原理
實現步驟
- 服務器安裝streamedian服務器
- 客戶端通過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
優缺點
- 優點：實現比較簡單
- 缺點：收費的，免費版有很多限制
方案二：ffmpeg + Nginx + video，rtsp轉rtmp播放
rtmp是adobe開發的協議，一般使用adobe media server 可以方便的搭建起來；隨著開源時代的到來，有大神開發了nginx的rtmp插件，也可以直接使用nginx實現rtmp
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;
}
}
}
4.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"
5.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
3.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:[email protected]: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 瀏覽器，這個方案就是首選。
其他方案
WebRTC
WebRTC 是支持網頁瀏覽器進行實時音視頻的一套API，例如：HTML5 通過 webRTC 直接調用攝像頭，但是如果要實現遠程視頻流的顯示，則需要將 RTSP 轉換為 WebRTC 流，供 web 端顯示。
h5stream
GB28181
jsmpeg.js + ffmpeg + websocket + node
如果你對音視頻開發感興趣，或者對本文的一些闡述有自己的看法，可以在下方的留言框，一起探討。
