帯域 (kbps) リアルタイムグラフ - 直近 60 秒
各 stream の HLS fragment 取得時の bitrate を 1 秒間隔でプロット。
Shaka Player の NetworkingEngine response filter から SEGMENT の loaded bytes を拾い、
streamBandwidth stats と組み合わせて算出。
同じ Kameo IP カメラの ライブストリームを 2 経路で並列再生: Original はカメラの H.264 をそのまま、NormAV1 は同じカメラフレームを SlimeCodec NormMAP-driven SVT-AV1 でリアルタイム再エンコード。 EXT-X-PROGRAM-DATE-TIME で時刻同期されているので 左右で同時刻の同フレームを比較できます。 各タイル下のバーが リアルタイム帯域 (kbps)、 右下数値は 累計転送量と Original 比 savings %。 タイルをクリックで拡大、もう 1 度で並列に戻ります。
各ストリームの設定
| 名前 | codec | 容器 | パラメータ | 備考 |
|---|---|---|---|---|
| Original | H.264 Main | TS HLS (live) | (camera 出力そのまま) | カメラの RTMP/HLS 1080p をそのまま中継 |
| NormAV1 | SVT-AV1 | fMP4 HLS (live) | preset 8 / CRF 60 (sweet spot) / qp-range 30 / agg=p75 / seg=5 | SlimeCodec NormMAP-driven ROI 配分でリアルタイム再エンコード、9.2 MB → 1.6 MB / chunk (-90%)、1.33x realtime (Ryzen 12c) |
normav1-runner.js が C:\Kameo-24\Kameo.m3u8 を 2 秒間隔で polling、
新規 .ts が見えるたびに slimecodec-svtav1-norm.exe v0.3.5-fix でエンコ→fMP4 segment 化→tfdt を
cumulative time で patch→ C:\Kameo-24-norm-av1\Kameo.m3u8 に rolling 追記。
EXT-X-PROGRAM-DATE-TIME は source から保持しているので、Shaka Player が左右の wall-clock を揃えてくれる。
技術ノート
- 両タイルとも iframe で
/play/?src=...を埋め込み、本番 demo と同じ Shaka Player + React UI (中央 play/pause、上部 LIVE / 時計 / time-shift indicator、auto-hide controls) - NormAV1 のエンコ遅延 = source segment が終わってから ~13 秒、HLS の通常 buffer (3 segments ≒ 70s) と 合わせ カメラ→画面まで実測 ~80 秒。同 buffer 範囲なので両 tile が同フレームを表示
- 帯域は parent 側から
iframe.contentWindow.player.getNetworkingEngine()に response filter を後付けして SEGMENT 取得バイト数 / segment 長から算出、累計 MB と Original 比 savings % を表示 - CORS 制限のためソース origin と同一の
javatel.co.jpから配信、または upstream 側に CORS header が必要 - NormAV1 はブラウザの AV1 デコード対応に依存 (Chrome / Edge / Firefox 最近版: OK、Safari 17+: OK、HW デコード必須ではない)