簡介
背景
由于項(xiàng)目需要，需要使用攝像頭預(yù)覽功能，設(shè)備型號(hào)為?？低?。目前已存在的基于 FFmpeg 的方案延遲都太高，所以項(xiàng)目最終選擇基于此方案。
方案
方案選用為基于 WebRTC 的視頻即時(shí)通訊，它原生支持對 RTP 協(xié)議的解碼，所以能夠做到延遲很低，大概0.2-0.4秒左右，其他方案都有大于1秒的延遲。
WebRTC對瀏覽器有要求，可以在下面的地址中查看支持的瀏覽器。
https://caniuse.com/rtcpeerconnection
以下介紹內(nèi)容來自百度百科
WebRTC，名稱源自網(wǎng)頁即時(shí)通信（英語：Web Real-Time Communication）的縮寫，是一個(gè)支持網(wǎng)頁瀏覽器進(jìn)行實(shí)時(shí)語音對話或視頻對話的API。它于2011年6月1日開源并在Google、Mozilla、Opera支持下被納入萬維網(wǎng)聯(lián)盟的W3C推薦標(biāo)準(zhǔn)。
WebRTC實(shí)現(xiàn)了基于網(wǎng)頁的視頻會(huì)議，標(biāo)準(zhǔn)是WHATWG 協(xié)議，目的是通過瀏覽器提供簡單的javascript就可以達(dá)到實(shí)時(shí)通訊（Real-Time Communications (RTC)）能力。
WebRTC 的實(shí)現(xiàn)方案在 Github 有非常多，經(jīng)過一序列對比和測試，最終選擇的是使用 webrtc-streamer 這個(gè)項(xiàng)目，其容易使用并且較為穩(wěn)定。
Getting Started
webrtc-streamer 不僅支持對 RTSP 流的捕獲而且還支持對V4L2以及屏幕窗口快照的捕獲。
webrtc-streamer 內(nèi)置了一個(gè)小型的 HTTP server 來對 webrtc 需要的相關(guān)接口提供支持。
下面具體開始如何設(shè)置：
對攝像頭進(jìn)行配置
由于 webrtc 的核心庫還不支持 h265, 所以需要設(shè)置為 h264 編碼。
登錄到?？低晹z像頭的后臺(tái)配置中心，在 “視音頻” 菜單下進(jìn)行設(shè)置，然后保存。
下載最新包
在github 發(fā)布頁面根據(jù)需要的平臺(tái)選擇相應(yīng)的包下載
https://github.com/mpromonet/webrtc-streamer/releases
下載完成后可以使用以下命令進(jìn)行測試：
./webrtc-streamer rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mov
打開 localhost:8000 已訪問頁面
測試設(shè)備
如果沒有問題，就可以使用本地的設(shè)備進(jìn)行測試了，?？低曇曨l流默認(rèn)地址為：
rtsp://賬號(hào):密碼@IP地址:554/Streaming/Channels/101
替換相應(yīng)的信息以進(jìn)行測試。
如果是在 windows 下，webrtc-streamer 也會(huì)抓取到窗口和屏幕的快照頁面，可以使用 -q 參數(shù)進(jìn)行過濾，其支持正則表達(dá)式。這個(gè)參數(shù)沒有在 help 列表里面列出來是我查看源碼發(fā)現(xiàn)的。
./webrtc-streamer rtsp://賬號(hào):密碼@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>
總結(jié)
主要還是對 webrtc 的熟悉，你可以在 https://webrtc.org/getting-started/overview 找到相關(guān)指南。
比如什么是 TURN server，什么是peer connections 都可以在上面的指南中找到。
本文地址：http://www.cnblogs.com/savorboard/p/webrtc-rtsp.html
作者博客：Savorboard
