Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
動画配信の フロントエンドを支える 4年間とこれから
Search
Yuta Imanishi
December 20, 2024
Technology
1
310
動画配信の フロントエンドを支える 4年間とこれから
https://connpass.com/event/333153/
での発表資料
Yuta Imanishi
December 20, 2024
Tweet
Share
More Decks by Yuta Imanishi
See All by Yuta Imanishi
動画配信のフロントエンドって何やってるの
nisshii0313
0
69
"動画"配信のお話
nisshii0313
0
25
Electronで動画プレイヤー開発
nisshii0313
1
1.3k
Prometheusの話
nisshii0313
0
180
Other Decks in Technology
See All in Technology
OCI IAM Identity Domains Entra IDとの認証連携設定手順 / Identity Domain Federation settings with Entra ID
oracle4engineer
PRO
1
1.4k
DeepSeekとは?何がいいの? - Databricksと学ぶDeepSeek! 〜これからのLLMに備えよ!〜
taka_aki
2
210
開発者体験を定量的に把握する手法と活用事例
ham0215
0
160
事業を差別化する技術を生み出す技術
pyama86
3
1.2k
AI-Driven-Development-20250310
yuhattor
3
330
目標と時間軸 〜ベイビーステップでケイパビリティを高めよう〜
kakehashi
PRO
8
1.1k
一歩ずつ成長しながら進める ZOZOの基幹システムリプレイス/Growing Stap by Stap ZOZO BackOffice System Replacement
cocet33000
2
360
Amazon Bedrock Knowledge basesにLangfuse導入してみた
sonoda_mj
2
340
Platform Engineeringで クラウドの「楽しくない」を解消しよう
jacopen
5
310
MLflowはどのようにLLMOpsの課題を解決するのか
taka_aki
0
180
Qiita Organizationを導入したら、アウトプッターが爆増して会社がちょっと有名になった件
minorun365
PRO
1
390
いまからでも遅くない!コンテナでWebアプリを動かしてみよう!コンテナハンズオン編
nomu
0
200
Featured
See All Featured
GraphQLの誤解/rethinking-graphql
sonatard
69
10k
Practical Orchestrator
shlominoach
186
10k
A Philosophy of Restraint
colly
203
16k
Designing for Performance
lara
605
68k
A better future with KSS
kneath
238
17k
How GitHub (no longer) Works
holman
314
140k
How STYLIGHT went responsive
nonsquared
99
5.4k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.6k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Transcript
© DMM.com 動画配信の フロントエンドを支える 4年間とこれから 動画配信開発部 配信基盤グループ 今西勇太 2024/12/20 【学生向け勉強会】
teamLab×DMM tech meetup ~frontend~
© DMM 2 自己紹介 名前: 今西勇太 (@nisshii0313) 所属: DMM.com 動画配信開発部
配信基盤G 2021年新卒で、4年目です。 最近は主にPS4/5、テレビ向けの 動画再生プレイヤーを作ってます。 (for DMM TV) 外部向けな勉強会のメイン運営もやってます。 Think! Frontend by DMM まんがタイムきららが好きなオタクです。 ふるさと納税でみかんが10kg来て、 頑張って消費してます🍊
© DMM アドベントカレンダー書いたので、気になる方はぜひ! 3
© DMM 今日お話すること 今日は大きく分けて以下の2点をお話します。 - DMMの動画配信のフロントエンドについてざっくり - DMMで新卒4年目のエンジニアとして求められる仕事内容 動画配信のフロントエンド、DMMで新卒エンジニアとして働くこと、 その辺りに興味を持ってもらえると嬉しいです。
4
© DMM 今日お話すること 今日は大きく分けて以下の2点をお話します。 - DMMの動画配信のフロントエンドについてざっくり - DMMで新卒4年目のエンジニアとして求められる仕事内容 5分LTという時間の都合上、あまり詳しい内容に触れられません。 興味を持っていただいた方はこちらの資料も併せてご覧ください。
https://speakerdeck.com/nisshii0313/dong-hua-pei-xin-noohua 5
© DMM DMMの動画配信のフロントエンドについてざっくり DMMの動画配信(フロントエンド)で心掛けていることは - “早く”再生できるようにする - 権利のあるユーザーだけが“うまく”再生できるようにする - どんな通信環境のユーザーでも視聴し”やすく”する
早い、うまい、やすい。どこかで聞いたことのある売り文句ですね。 6
© DMM DMMの動画配信のフロントエンドについてざっくり DMMの動画配信(フロントエンド)で心掛けていることは - “早く”再生できるようにする - 権利のあるユーザーだけが“うまく”再生できるようにする - どんな通信環境のユーザーでも視聴し”やすく”する
7
© DMM DMMの動画配信のフロントエンドについてざっくり - “早く”再生できるようにする 基本的なアプローチとしては普通のフロントエンド最適化と同じで、 レンダリングサイクルの整理が挙げられます。 (無駄な読み込み、再レンダリング防止、state管理の最適化など) コンテンツ自体の容量として、画像 <<<<
動画 なので、 上記のアプローチ1つ1つがより顕著に効いてきます。 ここは”動画配信だから”という色がそこまで出ないので割愛します。 8
© DMM DMMの動画配信のフロントエンドについてざっくり DMMの動画配信(フロントエンド)で心掛けていることは - “早く”再生できるようにする - 権利のあるユーザーだけが “うまく”再生できるようにする -
どんな通信環境のユーザーでも視聴し”やすく”する 9
© DMM DMMの動画配信のフロントエンドで行っていることをざっくり - 権利のあるユーザーだけが“うまく”再生できるようにする 著作権保護の話です。DRMって聞いたことがあるかもしれません。 スマホの録画などでmp4とかmov形式が馴染み深いと思いますが、 それらは容易に複製して再生できてしまいます。 弊社で配信しているアニメ・ドラマ等が 権利のないユーザーによって不正視聴されると困る。
10
© DMM DMMの動画配信のフロントエンドで行っていることをざっくり - 権利のあるユーザーだけが“うまく”再生できるようにする そこで視聴権利のないユーザーによる再生を防止するために、 権利のあるユーザーだけが動画を復号できる仕組みが必要です。 → Encrypted Media
Extensions (以降EME) 細かいフローは複雑なので省略しますが、 あらかじめ動画を暗号化しておき、適切な権利を持つユーザーに 鍵を付与し、ブラウザで復号させて再生させる、という仕組みです。 11
© DMM DMMの動画配信のフロントエンドについてざっくり DMMの動画配信(フロントエンド)で心掛けていることは - “早く”再生できるようにする - 権利のあるユーザーだけが“うまく”再生できるようにする - どんな通信環境のユーザーでも視聴し
”やすく”する 12
© DMM DMMの動画配信のフロントエンドで行っていることをざっくり - どんな通信環境のユーザーでも視聴し”やすく”する 全てのユーザーが4K動画の視聴を望んでいると思いますか? 13
© DMM DMMの動画配信のフロントエンドで行っていることをざっくり - どんな通信環境のユーザーでも視聴し”やすく”する 全てのユーザーが4K動画の視聴を望んでいると思いますか? → 答えは No。(厳密には、Yesとは限らない。) ユーザーの回線状況はまちまちで、
画質よりも安定視聴を求めるユーザーも多いです。 → そこで「ABR」という仕組みが必要になってきます。 14
© DMM DMMの動画配信のフロントエンドで行っていることをざっくり - どんな通信環境のユーザーでも視聴し”やすく”する 「ABR」(アダプティブビットレート) 画角の異なる複数(たくさん)の動画を、ユーザーの状況に合わせて 動的に切り替える仕組みです。 → これの実現のために、Media
Source Extensions (以降 MSE) の技術を使って再生する必要があります。 それにより、ストリーミング配信の細かい制御が可能になります。 15
© DMM DMMの動画配信のフロントエンドで行っていることをざっくり - どんな通信環境のユーザーでも視聴し”やすく”する MSEの技術を使ってABR再生 あくまで厳密性を排除したという前提で、 「あらかじめ動画を短い尺に分割し、1秒ごとにユーザーの回線状況 を監視して、次にどの画角(4K・HD・SD相当 …
etc)で取得するか 調整している」ようなイメージだと分かりやすいかもしれません。 16
© DMM 今日お話すること 今日は大きく分けて以下の2点をお話します。 - DMMの動画配信のフロントエンドについてざっくり - DMMで新卒4年目のエンジニアとして求められる仕事内容 急に話の毛色が変わりますが、温度差で風邪引かないでください笑 学生の皆さんにとって、4年目というとまだまだ先の未来の話だと思いますが、
頭の片隅に残してもらえると嬉しいです。 17
© DMM DMMで新卒4年目のエンジニアとして求められる仕事内容 個人的に、エンジニアリングに関わらず、仕事の評価って - X軸: 規模、関わった(まとめた)人数 - Y軸: 質、専門性、練度
の掛け算で求まると考えています。 実際に、弊社の評価基準にも - 規模: 個人→チーム→チームを超えた活躍→組織 - 質: 指示通り→自走→専門性の発揮や指示出し、指導、育成 という尺度で含まれています。 18
© DMM DMMで新卒4年目のエンジニアとして求められる仕事内容 個人的に理想的なロードマップはこんな感じだと考えています。 1年目 指示通りの仕事が責任を伴ってできる→軽い指示から自走できる 2, 3年目 チーム目線で必要なタスクを自走する →
チーム目線で専門性を発揮したり、リーダーとして指示を出したり 19
© DMM DMMで新卒4年目のエンジニアとして求められる仕事内容 4年目以降 チームを超えたり、組織目線でのリーダーシップや専門性が求められてくる どういうことか? → (2,3年目に求められていることをクリアしている前提で) 個人の成果に加えて、成果を挙げられるチーム・組織作りが求められる 例えば、自分よりも優秀なメンバーが生まれやすかったり、集まってくるような
環境づくりやそのサポートが求められる 20 って理解してます
© DMM DMMで新卒4年目のエンジニアとして求められる仕事内容 自分よりも優秀なメンバーが生まれやすい環境づくりやそのサポート 平たく言えば育成ですが、あくまで仕組み化しないと長続きしません。 出来ることはたくさんあると思いますが、今回特に例として挙げるのが 登壇等の外部へのアウトプットの場の提供、およびそのサポートです。 今回の合同勉強会を持ちかけ・企画したのも実はその一環だったりします。 これから定期的に開催していきたいですね! それ以外にもThink!
Frontendでは登壇内容・スライドのレビューを行っています。 21
© DMM まとめ - DMMの動画配信のフロントエンドについて 早く視聴できて、権利のある人だけがうまく見れて、どんな回線状況でも 視聴しやすい、を作るために色々な技術を使ってます。 (DRM, EME, MSE,
ABR などなど) - DMMで新卒4年目のエンジニアとして求められる仕事内容 あくまで僕自身の考えと弊社の評価基準の共通部分をお伝えした形です。 ぜひ各々のロードマップの参考になればと思います。 ご清聴ありがとうございました! 22