SlimeCodec 画質帯域比較デモ
同じ Kameo IP カメラから配信される Original / SlimeCodec Norm Low / Mid / High の 4 ストリームを同時表示。各タイル下のバーが リアルタイム帯域 (kbps)、 右下数値は 累計転送量と Original 比 savings %。 タイルをクリックで拡大、もう 1 度で 2x2 に戻ります。
帯域 (kbps) リアルタイムグラフ - 直近 60 秒
各 stream の HLS fragment 取得時の bitrate を 1 秒間隔でプロット。 .ts segment の loaded bytes ÷ duration を hls.js から拾っています。
各ストリームの設定
| 名前 | strength | adaptive | 備考 |
|---|---|---|---|
| Original | — | — | カメラ source そのまま (libx264 base、無加工) |
| Norm Low | 0.15 | off | 軽量、知覚的に Original と区別困難 (-22% 想定) |
| Norm Mid | 0.18 | on (range 0.20) | 中庸、scene 適応で過剰圧縮回避 |
| Norm High | 0.20 | on (range 0.30) | 強圧縮、低帯域回線向け、約 1/5 サイズ |
strength はブロック単位 d_F (交換子ノルム) → QP offset の swing 幅。 adaptive は scene 全体の motion 度に応じて strength を自動微調整。 全 stream が H.264 Baseline / yuv420p / 同 CRF=23、差は ROI 制御のみ。
技術ノート
- 各タイルは iframe で
/play/?src=...を埋め込み、本番 demo と同じ Shaka Player + React UI (中央 play/pause、上部 LIVE / 時計 / time-shift indicator、auto-hide controls) - 帯域は parent 側から
iframe.contentWindow.player.getNetworkingEngine()に response filter を後付けして SEGMENT 取得バイト数 / 24s から算出、累計 MB と Original 比 savings % を表示 - 4 stream の同時並列再生は brower のメディアパイプライン負荷を伴います (推奨: PC、Chrome / Edge)
- CORS 制限のためソース origin と同一の
javatel.co.jpから配信、または upstream 側に CORS header が必要 - norm 系 stream は
slimecodec-convert.exe+ Norm-runner.js (Node.js post-processor) で生成、 2 秒間隔で source playlist を polling して新 .ts を順次再エンコ