# Video Streaming

:::info
* Axis P1465-LE 僅支援 H.264 / H.265（RTSP/HTTP）與 MJPEG 等主流串流格式，無法直接由攝影機本身產出 WebRTC 串流。
:::

* **主流瀏覽器支援的串流格式技術參數對照表**

| 格式/協定 | 技術參數 | 主要支援瀏覽器 |
| -------- | -------- | -------- |
| HLS (HTTP Live Streaming) | 使用 M3U8 播放列表分段傳輸TS格式，支援多碼率自適應(AVBR)，延遲約10-30秒 | Safari全版本、Chrome/Edge/Firefox需部分外掛或特定設定 |
| MPEG-DASH | 基於 XML 的 MPD 清單，支援 CMAF 封裝與多編碼格式 (含H.264/AVC、H.265/HEVC)，延遲可優化至3-5秒 | Chrome、Edge、Firefox需搭配Media Source Extensions(MSE) |
| **WebRTC** | 使用 SRTP/SRTCP 加密，支援 VP8/VP9/H.264 編碼，延遲低於 500ms，解析度最高4K@60fps | Chrome/Edge/Firefox/Safari全支援 |
| RTMP | 基於 TCP 的專有協議，使用 FLV 封裝格式，延遲1-3秒，需Flash外掛(已淘汰) | 現代瀏覽器需透過轉接層(如hls.js)兼容 |
| VP9 | 開放編碼格式，支援 8K@60fps，10/12bit色深，壓縮率較 H.265 高約 30% | Chrome/Edge/Firefox全支援，Safari需macOS High Sierra+ |
| **AV1** | 新一代開放格式，支援 8K@120fps，HDR10+，壓縮效率較VP9提升30% | Chrome/Edge/Firefox(需v96+)，Safari需macOS Monterey+ |
| **H.264/AVC** | 主流編碼，支援 1080p@60fps，8bit 色深，CABAC/CAVLC 熵編碼 | 全瀏覽器原生支援 |
| H.265/HEVC | 4K@60fps，10bit色深，壓縮效率較H.264提升50%，需專利授權 | Safari原生支援，其他瀏覽器需硬體解碼 |
| Streams API | 支援Fetch API 與 ReadableStream，可處理 gzip/deflate 壓縮格式 | Chrome/Edge/Firefox/Safari全支援 |

* 技術比較表

| 技術 | 延遲 | 伺服器需求 | 整合複雜度 |
| -------- | -------- | -------- | -------- |
| WebRTC | 低 (100-500ms) | 無（純P2P） | 高（需處理SDP/ICE） |
| RTSP over WebSocket | 中 (500-1000ms) | 需轉碼代理 | 中 |
| MJPEG | 高 (>1s | 無 | 低 |

## RTSP over WebSocket

:::info
在Axis攝影機中整合 RTSP over WebSocket，主要方式是利用 Axis 攝影機支援的 WebSocket 協定來傳輸RTSP 串流。
Axis 部分型號攝影機（例如: 部分 ARTPEC 晶片系列）提供透過 WebSocket 封裝 RTSP 串流的功能，使得前端應用可以透過 WebSocket 連線接收影像串流，而非直接使用純 RTSP 協定，這對於穿越防火牆或瀏覽器直接播放非常有幫助。
:::

### media-stream-library-js

media-stream-library-js 是由 Axis 官方開發的 JavaScript 函式庫，主要用途是讓瀏覽器能夠直接播放來自 Axis 攝影機的 RTP 串流（例如: H.264 視訊和 AAC 音訊），而不需額外安裝外部播放器或插件。

它不是完整的播放器，不包含 UI 控制元件（如播放鍵、進度條等），而是提供低階的串流處理（pipeline），將 RTSP 透過 WebSocket 封裝的 RTP 串流，轉換成瀏覽器可用的 Media Source Extensions (MSE) 格式播放。

支援的串流格式包含 RTP 封裝的 H.264、AAC音訊，以及 JPEG 影像。

主要設計目標是支援 Axis IP Camera 串流，並依賴瀏覽器本身對編碼格式的解碼能力。

### 運作原理

傳統RTSP限制
RTSP（Real Time Streaming Protocol）通常透過TCP或UDP埠口傳輸，瀏覽器本身不支援直接播放RTSP協定，因此無法直接在網頁中用<video>標籤播放RTSP串流。

WebSocket封裝RTSP
為解決此問題，Axis Camera的韌體支援將RTSP協定封裝在WebSocket通道中（WS或WSS），使得瀏覽器可以透過標準的WebSocket協定與攝影機雙向通訊。

WebSocket提供雙向通訊通道，允許瀏覽器發送RTSP指令（如SETUP、PLAY等）給攝影機，並接收封裝在WebSocket中的RTP封包。

這樣可以穿越防火牆及瀏覽器安全限制，並且避免傳統RTSP協定在瀏覽器中無法使用的問題。

media-stream-library-js的角色
media-stream-library-js負責在瀏覽器端：

建立WebSocket連線至攝影機的RTSP over WebSocket端點。

發送RTSP指令控制串流啟動、暫停等。

接收封裝在WebSocket中的RTP封包。

解析RTP封包，抽取H.264影像與AAC音訊資料。

利用Media Source Extensions（MSE）API將解封裝後的媒體資料餵給瀏覽器的<video>元素播放。

這個過程中，media-stream-library-js實現了從WebSocket到MSE的完整串流管線，讓瀏覽器可以無縫播放Axis Camera的實時影像。

### 具體流程說明

1. 建立WebSocket連線
使用者端（瀏覽器）透過media-stream-library-js建立一個WebSocket連線到Axis Camera的WebSocket RTSP端點（通常是HTTPS端口443的WS/WSS服務）。

2. RTSP協定交換
在WebSocket通道中，media-stream-library-js發送RTSP命令（OPTIONS、DESCRIBE、SETUP、PLAY等）與攝影機協商串流參數。

3. 接收RTP封包
攝影機將RTP封包（封裝H.264影像或AAC音訊）透過WebSocket發送給瀏覽器。

4. 封包解析與重組
media-stream-library-js解析RTP封包，重組NAL單元（H.264影像片段），並將音訊資料同步處理。

5. 轉換為ISO-BMFF格式
將原始影像音訊資料封裝成瀏覽器可識別的ISO Base Media File Format（MP4容器格式的基礎），以便Media Source Extensions使用。

6. 餵給Media Source Extensions
透過MSE API將封裝好的媒體片段送入SourceBuffer，瀏覽器的<video>元素即可播放串流。

7. 播放與控制
使用者可透過 media-stream-library-js 提供的API控制播放、暫停、重試等行為。

### 相關注意事項

韌體需求：WebSocket+RTSP功能需要Axis攝影機韌體版本至少6.50以上。

瀏覽器支援：播放依賴瀏覽器對H.264與AAC的原生解碼能力，且需啟用Media Source Extensions。

延遲：由於TCP與WebSocket封裝，延遲會比UDP RTP略高，適合一般監控觀看，但非超低延遲場景。

安全性：推薦使用WSS（WebSocket Secure）以保障串流安全。

CORS問題：因瀏覽器同源政策，建議串流頁面與攝影機在同一網域，或透過代理伺服器避免跨域問題。

### 範例與資源

Axis官方GitHub的media-stream-library-js包含多個範例程式碼，如examples/browser/camera/simple-player.js，展示如何使用WebSocket與RTSP串流播放。

也有React元件Player與BasicPlayer可直接使用，方便整合到React應用中。

總結來說，media-stream-library-js透過在瀏覽器中建立WebSocket連線，實現RTSP協定的雙向通訊，接收封裝在WebSocket中的RTP封包，並利用Media Source Extensions將串流資料轉換成瀏覽器可播放格式，達成在網頁中播放Axis Camera的RTSP串流的功能。這是解決瀏覽器不支援RTSP協定的有效方案，也是Axis Camera串流整合的重要工具。

## Resources

* [Janus WebRTC Server](https://github.com/meetecho/janus-gateway)
* [Janus docker-compose: A complete guide](https://www.byteplus.com/en/topic/496945?title=janus-docker-compose-a-complete-guide)
* [Ant Media Server](https://github.com/ant-media/Ant-Media-Server)