基於 WebRTC 的 RTSP 視訊實時預覽
簡介
背景
由於專案需要，需要使用攝像頭預覽功能，裝置型號為海康威視。目前已存在的基於 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 這個專案，其容易使用並且較為穩定。
Getting Started
webrtc-streamer 不僅支援對 RTSP 流的捕獲而且還支援對V4L2以及螢幕視窗快照的捕獲。
webrtc-streamer 內建了一個小型的 HTTP server 來對 webrtc 需要的相關介面提供支援。
下面具體開始如何設定：
對攝像頭進行配置
由於 webrtc 的核心庫還不支援 h265, 所以需要設定為 h264 編碼。
登入到海康威視攝像頭的後臺配置中心，在 “視音訊” 選單下進行設定，然後儲存。
下載最新包
在github 釋出頁面根據需要的平臺選擇相應的包下載
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 列表裡面列出來是我檢視原始碼發現的。
./webrtc-streamer rtsp://賬號:密碼@IP地址:554/Streaming/Channels/101 -q (?=rtsp).*
整合
你可以在下載的釋出包中的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+"//"+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
本文原創授權為：署名 - 非商業性使用 - 禁止演繹，協議普通文字 | 協議法律文字