Web 筆記 - IP Camera 與瀏覽器整合應用

最近工作上剛好遇到一個需求，要把 IP Camera 的影像透過瀏覽器顯示出來。 看起來好像很簡單對吧？實際研究下去才發現裡面眉角不少，所以就趁這個機會好好整理一下有哪些實作方式、優缺點、支援情況等等。

一、IP Camera 常見的串流格式有哪些？

多數 IP Camera 本身會提供下列常見的串流協定／格式，通常可以透過攝影機本身的網頁介面或說明文件查到：

• RTSP（Real-Time Streaming Protocol） 幾乎所有監視器都支援的主流串流協定，屬於即時串流格式，但瀏覽器端不支援，需要額外處理才能播放。

這裡有一個可供參考的 RTSP 測試網站，但該站的 RTSP 串流穩定度不一，偶爾可能無法播放。

• MJPEG（Motion JPEG over HTTP） 就是一張一張的 JPEG 圖組合成影片，通常會提供一個 HTTP 連結（例如 http://<ip>/video.mjpg），可以直接用 <img> 播放。

Note:IP Camera 的串流格式通常不只一種，可能 RTSP、MJPEG 都有提供，只是網址不同。可以參考產品手冊或管理後台看支援哪些格式。

這邊另外補充一個專案，主要是將 RTSP 轉換成 MJPEG，過程中使用 FFmpeg 進行串流格式的轉換。此專案展示了如何處理即時串流並轉成更容易在瀏覽器中顯示的格式。

專案連結

二、瀏覽器對這些格式支援怎麼樣？

三、實作方式有哪些？

1. 直接播放 MJPEG（快速又簡單）

如果我們的 IP Camera 有提供 MJPEG 的串流網址，直接用 HTML 播就好：

這個方法的最大優點就是 超級簡單，幾乎不用額外設定，也不需要做任何轉格式，更不用額外加上 JavaScript，就能直接把影像跑起來。不過，它也有一些限制，例如只能播出畫面而沒有音訊，加上因為是以 MJPEG 連續傳送影格的方式運作，所以會比較吃頻寬，延遲也相對偏高。

2. RTSP → HLS（常見做法）

因為瀏覽器不支援 RTSP，所以常見的解法是透過工具把 RTSP 串流轉換成 HLS（.m3u8 格式），再用前端 <video> 進行播放。我在串流應用筆記裡也有記錄過這樣的應用方式。

例如用 FFmpeg 做轉檔：

前端播放搭配 hls.js：

這種做法的優點是相容性高，前端只要用原生 <video> 就能直接播放，不需要額外套件。不過，它的缺點是會有明顯的延遲（通常在幾秒到十幾秒不等），所以雖然適合「看得到就好」的場景，但若要追求低延遲互動，可能就不夠理想。

3. RTSP → DASH（常見做法）

前端播放搭配 dash.js：

4. RTSP → WebRTC（低延遲但稍複雜）

WebRTC 在瀏覽器端支援很好，延遲也低，但一樣不吃 RTSP，這時就需要搭配 Media Server 來協助轉換。

🔍 待研究的 Media Server（之後可以依功能與容易程度挑一個試玩）：

• MediaMTX（前身是 rtsp-simple-server，開源且支援多種格式轉換）
• Ant Media Server（支援 WebRTC/HLS/RTMP，但是商業授權）
• Janus Gateway（功能最齊全，但設定略複雜）

整體架構會長這樣：

• 優點：低延遲、支援音訊、雙向溝通都 OK
• 缺點：整合比較複雜，Media Server 要架、網路防火牆設定也要注意

四、結論

因為瀏覽器本身不支援 RTSP，所以常見的做法是把 RTSP 轉成瀏覽器能播放的格式。這裡有幾種選擇：

如果只是單純要快速預覽或 Demo，可以把 RTSP 轉成 MJPEG，用 <img> 直接顯示，雖然只能播畫面沒有音訊，但做法簡單、不需要額外的播放器。

另一種比較常見的方式是把 RTSP 轉成 HLS（.m3u8），再搭配 hls.js 播放，這樣就能在大部分主流瀏覽器上使用，還支援音訊，不過缺點是延遲會比較明顯。

最後，如果需求是低延遲、同時要支援音訊，甚至要做到比較接近專業播放體驗的話，則可以考慮把 RTSP 轉成 WebRTC，但這通常需要搭配 Media Server 一起處理，實作成本也相對較高。