hls.js のコントリビューターになろう

HLS

正式には, HTTP Live Streaming の略で, Apple が開発したストリーミングプロトコルです. ストリーミングとは, 動画のように容量の大きなデータをすべてダウンロードしてから再生開始するのではなく, ダウンロードしたデータから再生を開始し, 再生している間も残りのデータをダウンロードし続ける仕組みです.

また, ストリーミングでは, バッファリングによって, ふくそうなどによりネットワークの回線が混雑した場合でも, (ある程度の間) 映像や音声をみだすことなく再生できます.

HLS は, HTTP という名前が付いているように, HTTP を利用したストリーミングプロトコルなので, Web サーバーで配信することも可能です.

HLS を構成するファイルは, 分割されたデータ (セグメントファイル) と, これらのセグメントファイルをどの順番で再生するかを記したファイル (プレイリストファイル). セグメントファイルは, MPEG2-TS (Transport Stream) 形式のバイナリデータ, プレイリストファイルは拡張子が m3u8 というテキストデータとなっています.

hls.js と Media Source Extensions

HLS は Apple が開発したプロトコルであるので, Safari (と Edge) ではプレイリストファイルを, HTMLVideoElement#src に設定するだけで再生することが可能です. しかしながら, Chrome や Firefox, IE11 では直接プレイリストファイルを解釈したり, 分割されたデータを再生可能な単位に再構築することができないので, Media Source Extensions を利用します. Media Source Extensions は, HTTP ダウンロードを利用してストリーミングするための JavaScript API です.

hls.js は, この Media Source Extensions を利用してセグメントファイルを再生する以外にも, プレイリストファイルやセグメントファイルの取得, プレイリストファイルのパース, WebWorker を利用して MP4 を demux (映像と音声の分離), ビットレートの調整 (Adaptive Bitrate Streaming) など数多くのタスクを裏側で実行してくれます. hls.js を利用する開発者からすると, video タグと, hls.js が提供するいくつかの API を知っているだけで, HLS によるストリーミング再生がブラウザで可能になります.

hls.js のコントリビューターになろう

ここからが本題ですね. hls.js のコントリビューターになるためにはどうすればいいのでしょうか … ?

小さなことから始めよう

例えば, README の間違いを修正して, PR を送って, マージされるだけでもコントリビュートすることになります. hls.js に限らず, ある程度規模のある OSS にコントリビュートするには, まずはそういった小さなことから, その OSS における雰囲気みたいなのを知ることが, 今後コントリビュートしていくうえでの敷居を下げると思います (例えば, ブランチの命名や, issue や PR のフォーマットしたがった記述, また, 英語が苦手な方であれば少しずつ英語に慣れる … etc). そして, さいわい, hls.js のコラボレーターの方はみんな優しいです w.

狙い目は以下のようなところでしょうか …

  • README などドキュメント系の更新や修正
  • 環境構築系 (ビルド環境や CI など)
  • Lint 対応

勉強会などでもよく言われていることですね.

ちなみに, わたしの例だと, 初めてのコントリビュートは, CI の修正です. そして, 意外にも, 最も大きなコントリビュートが, webpack のバージョンアップと TypeScript コンパイラに移行 したことです.

コア部分へのコントリビュート

コントリビュートが増えていくと, コア部分 (/src 以下) へコントリビュートしたくなります. しかし, 規模のある OSS ではやみくもにソースコードをリーディングしても (たまたま, 見つかるかもしれないですが) ヒット率は極めて低いでしょう.

やはり, やみくもによりは,

  • コントリビュートするためのスキル
  • /src 以下の構成の把握
  • issue 対応

これらを順に, あるいは, 同時的に進めていくのが, 結果としてはヒット率が高くなると思います.

コントリビュートするためのスキル

JavaScript

ES5 のコードがところどころ混ざっていますが, おおよそ ES2015 ~ で記述されています. また, 現在, TypeScript への移行 が進められているので, 今後, TypeScript が必須となってきます.

JavaScript API

Media Source Extensions を利用していることは述べましたが, そのほかにも, XMLHttpRequest や fetch, WebWorker, そして, HTMLVideoElement が利用されているので, これらの JavaScript API についての理解も必要になってきます.

コンテナ・コーデック

有名な JavaScript の OSS (例えば, React) と決定的に異なるのは, 動画コンテナやコーデックの理解が必要になることと, そのために数学を要することです. 動画コンテナとは, 映像と音声のファイルのまとめ方や映像と音声の同期情報のことで, 例えば, MP4, MOV, MPEG などが該当します. また, コーデックとは, 映像や音声を圧縮するアルゴリズムのことで, 例えば, 映像であれば, H.265, VP9, MPEG-4, 音声であれば, AAC, MP3, WAV などが該当します.

HLS で利用されるセグメントファイルは, MPEG2-TS 形式と述べました. したがって, 最低でも MPEG2-TS のコンテナフォーマットについては理解しておく必要があるでしょう.

また, コーデック, つまり, 圧縮アルゴリズムを理解するためには, 情報理論 (ハフマン符号, DPCM 符号, エントロピー符号) と数学 (離散コサイン変換) の基礎が必要になってきます.

コントリビュートするソースにもよりますが, demuxer などにコントリビュートする場合には, バイナリプログラミングに対する慣れ (?) みたいなのも必要になってくるかなと思います.

/src 以下の構成の把握

現状, /src 以下の構成は,

hls.js /src

上記のようになっています. 実際に見ていただくと理解できるかもしれませんが, src/loader/src/controller は比較的理解がしやすく, issue も比較的多いのでコントリビュートチャンスの多いソースになるのではないでしょうか.

issue 対応

必要なスキルを習得し, /src 以下の構成を把握しても, やはり, やみくもに進めてはヒット率は低いままです. 上記 2 つのことがある程度できていれば, issue の理解もある程度可能になっていると思われますので, あとは, issue どおりにデモを動作させてみて, チャンス ! と思えば, 修正するコードを書いて, PR を送ってみましょう. とは言え, 最初は結構な確率でクローズをくらいます w でも, 多くの人はそれが普通なので, めげずに継続あるのみです.

最大のチャンス

先ほど, 少し述べましたが, hls.js では現在, TypeScript に移行 する issue があります. 何が言いたいかと言いますと, 既存のコードを TypeScript に書き換えるだけで, PR を送ることができるのです ! つまり, TypeScript が書ければ誰でも可能と言っていいでしょう. 型情報が必要になるので, 単純に書き換え … というわけにはいきませんが, 既存のコードを移行する作業のなかで, コードリーディングもできるので, まさに一石二鳥です. これから, 動画エンジニアとして一歩踏み出したいけど … まだできていない方は, ぜひ PR を送ってみてください.

リファレンス

Share Comments
comments powered by Disqus