動画配信のフロントエンドって何やってるの

フロントエンド合同勉強会（DMM×PRTimes）での登壇資料。
mse/emeについて軽く触れている。

Transcript

1. 動画配信の フロントエンドって 何やってるの？ DMM.com 動画配信開発部 配信基盤G 今西勇太
2. 2 自己紹介 名前: 今西勇太 (@nisshii0313) 所属: 動画配信開発部 配信基盤G 最近は主にPS4/5、テレビ向けの 動画再生プレイヤーを触ってます (for DMM TV) 外部向けなFE勉強会の運営もやってます Think! Frontend by DMM 近況報告: 推し(内田真礼さん)がゲーミングPC買うためにドス パラでロケするらしいので、思い立って自作PCしまし た。
3. 3 自作PC組んだよ〜 構成はこんな感じです : https://jisaku.com/pc/FrLW5VHFETwsmj6gJBJSKf (もやし生活を回避するために、4070tiにしました。4080superはしんどい...) 大きなパーツに関しては白で統一してあります。 (白くて光る8pinケーブル買い足さなきゃ) (モジャモジャ配線もついでに綺麗にしたい) 4Kなホグワーツレガシーが快適に遊べてます。 その他、アニメの録画鯖を建てようとしてます。 完成すれば、各クール全アニメ履修できるね :+1: 受信用のアンテナ買わなきゃ...
4. 動画配信の フロントエンドって 何やってるの？ DMM.com 動画配信開発部 配信基盤G 今西勇太
5. 動画を流すって... パッと思いつくのは video タグかと思います。 https://developer.mozilla.org/ja/docs/Web/HTML/Element/video
6. 動画を流すって... パッと思いつくのは video タグかと思います。 https://developer.mozilla.org/ja/docs/Web/HTML/Element/video ここがあんまり 嬉しくない...
7. なんで嬉しくないの？ 大きく分けて2つ理由があります。 - ユーザーフレンドリーに再生したい - 悪い人に盗み見られるかも...
8. - ユーザーフレンドリーに再生したい - ユーザーの回線環境はまちまち (携帯な会社はどこも大変そうね...) - それでも安定して再生するために「ABR」って技術を使ってる (画質「AUTO」ってあるアレです) → 画角の異なる動画を複数(たくさん)用意して、適宜切り替えたい → videoタグにsourceで渡せるのって動画形式が異なるもの数本程度 (同じ動画形式で画角が異なるものを動的に切り替えるのは大変) → Media Source Extensions って技術が必要になる なんで嬉しくないの？
9. - ユーザーフレンドリーに再生したい → ABRの技術を使って、ユーザーに安定して視聴してもらうには、 　　Media Source Extensions (以降 MSE) の技術を使って再生する必要がある ↑ 結局はJavaScriptからvideoタグの細かい機能を拡張するためのAPI ゴリゴリ書いても良いし、便利なライブラリも多々あります。 なんで嬉しくないの？
10. なんで嬉しくないの？ 大きく分けて2つ理由があります。 - ユーザーフレンドリーに再生したい - 悪い人に盗み見られるかも...
11. なんで嬉しくないの？ - 悪い人に盗み見られるかも... - みんな大好き、著作権のお話です (cf. DRM) - 細かい話をするとキリがないので、とりあえず アニメやライブコンテンツ等を 「買った人だけ見れるようにする」の実現を考えます - そのためには、適宜暗号化しておいて、再生する前に 権利のあるユーザーだけ復号できる仕組みが必要 → Encrypted Media Extensions って技術が必要になる mp4だとコピーして 再生できちゃうよね ...
12. なんで嬉しくないの？ - 悪い人に盗み見られるかも... → 解決するためには、暗号化された動画を Encrypted Media Extensions (以降EME) の技術で復号して再生する 必要がある ↑これもMSEに基づいたJavaScriptなAPI MSEを扱いやすくしてくれるライブラリは大抵EME対応してくれている ので、難しく考えすぎなくてもOK
13. 結論 動画配信のフロントエンドって何やってるの？ - 色んな回線のユーザーが安定して動画を視聴できたり - 買った人だけがアニメを見れる 世界線を作るために、MSE/EME の技術 (に対応したライブラリを) 使って 快適に動画が見れる環境作りをしています。 (cf. https://github.com/shaka-project/shaka-player ありがとうGoogle 🙏) もちろん、再生ページ自体もサクサクじゃないとなので、 いわゆるwebフロントの最適化みたいなところもやってます 💪
14. おまけ: 宣伝 今日話した内容が5分で話せる限界な気がするんですが、 10分もらって話せる機会が月末にあるので興味持っていただければぜひ！ EMEの部分とか結構すっ飛ばして喋ったので、そこらへん詳しく話そうかなと 思ってますー。 https://connpass.com/event/304679/