動画配信の フロントエンドを支える 4年間とこれから

https://connpass.com/event/333153/ での発表資料

Transcript

1. © DMM.com 動画配信の フロントエンドを支える 4年間とこれから 動画配信開発部 配信基盤グループ 今西勇太 2024/12/20 【学生向け勉強会】 teamLab×DMM tech meetup ~frontend~
2. © DMM 2 自己紹介 名前: 今西勇太 (@nisshii0313) 所属: DMM.com 動画配信開発部 配信基盤G 2021年新卒で、4年目です。 最近は主にPS4/5、テレビ向けの 動画再生プレイヤーを作ってます。 (for DMM TV) 外部向けな勉強会のメイン運営もやってます。 Think! Frontend by DMM まんがタイムきららが好きなオタクです。 ふるさと納税でみかんが10kg来て、 頑張って消費してます🍊
3. © DMM アドベントカレンダー書いたので、気になる方はぜひ！ 3
4. © DMM 今日お話すること 今日は大きく分けて以下の2点をお話します。 - DMMの動画配信のフロントエンドについてざっくり - DMMで新卒4年目のエンジニアとして求められる仕事内容 動画配信のフロントエンド、DMMで新卒エンジニアとして働くこと、 その辺りに興味を持ってもらえると嬉しいです。 4
5. © DMM 今日お話すること 今日は大きく分けて以下の2点をお話します。 - DMMの動画配信のフロントエンドについてざっくり - DMMで新卒4年目のエンジニアとして求められる仕事内容 5分LTという時間の都合上、あまり詳しい内容に触れられません。 興味を持っていただいた方はこちらの資料も併せてご覧ください。 https://speakerdeck.com/nisshii0313/dong-hua-pei-xin-noohua 5
6. © DMM DMMの動画配信のフロントエンドについてざっくり DMMの動画配信(フロントエンド)で心掛けていることは - “早く”再生できるようにする - 権利のあるユーザーだけが“うまく”再生できるようにする - どんな通信環境のユーザーでも視聴し”やすく”する 早い、うまい、やすい。どこかで聞いたことのある売り文句ですね。 6
7. © DMM DMMの動画配信のフロントエンドについてざっくり DMMの動画配信(フロントエンド)で心掛けていることは - “早く”再生できるようにする - 権利のあるユーザーだけが“うまく”再生できるようにする - どんな通信環境のユーザーでも視聴し”やすく”する 7
8. © DMM DMMの動画配信のフロントエンドについてざっくり - “早く”再生できるようにする 基本的なアプローチとしては普通のフロントエンド最適化と同じで、 レンダリングサイクルの整理が挙げられます。 (無駄な読み込み、再レンダリング防止、state管理の最適化など) コンテンツ自体の容量として、画像 <<<< 動画 なので、 上記のアプローチ1つ1つがより顕著に効いてきます。 ここは”動画配信だから”という色がそこまで出ないので割愛します。 8
9. © DMM DMMの動画配信のフロントエンドについてざっくり DMMの動画配信(フロントエンド)で心掛けていることは - “早く”再生できるようにする - 権利のあるユーザーだけが “うまく”再生できるようにする - どんな通信環境のユーザーでも視聴し”やすく”する 9
10. © DMM DMMの動画配信のフロントエンドで行っていることをざっくり - 権利のあるユーザーだけが“うまく”再生できるようにする 著作権保護の話です。DRMって聞いたことがあるかもしれません。 スマホの録画などでmp4とかmov形式が馴染み深いと思いますが、 それらは容易に複製して再生できてしまいます。 弊社で配信しているアニメ・ドラマ等が 権利のないユーザーによって不正視聴されると困る。 10
11. © DMM DMMの動画配信のフロントエンドで行っていることをざっくり - 権利のあるユーザーだけが“うまく”再生できるようにする そこで視聴権利のないユーザーによる再生を防止するために、 権利のあるユーザーだけが動画を復号できる仕組みが必要です。 → Encrypted Media Extensions (以降EME) 細かいフローは複雑なので省略しますが、 あらかじめ動画を暗号化しておき、適切な権利を持つユーザーに 鍵を付与し、ブラウザで復号させて再生させる、という仕組みです。 11
12. © DMM DMMの動画配信のフロントエンドについてざっくり DMMの動画配信(フロントエンド)で心掛けていることは - “早く”再生できるようにする - 権利のあるユーザーだけが“うまく”再生できるようにする - どんな通信環境のユーザーでも視聴し ”やすく”する 12
13. © DMM DMMの動画配信のフロントエンドで行っていることをざっくり - どんな通信環境のユーザーでも視聴し”やすく”する 全てのユーザーが4K動画の視聴を望んでいると思いますか？ 13
14. © DMM DMMの動画配信のフロントエンドで行っていることをざっくり - どんな通信環境のユーザーでも視聴し”やすく”する 全てのユーザーが4K動画の視聴を望んでいると思いますか？ → 答えは No。(厳密には、Yesとは限らない。) ユーザーの回線状況はまちまちで、 画質よりも安定視聴を求めるユーザーも多いです。 → そこで「ABR」という仕組みが必要になってきます。 14
15. © DMM DMMの動画配信のフロントエンドで行っていることをざっくり - どんな通信環境のユーザーでも視聴し”やすく”する 「ABR」(アダプティブビットレート) 画角の異なる複数(たくさん)の動画を、ユーザーの状況に合わせて 動的に切り替える仕組みです。 → これの実現のために、Media Source Extensions (以降 MSE) の技術を使って再生する必要があります。 それにより、ストリーミング配信の細かい制御が可能になります。 15
16. © DMM DMMの動画配信のフロントエンドで行っていることをざっくり - どんな通信環境のユーザーでも視聴し”やすく”する MSEの技術を使ってABR再生 あくまで厳密性を排除したという前提で、 「あらかじめ動画を短い尺に分割し、1秒ごとにユーザーの回線状況 を監視して、次にどの画角(4K・HD・SD相当 … etc)で取得するか 調整している」ようなイメージだと分かりやすいかもしれません。 16
17. © DMM 今日お話すること 今日は大きく分けて以下の2点をお話します。 - DMMの動画配信のフロントエンドについてざっくり - DMMで新卒4年目のエンジニアとして求められる仕事内容 急に話の毛色が変わりますが、温度差で風邪引かないでください笑 学生の皆さんにとって、4年目というとまだまだ先の未来の話だと思いますが、 頭の片隅に残してもらえると嬉しいです。 17
18. © DMM DMMで新卒4年目のエンジニアとして求められる仕事内容 個人的に、エンジニアリングに関わらず、仕事の評価って - X軸: 規模、関わった(まとめた)人数 - Y軸: 質、専門性、練度 の掛け算で求まると考えています。 実際に、弊社の評価基準にも - 規模: 個人→チーム→チームを超えた活躍→組織 - 質: 指示通り→自走→専門性の発揮や指示出し、指導、育成 という尺度で含まれています。 18
19. © DMM DMMで新卒4年目のエンジニアとして求められる仕事内容 個人的に理想的なロードマップはこんな感じだと考えています。 1年目 指示通りの仕事が責任を伴ってできる→軽い指示から自走できる 2, 3年目 チーム目線で必要なタスクを自走する → チーム目線で専門性を発揮したり、リーダーとして指示を出したり 19
20. © DMM DMMで新卒4年目のエンジニアとして求められる仕事内容 4年目以降 チームを超えたり、組織目線でのリーダーシップや専門性が求められてくる どういうことか？ → (2,3年目に求められていることをクリアしている前提で) 個人の成果に加えて、成果を挙げられるチーム・組織作りが求められる 例えば、自分よりも優秀なメンバーが生まれやすかったり、集まってくるような 環境づくりやそのサポートが求められる 20 って理解してます
21. © DMM DMMで新卒4年目のエンジニアとして求められる仕事内容 自分よりも優秀なメンバーが生まれやすい環境づくりやそのサポート 平たく言えば育成ですが、あくまで仕組み化しないと長続きしません。 出来ることはたくさんあると思いますが、今回特に例として挙げるのが 登壇等の外部へのアウトプットの場の提供、およびそのサポートです。 今回の合同勉強会を持ちかけ・企画したのも実はその一環だったりします。 これから定期的に開催していきたいですね！ それ以外にもThink! Frontendでは登壇内容・スライドのレビューを行っています。 21
22. © DMM まとめ - DMMの動画配信のフロントエンドについて 早く視聴できて、権利のある人だけがうまく見れて、どんな回線状況でも 視聴しやすい、を作るために色々な技術を使ってます。 (DRM, EME, MSE, ABR などなど) - DMMで新卒4年目のエンジニアとして求められる仕事内容 あくまで僕自身の考えと弊社の評価基準の共通部分をお伝えした形です。 ぜひ各々のロードマップの参考になればと思います。 ご清聴ありがとうございました！ 22