最近需要在web項(xiàng)目中顯示閉路電視，使用webrtc webrtc-streamer coturn的方案，可以在公共互聯(lián)網(wǎng)上低延遲，是對(duì)實(shí)時(shí)閉路電視產(chǎn)生良好效果的替代方案。
1、webrtc 用于視頻流的顯示。
2、webrtc-streamer負(fù)責(zé)去監(jiān)控視頻主機(jī)（這里多數(shù)是NVR或DVR）去拉取RSTP視頻流，并轉(zhuǎn)發(fā)到Webrtc中進(jìn)行顯示。
3、coturn用于webrtc與webrtc-streamer之間的通信穿透服務(wù)，主要作用是穿透做NAT穿透，讓雙方找到能互相找到。
網(wǎng)絡(luò)邏輯結(jié)構(gòu)圖
一、webrtc-streamer安裝
這里采用的是CentOS 7系統(tǒng)，直接采用的Docker安裝，關(guān)于Docker安裝可以參考《Kubernetes安裝記錄》的docker部分。
docker pull mpromonet/webrtc-streamer docker run -itd -p 8000:8000 --name webrtc-streamer mpromonet/webrtc-streamer - -tnoka:noka@120.92.19.150:3478這里后面的-t和-s參數(shù)分別指向cotum的strun和tun服務(wù)，這里同內(nèi)一定要用自己搭建的穿透服務(wù)，webrtc-streamer內(nèi)置的服務(wù)是指向goole提供的一個(gè)服務(wù)，國內(nèi)訪問及其不穩(wěn)定，關(guān)于cotum的安裝請(qǐng)參照官網(wǎng)。這里啟動(dòng)好以后，就可以通過瀏覽器訪問8000端口的服務(wù)了，這里可以通過以下地址來驗(yàn)證視頻流服是否成功。
http://ip:8000如果上面的地址能播放視頻，說明配置成功了，地址后面的參數(shù)是視頻流的地址。
二、web端視頻顯示代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- webrtc公用庫--> <script src="/j;></script> <!-- webrtc-streamer調(diào)用庫，來自webrtc-streamer--> <script src="/j;></script> </head> <body> <!-- 視頻顯示部分 --> <div id="play_div"></div> <script> var webRtcServerList = [];//視頻流服務(wù)對(duì)象部分 var urls=[ 'rtsp://admin:HUAN1415@192.168.1.106:554/Streaming/Channels/102',//視頻流地址 'rtsp://admin:HUAN1415@210.201.225.44:554/Streaming/Channels/202'//視頻流地址 ]; var rsurl=';;//webrtc-streamer服務(wù)地址 //---------創(chuàng)建視頻播放界面-------------------------------------------------------- function plays(idx){ var videoelt = document.createElement("video");//創(chuàng)建一個(gè)播放器 var vi_tag='videoTag_'+idx;//播放器的id videoelt.id = vi_tag;//播放器id videoelt.muted = true; videoelt.width=500; videoelt.height=600; videoelt.controls=true;//開啟進(jìn)度條 document.getElementById ("play_div").appendChild(videoelt);//添加播放器到界面中 var webRtcServer = new WebRtcStreamer(vi_tag,rsurl);//創(chuàng)建webrtc流對(duì)象 //連接視頻,參數(shù)1 視頻地址，參數(shù)2 音頻地址（這里沒有），參數(shù)3 連接參數(shù)(這里采用的是tcp,120秒超時(shí)等） webR(urls[idx],undefined,"rtptransport=tcp&timeout=120&width=320&height=0"); webRtcServerList[idx]=webRtcServer;//緩存視頻流對(duì)象 } //----------頁面退出時(shí)關(guān)閉播放流--------------------- window.onbeforeunload = function() { for(var i=0;i<webR;i++){ webRtcServerList[i].disconnect(); } } //---------初始化加載視頻---------------------------- window.onload= function() { for(var i=0;i<urls.length;i++){ plays(i); } } </script> </body> </html>這樣就完成了整個(gè)項(xiàng)目實(shí)現(xiàn)，這里如果視頻沒有播放成功，最有可能是穿透服務(wù)的問題，需要檢查穿透服務(wù)。
1.《關(guān)于網(wǎng)頁看視頻不加載失敗怎么辦，你需要知道這些在網(wǎng)頁上顯示監(jiān)控視頻》援引自互聯(lián)網(wǎng)，旨在傳遞更多網(wǎng)絡(luò)信息知識(shí)，僅代表作者本人觀點(diǎn)，與本網(wǎng)站無關(guān)，侵刪請(qǐng)聯(lián)系頁腳下方聯(lián)系方式。
2.《關(guān)于網(wǎng)頁看視頻不加載失敗怎么辦，你需要知道這些在網(wǎng)頁上顯示監(jiān)控視頻》僅供讀者參考，本網(wǎng)站未對(duì)該內(nèi)容進(jìn)行證實(shí)，對(duì)其原創(chuàng)性、真實(shí)性、完整性、及時(shí)性不作任何保證。
3.文章轉(zhuǎn)載時(shí)請(qǐng)保留本站內(nèi)容來源地址，http://f99ss.com/gl/3128856.html
