date time comments 0 pageviews

上篇介紹過 RTSP，這篇來談談 WebRTC。

RTSP 是 IP 攝影機 (CCTV)、監控系統最常見的傳輸協定，但需要使用 VLC Media Player 等 特定媒體播放器觀看是其一大缺點。相比之下，不需安裝任何插件，用瀏覽器即可直接播放，便是 WebRTC (Web Real-Time Communication) 標準的最大優勢。

WebRTC 包含三大 API 組件：

  • MediaStream：負責存取本地端的攝影機與麥克風影音串流。
  • RTCPeerConnection： 核心組件，處理影音傳輸、編解碼、頻寬管理及加密連線。
  • RTCDataChannel： 建立高效能的雙向通道，用於傳送檔案、遊戲指令或任意數據。

而 WebRTC 的主要優勢包含：

  1. 低延遲：其基於 UDP 協定，非常適合視訊會議與雲端串流。
  2. 安全性：媒體層 (Media Stream) 強制啟用 SRTP 與 DTLS 加密。
  3. 原生支援：現代主流瀏覽器均內建支援，無需下載安裝額外軟體。

WebRTC 技術已成為 Google Meet、Discord 及各類即時協作工具的底層標準。而網路攝影機整合的需求相對單純，我的目標是將 IPCam 的 RTSP 轉成 WebRTC，方便用瀏覽器直接觀看。這個需求可借用上回介紹的 MediaMTX 輕易實現，以下是我的實驗筆記。

我寫了一個 docker-compose.yml 建立容器，設定檔放在 mediamtx.yml。容器 Image 特別指定包含 ffmpeg 的版本，方便直接在容器內轉碼。

services:
  rtsp-server:
    # 使用包含 ffmpeg 的 MediaMTX 映像，方便直接在容器內轉碼
    image: bluenviron/mediamtx:latest-ffmpeg
    container_name: mediamtx
    restart: unless-stopped
    ports:
      - "8554:8554"      # RTSP TCP
      - "8000:8000/udp"  # RTSP UDP (RTP)
      - "8001:8001/udp"  # RTSP UDP (RTCP)
      - "8889:8889"      # WebRTC Signaling (HTTP)
      - "8189:8189/udp"  # WebRTC Media (ICE/UDP) - 重要
      - "8888:8888"      # HLS (可選)
    environment:
      - MTX_WEBRTCADDITIONALHOSTS=<server-ip> # 伺服器實體 IP
    volumes:
      - ./mediamtx.yml:/mediamtx.yml
      - ./videos:/videos

mediamtx.yml 設定如下，共設定兩個來源，一個模擬 IP Cam RTSP，一個則用 ffmpeg 播放 .mp4 再轉為 H.264 跟 Opus 編碼，確保與大部分瀏覽器相容。

webrtc: yes
webrtcAddress: :8889
# 讓 Docker 只需要對映此 UDP Port，不需開 Port Range
webrtcLocalUDPAddress: :8189
paths:
  # 範例 1: 若來源已是 H264 (無需轉碼)
  # 讀取位址: http://localhost:8889/ipcam
  ipcam:
    source: rtsp://<user>:<passwd>@192.168.1.123:554/stream2
  
  # 範例 2: 影片來源非 H264，使用內建 ffmpeg 轉碼，確保瀏覽器相容
  # 讀取位址: http://localhost:8889/video_h264
  # runOnInit: MediaMTX 啟動時立即執行，串流預先就緒，讀者連線不會撲空
  video_h264:
    source: publisher
    # 一啟動就用 ffmpeg 循環播放並進行轉碼
    # 視訊 H.264 音訊 Opus 確保瀏覽器相容，並使用 ultrafast 預設以降低 CPU 負擔
    # 轉換結果用 RTSP 推送到 video_h264 路徑 
    runOnInit: >
      ffmpeg -stream_loop -1 -re -i /videos/Friren.mp4
      -c:v libx264 -preset ultrafast -tune zerolatency -b:v 4096k
      -c:a libopus -b:a 128k 
      -f rtsp rtsp://localhost:$RTSP_PORT/$MTX_PATH
    runOnInitRestart: yes

啟動容器後，用瀏覽器開啟 http://<server-ip>:8889/video_h264 即可看到影片內容：

既然影像能直接用 URL 開啟，簡單寫段 HTML 即可將它們嵌進網頁：

<!DOCTYPE html>
<html>
<body>
	<style>
	body { display: flex; gap: 12px; }
	iframe {
		width: 480px; height: 270px;
	}
	</style>
	<iframe src="http://debian13:8889/video_h264"></iframe>
	<iframe src="http://debian13:8889/ipcam"></iframe>
</body>
</html>

就這麼簡單。

學會這招，未來想在網站整合即時影像就是小菜一碟囉~


Comments

Be the first to post a comment

Post a comment