簡介
背景
由于項目需要，需要使用攝像頭預覽功能令哟，設備型號為海康威視妨蛹。目前已存在的基于 FFmpeg 的方案延遲都太高屏富，所以項目最終選擇基于此方案。
方案
方案選用為基于 WebRTC 的視頻即時通訊蛙卤，它原生支持對 RTP 協議的解碼狠半，所以能夠做到延遲很低，大概0.2-0.4秒左右颤难，其他方案都有大于1秒的延遲神年。
WebRTC對瀏覽器有要求，可以在下面的地址中查看支持的瀏覽器行嗤。
https://caniuse.com/rtcpeerconnection
以下介紹內容來自百度百科
WebRTC已日，名稱源自網頁即時通信（英語：Web Real-Time Communication）的縮寫，是一個支持網頁瀏覽器進行實時語音對話或視頻對話的API栅屏。它于2011年6月1日開源并在Google飘千、Mozilla、Opera支持下被納入萬維網聯盟的W3C推薦標準栈雳。
WebRTC實現了基于網頁的視頻會議护奈，標準是WHATWG 協議，目的是通過瀏覽器提供簡單的javascript就可以達到實時通訊（Real-Time Communications (RTC)）能力哥纫。
WebRTC 的實現方案在 Github 有非常多霉旗，經過一序列對比和測試，最終選擇的是使用 webrtc-streamer 這個項目，其容易使用并且較為穩(wěn)定厌秒。
Getting Started
webrtc-streamer 不僅支持對 RTSP 流的捕獲而且還支持對V4L2以及屏幕窗口快照的捕獲读拆。
webrtc-streamer 內置了一個小型的 HTTP server 來對 webrtc 需要的相關接口提供支持。
下面具體開始如何設置：
對攝像頭進行配置
由于 webrtc 的核心庫還不支持 h265, 所以需要設置為 h264 編碼简僧。
登錄到海康威視攝像頭的后臺配置中心雕欺，在 “視音頻” 菜單下進行設置岛马，然后保存。
下載最新包
在github 發(fā)布頁面根據需要的平臺選擇相應的包下載
https://github.com/mpromonet/webrtc-streamer/releases
下載完成后可以使用以下命令進行測試：
./webrtc-streamer rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mov
打開 localhost:8000 已訪問頁面
測試設備
如果沒有問題屠列，就可以使用本地的設備進行測試了啦逆，海康威視視頻流默認地址為：
rtsp://賬號:密碼@IP地址:554/Streaming/Channels/101
替換相應的信息以進行測試笛洛。
如果是在 windows 下夏志，webrtc-streamer 也會抓取到窗口和屏幕的快照頁面，可以使用 -q 參數進行過濾苛让，其支持正則表達式沟蔑。這個參數沒有在 help 列表里面列出來是我查看源碼發(fā)現的。
./webrtc-streamer rtsp://賬號:密碼@IP地址:554/Streaming/Channels/101 -q (?=rtsp).*
集成
你可以在下載的發(fā)布包中的html文件夾中找到 index.html 來查看示例代碼狱杰，下面列出來核心代碼：
<html>
<head>
<script src="libs/adapter.min.js" ></script>
<script src="webrtcstreamer.js" ></script>
<script>
var webRtcServer = null;
window.onload = function() {
webRtcServer = new WebRtcStreamer("video",location.protocol+"http://"+window.location.hostname+":8000");
webRtcServer.connect("rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mov");
}
window.onbeforeunload = function() { webRtcServer.disconnect(); }
</script>
</head>
<body>
<video id="video" />
</body>
</html>
使用 WebComponent 集成
<html>
<head>
<script type="module" src="webrtc-streamer-element.js"></script>
</head>
<body>
<webrtc-streamer url="rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mov"></webrtc-streamer>
</body>
</html>
總結
主要還是對 webrtc 的熟悉瘦材，你可以在 https://webrtc.org/getting-started/overview 找到相關指南。
比如什么是 TURN server仿畸，什么是peer connections 都可以在上面的指南中找到食棕。
本文地址：http://www.cnblogs.com/savorboard/p/webrtc-rtsp.html
作者博客：Savorboard
