Slide 1
Slide 1 text
cookpadTV開発の裏側 ~ Android編 ~
Cookpad Tech Kitchen 2018/03/29
Slide 2
Slide 2 text
自己紹介
●石本航太
● 新卒1年目
● 入社してから今まで
○Androidエンジニア
○ 2017/06 ~ 2017/12 : StoreTV client side開発
○ 2018/01 ~ : cookpadTV Androidアプリ開発
Slide 3
Slide 3 text
今日話す内容
● cookpadTV Androidアプリどうやって作られているか
○ LIVE配信画面
● HLSを利用した機能開発
○ ただ動画再生するだけじゃなくて、こんなこともできるよ
Slide 4
Slide 4 text
cookpadTVの価値
● ざっくり一言で
○ 先生が料理している所をLIVE配信
● アプリコンセプト
○ 先生とコミュニケーション取りな
がら料理が学べる
Slide 5
Slide 5 text
LIVE配信
Slide 6
Slide 6 text
HLS (HTTP Live Streaming)
● 「Playlist」と呼ばれるtext fileに動画情報を記述
● 「Playlist」には、動画に関するメタ情報を記述できる
Slide 7
Slide 7 text
HLSをAndroidで再生
● google/ExoPlayer
○app側は、基本的にURLをplayerに渡すだけ
Slide 8
Slide 8 text
ExoPlayerの補助
サービス要件に沿ったチューニングはやはり必要
● BehindLiveWindowException対策
● 勝手に高画質の動画取りに行かないでほしい...
● iOSとくらべて、タイムラグを感じる...
Slide 9
Slide 9 text
Playlistの更新方法
1.৽͍͠ηάϝϯτϑΝΠϧ(.ts)͕࡞ΒΕΔ
2.playlistʹ৽͍͠ηάϝϯτϑΝΠϧ͕ࡌΔ
◦ ݹ͍ηάϝϯτϑΝΠϧԡ͠ग़͞ΕΔܗͰফ͑Δ
BEFORE AFTER
Slide 10
Slide 10 text
ExoPlayerはplaylistをtrackしている
● ExoPlayerは最新のplaylistを手元にfetchし続ける
○ playlistの更新ができず、最新のplaylistが先に進んでしまうことが.
LOCAL LATEST
Slide 11
Slide 11 text
Playlistの更新が遅れると...
● 再生したいセグメントが、最新のplaylistから消えちゃった
○ ExoPlayer「何を再生すればいいか分からない。。」
Slide 12
Slide 12 text
BehindLiveWindowException
● LiveWindow = Playlistに含まれる動画の長さ
● Playerの再生位置がLiveWindowから外れる
LiveWindow =10s
● segment = 2s
● 2s x 5 = 10x
Slide 13
Slide 13 text
BehindLiveWindowException対策
ref: ExoPlayer公式Medium
CookpadTVのLiveWindowは10秒...
Slide 14
Slide 14 text
LiveWindowを小さくしている理由
playlistに1分の動画を保持する場合、
最悪1分程度のタイムラグが
先生と視聴者の間に生まれてしまう
「先生とのコミュニケーション」がコアコンセプト
Slide 15
Slide 15 text
BehindLiveWindowException対策
●BehindLiveWindowException
○手元のplaylistを最新のものに修正すれば、
引き続き再生できる
○このエラーの時は、アプリ側で自動復帰を試
みるように実装することに
Slide 16
Slide 16 text
コメント、ハート機能
Slide 17
Slide 17 text
Client sideの実装は簡単
基本的に
「Firebaseで受け取ったイベントをUIに反映するだけ」
常に差分だけが送られてくる設計のおかげ
Slide 18
Slide 18 text
コメント
● コメント投稿の度に、
ここが上書き更新
● ここのupdate eventを
subscribe
● eventの内容をListView
に追加
Slide 19
Slide 19 text
LIVE画面で使われている技術
● LIVE配信
○ HLS x ExoPlayer
○ サービス要件に沿ったチューニング
は必要
● コメント機能
● ハート機能
○ Firebaseを採用
○ 差分が送られてくるので、基本的に
は、イベントをUIに反映するだけで
ok
Slide 20
Slide 20 text
HLSを利用した機能開発
ここまでの話
● playlistには動画の情報しか載せてなかった
これからの話
● サービス独自の要件をPlaylistに載っけたらどう？
○ 何かいろいろできるんじゃないか。
Slide 21
Slide 21 text
お題: アーカイブ機能
LIVE配信を後から見返す機能
● 動画が見れる
● コメントも閲覧できる
○ 動画とコメントを同期して表示
Slide 22
Slide 22 text
お題: 動画とコメントを同期して表示
前提: server側でコメント一覧は保存してある
apiでこの一覧を取得して表示...?
Playlistにコメント情報を載せられないか？
[ { 動画の3.6秒目にAさんが「コメント1」とコメントした }, … ]
Slide 23
Slide 23 text
HLSは字幕をサポート
● 字幕とコメント、要件似てるのでは？
○ 「動画のn秒目に特定のコンテンツを表示したい」
Slide 24
Slide 24 text
ExoPlayerの字幕機能
● ExoPlayerも字幕をサポート
○ 動画に同期して字幕を表示する仕組みが 既に実装されて
いる
どういう実装になってる?
Slide 25
Slide 25 text
字幕情報の入力フォーマット
● WebVTTでok
https://en.wikipedia.org/wiki/WebVTT
字幕の代わりにコメント情報載せられるのでは？
Slide 26
Slide 26 text
字幕のRenderingどうやってるか
1. 再生位置に対応した字幕情報を取得
2. 字幕情報から「テキスト、描画位置」等を取得し
て、画面上に描画
このRendering用クラスを自前で書くことも可能
Slide 27
Slide 27 text
webVTTでコメント情報をplaylistに付与
全体的な方針
1. serverで保持しているコメント情報をwebVTT形式に
2. Playlistに、字幕情報(SUBTITLE)として、上の
webVTTファイルを指定
3. ExoPlayerのTextRenderを自前実装に置き換える
○ 受け取った字幕(コメント)情報をListViewに追記
動画とコメントの同期を
Playerが自然な形で行えるのでは
Slide 28
Slide 28 text
コメント情報 in webVTT
Slide 29
Slide 29 text
CommentRenderer (自作クラス)
Slide 30
Slide 30 text
今のはあくまで一例
要するに、こういうことができそう
1. 動画と連携させたいコンテンツ情報をPlaylistに載せる
○ 「15秒~30秒は、1つ目のレシピの手順２」
2. アプリ側でコンテンツを動画と連動した形で表示
○ 今どの作業をしているのか、画面に表示
いろいろできそう
Slide 31
Slide 31 text
今日話した内容
● CookpadTV Androidアプリどうやって作られているか
○ LIVE配信の実装
○ Comment, Heart機能の実装
● HLSを利用した機能開発
○ Playlistにサービス要件に沿った情報を載せてみる
Slide 32
Slide 32 text
最後に
ただライブ動画を配信するだけじゃなく、
アプリでしか体験できないようなコンテンツ
を作ってみたい！！