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
440
動画配信の フロントエンドを支える 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
86
"動画"配信のお話
nisshii0313
0
32
Electronで動画プレイヤー開発
nisshii0313
1
1.3k
Prometheusの話
nisshii0313
0
190
Other Decks in Technology
See All in Technology
実践!カスタムインストラクション&スラッシュコマンド
puku0x
0
350
「何となくテストする」を卒業するためにプロダクトが動く仕組みを理解しよう
kawabeaver
0
380
ハードウェアとソフトウェアをつなぐ全てを内製している企業の E2E テストの作り方 / How to create E2E tests for a company that builds everything connecting hardware and software in-house
bitkey
PRO
1
120
LLMを搭載したプロダクトの品質保証の模索と学び
qa
0
1k
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
8.7k
5分でカオスエンジニアリングを分かった気になろう
pandayumi
0
220
Autonomous Database - Dedicated 技術詳細 / adb-d_technical_detail_jp
oracle4engineer
PRO
4
10k
react-callを使ってダイヤログをいろんなとこで再利用しよう!
shinaps
1
230
20250910_障害注入から効率的復旧へ_カオスエンジニアリング_生成AIで考えるAWS障害対応.pdf
sh_fk2
3
230
Platform開発が先行する Platform Engineeringの違和感
kintotechdev
4
540
JTCにおける内製×スクラム開発への挑戦〜内製化率95%達成の舞台裏/JTC's challenge of in-house development with Scrum
aeonpeople
0
200
現場で効くClaude Code ─ 最新動向と企業導入
takaakikakei
1
220
Featured
See All Featured
The Invisible Side of Design
smashingmag
301
51k
For a Future-Friendly Web
brad_frost
180
9.9k
Embracing the Ebb and Flow
colly
87
4.8k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Navigating Team Friction
lara
189
15k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Agile that works and the tools we love
rasmusluckow
330
21k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
188
55k
Gamification - CAS2011
davidbonilla
81
5.4k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
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