### 簡介 #### 背景 由於專案需要，需要使用攝像頭預覽功能，裝置型號為海康威視。目前已存在的基於 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](https://github.com/mpromonet/webrtc-streamer) 這個專案，其容易使用並且較為穩定。 ### Getting Started [webrtc-streamer](https://github.com/mpromonet/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