背景
由于項(xiàng)目需要，需要使用攝像頭預(yù)覽功能，設(shè)備型號(hào)為?？低?。目前已存在的基于 FFmpeg 的方案延遲都太高，所以項(xiàng)目最終選擇基于此方案。
方案
方案選用為基于 WebRTC 的視頻即時(shí)通訊，它原生支持對(duì) RTP 協(xié)議的解碼，所以能夠做到延遲很低，大概0.2-0.4秒左右，其他方案都有大于1秒的延遲。
WebRTC對(duì)瀏覽器有要求，可以在下面的地址中查看支持的瀏覽器。
https://caniuse.com/rtcpeerconnection
image
以下介紹內(nèi)容來自百度百科
WebRTC，名稱源自網(wǎng)頁即時(shí)通信（英語：Web Real-Time Communication）的縮寫，是一個(gè)支持網(wǎng)頁瀏覽器進(jìn)行實(shí)時(shí)語音對(duì)話或視頻對(duì)話的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)過一序列對(duì)比和測試，最終選擇的是使用webrtc-streamer這個(gè)項(xiàng)目，其容易使用并且較為穩(wěn)定。
Getting Started
webrtc-streamer不僅支持對(duì) RTSP 流的捕獲而且還支持對(duì)V4L2以及屏幕窗口快照的捕獲。
webrtc-streamer 內(nèi)置了一個(gè)小型的 HTTP server 來對(duì) webrtc 需要的相關(guān)接口提供支持。
下面具體開始如何設(shè)置：
對(duì)攝像頭進(jìn)行配置
由于 webrtc 的核心庫還不支持 h265, 所以需要設(shè)置為 h264 編碼。
登錄到?？低晹z像頭的后臺(tái)配置中心，在 “視音頻” 菜單下進(jìn)行設(shè)置，然后保存。
image
下載最新包
在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><scriptsrc="libs/adapter.min.js"></script><scriptsrc="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><videoid="video"/></body></html>
使用 WebComponent 集成
<html><head><scripttype="module"src="webrtc-streamer-element.js"></script></head><body><webrtc-streamerurl="rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mov"></webrtc-streamer></body></html>
總結(jié)
主要還是對(duì) webrtc 的熟悉，你可以在https://webrtc.org/getting-started/overview找到相關(guān)指南。
比如什么是 TURN server，什么是peer connections 都可以在上面的指南中找到
作者：懵懂小門神tjjlog=1
鏈接：http://m.itdecent.cn/p/28b0f2a586ca
來源：簡書
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。
