flv.js についての雑談

この記事は、flv.js の作者の物語を読んだ後、思うところがあって記録として書いたものだ。

現在、ライブ配信サービスや動画サービスに関連するウェブ開発であれば、基本的に最も広く使われているのが hls.js や flv.js だ。ブラウザのネイティブな video タグはこれらのフォーマットをサポートしていないため、自力でデコードする方法を見つける必要がある。

以前、Flash 全盛期にはそのほとんどを Flash で解決できたが、Flash が次第に廃止されていく中で、別の解決策を模索せざるを得なくなった。近年登場した Media Source Extensions（MSE）はこの問題を解決したものの、仕様書を自力で読み解く必要があり、ネット上にも MSE に関する詳細な情報は少なかったため、最も手軽な方法は既存のライブラリを使うことだった。

そして当時最も有名だったのが、Bilibili の flv.js と hls.js だ。

flv と hls は何が違うのか

FLV は、Flash から書き出される SWF ファイルのサイズが大きすぎる問題を解決し、ウェブ上で効率的に利用するために提案された動画フォーマットだ。では、なぜネットワーク経由で配信できるのか？

一般に、RTMP を介してウェブ上で直接再生するには Adobe Flash を使ってデコードするしかなく、これが HTML5 が成熟する前の解決策だった。しかし、Flash が歴史の幕を閉じ、各ブラウザが Flash を排除していく中で、異なるアプローチを取る必要が生じた。RTMP プロトコルはファイアウォールに遮断されることがあるため、HTTP を通すのが最も適切な方法となり、現在のライブ配信プロトコルの大半は HTTP-FLV が主流となっている。

MSE

通常の video タグは特定のファイル形式（またはコンテナ）しかサポートしていない。そのため、RTMP や m3u8 のような非対応フォーマットは video タグで直接再生することができない。

従来の audio や video にさらなる拡張性を持たせるため、ブラウザが対応していれば、MSE の API を通じて動画の内容を変更・読み取り、自前でデコードした上で video タグに渡して再生できるようになった。しかし、この実装には通常、プロトコル自体への理解や動画エンコードに関する低レベルな知識が必要であり、保守やデバッグにも多大な時間を要する。flv.js や hls.js が抜きん出た存在となったのはまさにそのためで、当時のフロントエンドにおける動画再生の需要を効果的に解決してくれたからだ。

ストリーミングを扱ったり、HLS のようなエンコード構造を処理したりするのは決して簡単なことではない。

開発者のストーリーについて

これはコア開発者である謙謙（xqq）氏のブログ記事の話だ。彼が高校生の時点で既に「FLV を MP4 にパッケージし直してウェブ上で再生する」というアイデアを持っていたのに対し、その頃の僕はまだぼんやりと無為に過ごしていた。

当時すでに HLS は存在していたが、HLS のアーキテクチャは FLV のようにプログレッシブに解析する必要があるユースケースには適していなかったため、別のアーキテクチャを設計する必要があった。開発における最大の障壁はおそらくブラウザのサポート状況だっただろう。開発当時はまだ 2015 年〜2016 年頃で、各ブラウザの対応はまだ安定していなかった。flv.js を開発するために、作者は Chromium の media 周りのソースコードまで読み漁ったという。

当時の仕事に退屈さを感じていたため、作者は配置転換を願い出て、flv.js の開発に専念した。しかし flv.js が無事リリースされたにもかかわらず、上司はその成果をほとんど評価せず、最終的な人事評価で「C」をつけられてしまった。

「2人の社員がいるとする。1人は比較的シンプルな業務を大量に書き、継続的なアウトプットを出している。もう1人は難易度が高く開発規模の大きいコアライブラリを単独で開発しており、開発サイクルが長く、最終的に外部要因によるブロックで期日通りにリリースできなかった。結果、1人目の社員は高い人事評価を得て、2人目の社員は極めて低い評価を受けた。これは公平だろうか？」

このビジネス志向の会社が技術的なアウトプットを評価しないと悟った作者は、密かに退職を計画し始めると同時に、flv.js を社内に埋もれさせて腐らせるのではなく、オープンソース化することを望んだ。

そして何より、開発者も一人の人間であり、感情があり、現状に不満を抱くこともある。僕自身、キャリアの初期に非常に挑戦的な企業へ入り、やりたいことを実現し、さまざまな領域に触れられたことを幸運に思っている。

結論

現在では、ほとんどのライブ配信サービスが flv.js を使って処理されており、自社開発している場合でも flv.js のコードを大いに参考にしているはずだ。彼がソフトウェア界やライブ配信分野に与えた貢献の大きさは計り知れない。そしてそのすべては、一つのクールなアイデアとその実践から始まったのだ。

読み終えて僕が最初に感じたのは、実に惜しいというか、やるせない思いだった。flv.js を使ったことのある開発者なら、それが HTML5 ライブ配信領域にどれほど大きな貢献をしたかよく分かるはずだ。しかし、会社という組織にとってその結果は「C評価」でしかなかったのだ。

同時に、僕自身も省みるようになった。現在ではブラウザがサポートする API がますます増え、最近話題の WebAssembly も人気が高まりつつあるが、その多くはまだ「◯◯言語から WebAssembly にコンパイルしてみた」という段階にとどまっており、より実用的なアプリケーションはまだあまり見かけないように感じる。

振り返り

もうすぐ26歳を迎える。日本で働き始めてから生活環境はずいぶん良くなったものの、それでも自分が思い描いていたものとはギャップがある。Tech Lead を引き受けてからは、ドキュメントの作成や進捗管理に追われて作業効率が落ち、落ち着いてコードを書く時間が取れなくなってしまった。これが長く続き、正直なところ力不足を感じ、精神的にも摩耗してきている。

幸いなことに、ここでは新しいことを学ぶ柔軟性がまだかなり残されており、上司も僕がやりたいことをやるよう後押ししてくれ、人事評価についてのプレッシャーもそれほど大きくない。しかしここ数年の学びを振り返ると、フロントエンド以外の領域に少し触れたくらいで、大きな成長はできていない。

大学を卒業してからは、体系的な知識を学ぶためにまとまった時間とエネルギーを割くことができなくなってしまった。これは僕にとって焦りとストレスの種になっている。以前は技術やツールの進化に強い関心を持っていたが、ここ数年はそれに対しても次第に無関心になりつつある。いつか余裕ができたら、大学に戻って当時しっかり学べなかった基礎知識や、書きたかったコードを学び直すのもいいかもしれない。まあ、そのあたりは流れに任せることにしよう。