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」 2. アプリ側でコンテンツを動画と連動した形で表示 ○ 今どの作業をしているのか、画面に表示 いろいろできそう

Slide 31

Slide 31 text

今日話した内容 ● CookpadTV Androidアプリどうやって作られているか ○ LIVE配信の実装 ○ Comment, Heart機能の実装 ● HLSを利用した機能開発 ○ Playlistにサービス要件に沿った情報を載せてみる

Slide 32

Slide 32 text

最後に ただライブ動画を配信するだけじゃなく、 アプリでしか体験できないようなコンテンツ を作ってみたい!!