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
cookpad-tech-kitchen-number-15
Search
ishikota
April 23, 2018
Technology
1
5.4k
cookpad-tech-kitchen-number-15
https://cookpad.connpass.com/event/81142/
ishikota
April 23, 2018
Tweet
Share
Other Decks in Technology
See All in Technology
Janus
bkuhlmann
1
490
家族アルバム みてねにおけるGrafana活用術 / Grafana Meetup Japan Vol.1 LT
isaoshimizu
1
770
アクセス制御にまつわる改善 / Improving access control
itkq
0
550
私が trocco を推す理由
__allllllllez__
1
250
LLM開発・活用の舞台裏@2024.04.25
yushin_n
1
360
よく聞くけど使ったことないソフトウェアNo.1 KafkaとSnowflake
foursue
4
360
EMとして2023年度に頑張ったこと / What we did well in FY2023 as a EM
pauli
1
170
Azure犬駆動開発の記録/GlobalAzureFukuoka2024_20240420
nina01
1
220
Gitlab本から学んだこと - そーだいなるプレイバック / gitlab-book
soudai
4
440
生産性向上チームの紹介
cybozuinsideout
PRO
1
870
LangSmith入門―トレース/評価/プロンプト管理などを担うLLMアプリ開発プラットフォーム
os1ma
3
340
Cypress or Playwright?
rainerhahnekamp
0
110
Featured
See All Featured
Into the Great Unknown - MozCon
thekraken
10
990
Building Effective Engineering Teams - LeadDev
addyosmani
28
1.8k
Product Roadmaps are Hard
iamctodd
44
9.7k
Become a Pro
speakerdeck
PRO
11
4.5k
Large-scale JavaScript Application Architecture
addyosmani
504
110k
What’s in a name? Adding method to the madness
productmarketing
PRO
16
2.6k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
274
13k
Unsuck your backbone
ammeep
663
57k
Scaling GitHub
holman
457
140k
Docker and Python
trallard
34
2.7k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
Design by the Numbers
sachag
274
18k
Transcript
cookpadTV開発の裏側 ~ Android編 ~ Cookpad Tech Kitchen 2018/03/29
自己紹介 •石本航太 • 新卒1年目 • 入社してから今まで ◦Androidエンジニア ◦ 2017/06 ~
2017/12 : StoreTV client side開発 ◦ 2018/01 ~ : cookpadTV Androidアプリ開発
今日話す内容 • cookpadTV Androidアプリどうやって作られているか ◦ LIVE配信画面 • HLSを利用した機能開発 ◦ ただ動画再生するだけじゃなくて、こんなこともできるよ
cookpadTVの価値 • ざっくり一言で ◦ 先生が料理している所をLIVE配信 • アプリコンセプト ◦ 先生とコミュニケーション取りな がら料理が学べる
LIVE配信
HLS (HTTP Live Streaming) • 「Playlist」と呼ばれるtext fileに動画情報を記述 • 「Playlist」には、動画に関するメタ情報を記述できる
HLSをAndroidで再生 • google/ExoPlayer ◦app側は、基本的にURLをplayerに渡すだけ
ExoPlayerの補助 サービス要件に沿ったチューニングはやはり必要 • BehindLiveWindowException対策 • 勝手に高画質の動画取りに行かないでほしい... • iOSとくらべて、タイムラグを感じる...
Playlistの更新方法 1.৽͍͠ηάϝϯτϑΝΠϧ(.ts)͕࡞ΒΕΔ 2.playlistʹ৽͍͠ηάϝϯτϑΝΠϧ͕ࡌΔ ◦ ݹ͍ηάϝϯτϑΝΠϧԡ͠ग़͞ΕΔܗͰফ͑Δ BEFORE AFTER
ExoPlayerはplaylistをtrackしている • ExoPlayerは最新のplaylistを手元にfetchし続ける ◦ playlistの更新ができず、最新のplaylistが先に進んでしまうことが. LOCAL LATEST
Playlistの更新が遅れると... • 再生したいセグメントが、最新のplaylistから消えちゃった ◦ ExoPlayer「何を再生すればいいか分からない。。」
BehindLiveWindowException • LiveWindow = Playlistに含まれる動画の長さ • Playerの再生位置がLiveWindowから外れる LiveWindow =10s •
segment = 2s • 2s x 5 = 10x
BehindLiveWindowException対策 ref: ExoPlayer公式Medium CookpadTVのLiveWindowは10秒...
LiveWindowを小さくしている理由 playlistに1分の動画を保持する場合、 最悪1分程度のタイムラグが 先生と視聴者の間に生まれてしまう 「先生とのコミュニケーション」がコアコンセプト
BehindLiveWindowException対策 •BehindLiveWindowException ◦手元のplaylistを最新のものに修正すれば、 引き続き再生できる ◦このエラーの時は、アプリ側で自動復帰を試 みるように実装することに
コメント、ハート機能
Client sideの実装は簡単 基本的に 「Firebaseで受け取ったイベントをUIに反映するだけ」 常に差分だけが送られてくる設計のおかげ
コメント • コメント投稿の度に、 ここが上書き更新 • ここのupdate eventを subscribe • eventの内容をListView
に追加
LIVE画面で使われている技術 • LIVE配信 ◦ HLS x ExoPlayer ◦ サービス要件に沿ったチューニング は必要
• コメント機能 • ハート機能 ◦ Firebaseを採用 ◦ 差分が送られてくるので、基本的に は、イベントをUIに反映するだけで ok
HLSを利用した機能開発 ここまでの話 • playlistには動画の情報しか載せてなかった これからの話 • サービス独自の要件をPlaylistに載っけたらどう? ◦ 何かいろいろできるんじゃないか。
お題: アーカイブ機能 LIVE配信を後から見返す機能 • 動画が見れる • コメントも閲覧できる ◦ 動画とコメントを同期して表示
お題: 動画とコメントを同期して表示 前提: server側でコメント一覧は保存してある apiでこの一覧を取得して表示...? Playlistにコメント情報を載せられないか? [ { 動画の3.6秒目にAさんが「コメント1」とコメントした },
… ]
HLSは字幕をサポート • 字幕とコメント、要件似てるのでは? ◦ 「動画のn秒目に特定のコンテンツを表示したい」
ExoPlayerの字幕機能 • ExoPlayerも字幕をサポート ◦ 動画に同期して字幕を表示する仕組みが 既に実装されて いる どういう実装になってる?
字幕情報の入力フォーマット • WebVTTでok https://en.wikipedia.org/wiki/WebVTT 字幕の代わりにコメント情報載せられるのでは?
字幕のRenderingどうやってるか 1. 再生位置に対応した字幕情報を取得 2. 字幕情報から「テキスト、描画位置」等を取得し て、画面上に描画 このRendering用クラスを自前で書くことも可能
webVTTでコメント情報をplaylistに付与 全体的な方針 1. serverで保持しているコメント情報をwebVTT形式に 2. Playlistに、字幕情報(SUBTITLE)として、上の webVTTファイルを指定 3. ExoPlayerのTextRenderを自前実装に置き換える ◦
受け取った字幕(コメント)情報をListViewに追記 動画とコメントの同期を Playerが自然な形で行えるのでは
コメント情報 in webVTT
CommentRenderer (自作クラス)
今のはあくまで一例 要するに、こういうことができそう 1. 動画と連携させたいコンテンツ情報をPlaylistに載せる ◦ 「15秒~30秒は、1つ目のレシピの手順2」 2. アプリ側でコンテンツを動画と連動した形で表示 ◦ 今どの作業をしているのか、画面に表示
いろいろできそう
今日話した内容 • CookpadTV Androidアプリどうやって作られているか ◦ LIVE配信の実装 ◦ Comment, Heart機能の実装 •
HLSを利用した機能開発 ◦ Playlistにサービス要件に沿った情報を載せてみる
最後に ただライブ動画を配信するだけじゃなく、 アプリでしか体験できないようなコンテンツ を作ってみたい!!