最近需要在web項目中顯示監控視頻，采用了webrtc webrtc-streamer coturn的方案實現，能夠在公網上做很低的延時，對于實時監控視頻有很好的效果，是目前來講比較好的一個選擇方案。
1、webrtc 用于視頻流的顯示。
2、webrtc-streamer負責去監控視頻主機（這裡多數是NVR或DVR）去拉取RSTP視頻流，并轉發到Webrtc中進行顯示。
3、coturn用于webrtc與webrtc-streamer之間的通信穿透服務，主要作用是穿透做NAT穿透，讓雙方找到能互相找到。
網絡邏輯結構圖
一、webrtc-streamer安裝
這裡采用的是CentOS 7系統，直接采用的Docker安裝，關于Docker安裝可以參考《Kubernetes安裝記錄》的docker部分。
docker pull mpromonet/webrtc-streamer
docker run -itd -p 8000:8000 --name webrtc-streamer mpromonet/webrtc-streamer -s120.92.19.150:3478 -tnoka:[email protected]:3478
這裡後面的-t和-s參數分别指向cotum的strun和tun服務，這裡同内一定要用自己搭建的穿透服務，webrtc-streamer内置的服務是指向goole提供的一個服務，國内訪問及其不穩定，關于cotum的安裝請參照官網。這裡啟動好以後，就可以通過浏覽器訪問8000端口的服務了，這裡可以通過以下地址來驗證視頻流服是否成功。
http://ip:8000/webrtcstreamer.html?rtsp://admin:admin@ip:554/Streaming/Channels/101
如果上面的地址能播放視頻，說明配置成功了，地址後面的參數是視頻流的地址。
二、web端視頻顯示代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- webrtc公用庫-->
<script src="/js/adapter.js"></script>
<!-- webrtc-streamer調用庫，來自webrtc-streamer-->
<script src="/js/webrtcstreamer.js"></script>
</head>
<body>
<!-- 視頻顯示部分 -->
<div id="play_div"></div>
<script>
var webRtcServerList = [];//視頻流服務對象部分
var urls=[
'rtsp://admin:[email protected]:554/Streaming/Channels/102',//視頻流地址
'rtsp://admin:[email protected]:554/Streaming/Channels/202'//視頻流地址
];
var rsurl='http://210.201.225.42:8000/';//webrtc-streamer服務地址
//---------創建視頻播放界面--------------------------------------------------------
function plays(idx){
var videoelt = document.createElement("video");//創建一個播放器
var vi_tag='videoTag_' idx;//播放器的id
videoelt.id = vi_tag;//播放器id
videoelt.muted = true;
videoelt.width=500;
videoelt.height=600;
videoelt.controls=true;//開啟進度條
document.getElementById ("play_div").appendChild(videoelt);//添加播放器到界面中
var webRtcServer = new WebRtcStreamer(vi_tag,rsurl);//創建webrtc流對象
//連接視頻,參數1 視頻地址，參數2 音頻地址（這裡沒有），參數3 連接參數(這裡采用的是tcp,120秒超時等）
webRtcServer.connect(urls[idx],undefined,"rtptransport=tcp&timeout=120&width=320&height=0");
webRtcServerList[idx]=webRtcServer;//緩存視頻流對象
}
//----------頁面退出時關閉播放流---------------------
window.onbeforeunload = function() {
for(var i=0;i<webRtcServerList.length;i ){
webRtcServerList[i].disconnect();
}
}
//---------初始化加載視頻----------------------------
window.onload= function() {
for(var i=0;i<urls.length;i ){
plays(i);
}
}
</script>
</body>
</html>
這樣就完成了整個項目實現，這裡如果視頻沒有播放成功，最有可能是穿透服務的問題，需要檢查穿透服務。
,更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!
zpostcode 
Recruit 
weather 
mreligion 
Yellowpages 
sport 
constellation 
shopping 
name 
game 
directory 
literature 
Word 
tour 
furnish 
Lottery 
tftnews 
lyrics 
News 
digital 
car 
dir 
Edu 
Finance 
