簡介
背景
由於項目需要，需要使用攝像頭預覽功能，設備型號爲海康威視。目前已存在的基於 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
本文原創授權爲：署名 - 非商業性使用 - 禁止演繹，協議普通文本 | 協議法律文本