🧊

Webでのライブ動画再生の基礎知識について

知ってることを自分の中で整理するためのメモです。
知ってることしか知らないしそこまで使い込んでないので、間違ってる可能性は多いにありです。

動画配信とライブ配信

  • Webで動画を配信するには2つのパターンがある
    • 完成した動画ファイルをまるっと取得して再生するか
    • 動画ファイルの一部を「逐次」取得して再生する（ストリーミング）か
  • クライアントサイドとしては、サーバーにあるメディアを逐次取得するだけなので、そういう意味での違いはない
    • 今回の記事は後者の方法について
  • Web = HTTPベースのストリーミング用にいくつかプロトコルがある
    • HDS(= HTTP Dynamic Streaming)
    • HLS
    • SS(= Smooth Streaming)
    • MPEG-DASH
  • このうち、HLS / MPEG-DASHが最近の主流の2つ
  • だいたい似たような仕組みになってて、ざっくりAdaptive Streaming技術とか言ったり
  • RTSPとかRTMPがどうのこうのは、HTTPベースじゃないので割愛

Adaptive Streaming

  • HLS/DASHも同じような仕組み
  • まずプレイリストもといメタデータを取得
  • そこに書いてある最適な細切れ動画を随時取得・再生していく
  • 真の意味でAdaptiveに実装するにはjsだけではなくメディア側（サーバーサイド）でもいろいろ手を入れる必要があるし色々と大変

HLS

  • Http Live Streamingの略で、Apple産
    • プレイリストとしての`.m3u8`（.m3uのUTF-8で.m3u8、フォーマットはただのテキスト）
    • 細切れの動画コンテナである`.ts`（MPEG-2 TS）
  • 対応環境なら、`.m3u8`をvideo.srcに突っ込むだけで後はいい感じに動画を読み込んで再生してくれる
  • http://caniuse.com/#feat=http-live-streaming
    • ただしSafari(Mac/iOS) / Android(Chrome/Browser) / IE11(?) / Edgeでしか動かない
    • それ以外の環境だと後述するMSEを通す
  • Safariで直接使う場合、メディアによっては途中で止まったりすることがある（らしい）

DASH

  • MPEG-DASHを略してDASH
  • HLSはAppleの技術！標準化したい！
  • Dynamic Adaptive Streaming over HTTPの略
    • プレイリストとしての`.mpd`（フォーマットはXML）
    • 細切れ動画コンテナの`.m4s` || `.mp4` || `.ts`
  • HLSと違い、ネイティブで読める環境はまだない
    • これもMSEを通して再生
  • DASHにできて他の形式にできないことが色々ある

MSE

コンテナとかコーデックとか

DRM関連

ライブラリたち

あらゆる環境（特にモバイル）で、安定的にあらゆるフォーマットをいい感じに再生したいなら、現段階では手書きするしかなさそう。
ただこのへんを手書きしてるであろう人は知ってるけど、並外れたスキルと莫大な時間が必要そうで、戦場は選ぶほうが賢明かなーという気持ち。

まぁなんしかどのライブラリも銀の弾丸ではなくて、要件に応じてあれこれハマるしかないように見える。

ストリーミングサーバー

割愛。
サーバーサイドでプレイリストや動画の細切れをエンコードする仕事。
まぁWebRTC関連と顔ぶれは似てる。

先駆者たち

これも割愛。
どこのサイトがどういう技術でアレしてコレしてるかもざっと調べたけど内緒。

界隈の悩みのタネ

想像です。

  • 再生環境によってのRenderer選び
    • どの仕様を使うのか、どの仕様なら動くのか
    • いちおう動くけどCPU負荷がアレで長時間はままならんとか
  • 遅延との戦い
    • そもそもの配信遅延とか
    • HTTPならではのDNS解決云々とか
    • リアルタイム（数秒遅れないとは言ってない）とか
  • 動画ファイル自体によるトラップあれこれ
    • コンテナ詐欺とかコーデック詐欺とか
    • `canPlayType()`は信用できるやつになったのだろうか
    • 細切れにしすぎるとリクエストかさむけど、刻まないとダウンロードに時間食うとか
  • モバイルで自動再生とかインライン再生したい問題
    • というか横画面で固定したいよねとか
    • 雑に`transform:rotate(90deg);`してアウアウするとか
  • video要素すらブラックボックスに見えてくる問題
    • canvasの方が楽と見せかけてやっぱキツいとか
  • 生MSEはつらい問題

ちょっと想像してみただけでコレなので、たぶんやってみたら他にもいーーーーーっぱいあると思う。
苦しまない程度にやっていきたい・・な・・・。