"動画"配信のお話

https://connpass.com/event/304679/ での登壇資料。
mse/emeの話に加えて、shaka-playerの設定方法についても軽く触れている。

Transcript

1. ”動画”配信のお話 DMM.com 動画配信開発部 配信基盤G 今西勇太
2. 2 自己紹介 名前: 今西勇太 (@nisshii0313) 所属: DMM.com 動画配信開発部 配信基盤G 最近は主にPS4/5、テレビ向けの 動画再生プレイヤーを触ってます (for DMM TV) 外部向けな勉強会の運営もやってます Think! Frontend by DMM 好き: まんがタイムきらら、内田真礼さん 近況報告: 思い立って自作PCしました。
3. 3 自作PC組んだよ〜 構成はこんな感じです : https://jisaku.com/pc/FrLW5VHFETwsmj6gJBJSKf (もやし生活を回避するために、4070tiにしました。4080superはしんどい...) 大きなパーツに関しては白で統一してあります。 (白くて光る8pinケーブル買い足さなきゃ) (モジャモジャ配線もついでに綺麗にしたい) 4Kなホグワーツレガシーが快適に遊べてます。 その他、アニメの録画鯖を建てようとしてます。 完成すれば、各クール全アニメ履修できるね :+1: 受信用のアンテナ買わなきゃ...
4. 本題です
6. DMMと言えば、やっぱり ”動画” ですよね！！
7. なので ”動画”配信の お話をします。
8. 特に今日は、動画配信の フロントエンド の話をざっくりとします！
9. 動画配信の フロントエンドって 何やってるの？ DMM.com 動画配信開発部 配信基盤G 今西勇太
10. フロントエンドで動画を流すって... パッと思いつくのは video タグかと思います。 https://developer.mozilla.org/ja/docs/Web/HTML/Element/video
11. フロントエンドで動画を流すって... パッと思いつくのは video タグかと思います。 https://developer.mozilla.org/ja/docs/Web/HTML/Element/video ここがあんまり 嬉しくない...
12. なんで嬉しくないの？ 大きく分けて2つ理由があります。 - ユーザーフレンドリーに再生したい - 悪い人に盗み見られるかも...
13. - ユーザーフレンドリーに再生したい - ユーザーの回線環境はまちまち (携帯な会社はどこも大変そうね...) - それでも安定して再生するために「ABR」って技術を使ってる (画質「AUTO」ってあるアレです) → 画角の異なる動画を複数(たくさん)用意して、適宜切り替えたい → videoタグにsourceで渡せるのって動画形式が異なるもの数本程度 (同じ動画形式で画角が異なるものを動的に切り替えるのは大変) → Media Source Extensions って技術が必要になる なんで嬉しくないの？
14. - ユーザーフレンドリーに再生したい → ABRの技術を使って、ユーザーに安定して視聴してもらうには、 　　Media Source Extensions (以降 MSE) の技術を使って再生する必要がある (クロスブラウザ対応も考えると、なるべくWeb標準に乗っかっておきたい) ↑ 結局はJavaScriptからvideoタグの細かい機能を拡張するためのAPI ゴリゴリ書いても良いし、便利なライブラリも多々あります。 なんで嬉しくないの？ 例: shaka-player(google製) 設定を入れると、ユーザーの帯域をとって 適切なbitrateで再生してくれる
15. 設定できる項目の例 - enabled: これをtrueにしないとABRされない - defaultBandwidthEstimate: 帯域の初期値として置きたい値 (bit/sec) これをある程度高くしておくことで、巻き戻しができないような ライブ配信においても最初から綺麗に見てもらう、が実現できる (その後の画質はABRされる) (補足) shaka-playerでのABR
16. なんで嬉しくないの？ 大きく分けて2つ理由があります。 - ユーザーフレンドリーに再生したい - 悪い人に盗み見られるかも...
17. なんで嬉しくないの？ - 悪い人に盗み見られるかも... - みんな大好き、著作権のお話です (cf. DRM) - 細かい話をするとキリがないので、とりあえず アニメやライブコンテンツ等を 「買った人だけ見れるようにする」の実現を考えます - そのためには、適宜暗号化しておいて、再生する前に 権利のあるユーザーだけ復号できる仕組みが必要 → Encrypted Media Extensions って技術が必要になる mp4だとコピーして 再生できちゃうよね...
18. なんで嬉しくないの？ - 悪い人に盗み見られるかも... → 解決するためには、暗号化された動画を Encrypted Media Extensions (以降EME) の技術で復号して再生する 必要がある ↑これもMSEに基づいたJavaScriptなAPI MSEを扱いやすくしてくれるライブラリは大抵EME対応してくれている ので、難しく考えすぎなくてもOK shaka-playerでも もちろん対応してくれている！
19. (補足) shaka-playerでのEMEの設定 設定できる項目の例 - drm.servers: 各drmの技術に対応したlicense serverのURLを渡してあげる - drm.preferredKeySystems: 複数のdrmの技術を使用する場合に、どれから優先して使うかを 設定できる (PC/SP以外のデバイスによっては指定が必要) 他にも、セキュリティレベルの高いdrmを要求するコンテンツに対しては、 別途設定が必要だったり... googleやapple、ms等がデファクトスタンダードを各々作ってる デバイスごとに、対応非対応がある コンテンツの再生に必要なライセンス （鍵、有効期限等）を発行するサーバー
20. 結論 動画配信のフロントエンドって何やってるの？ - 色んな回線のユーザーが安定して動画を視聴できたり - 買った人だけがアニメを見れる 世界線を作るために、MSE/EME の技術 (に対応したライブラリを) 使って 快適に動画が見れる環境作りをしています。 (cf. https://github.com/shaka-project/shaka-player ありがとうGoogle 🙏) もちろん、再生ページ自体もサクサクじゃないとなので、 いわゆるwebフロントの最適化みたいなところもやってます 💪
21. 最後に 新卒向けはこちら https://dmm.snar.jp/jobboard/detail.as px?id=3EUikQkb_Yg7oaaqCX9H2w 採用情報はこちら https://dmm-corp.com/recruit/engineer/ この後の懇親会でもぜひお話ししましょう！ わいわい！！！