Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
cookpad-tech-kitchen-number-15
ishikota
April 23, 2018
Technology
1
5k
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
OpsJAWS Meetup21 システム運用アンチパターンのすすめ
yoshiiryo1
0
1.5k
約6年間運用したシステムをKubernetesに完全移行するまで/Kubernetes Novice Tokyo
isaoshimizu
6
940
GeoLocationAnchor and MKTileOverlay
toyship
0
110
サイボウズの アジャイル・クオリティ / Agile Quality at Cybozu
cybozuinsideout
PRO
4
2.4k
DeepL の用語集が(いつのまにか)日本語に対応してたので試してみた
irokawah0
0
180
220628 「Google AppSheet」タスク管理アプリをライブ作成 吉積情報伊藤さん
comucal
PRO
0
240
機械学習システムアーキテクチャ入門 #1
asei
3
1.2k
Target SDK Versionを上げない Notification runtime permission対応
napplecomputer
0
150
ソフトウェアテスト自動化、一歩前へ
yoshikiito
6
1.1k
リファインメントは楽しいかね?
kitamu_mu
1
580
令和4年資金決済法等改正を踏まえたステーブルコインに関する規制の動向
finengine
0
150
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
3
9.2k
Featured
See All Featured
Java REST API Framework Comparison - PWX 2021
mraible
PRO
11
4.7k
Ruby is Unlike a Banana
tanoku
91
9.2k
Pencils Down: Stop Designing & Start Developing
hursman
112
9.8k
Building Your Own Lightsaber
phodgson
94
4.6k
Designing with Data
zakiwarfel
91
3.9k
How To Stay Up To Date on Web Technology
chriscoyier
780
250k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
119
28k
Learning to Love Humans: Emotional Interface Design
aarron
261
37k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
349
27k
Docker and Python
trallard
27
1.6k
Large-scale JavaScript Application Architecture
addyosmani
499
110k
Building Adaptive Systems
keathley
25
1.1k
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にサービス要件に沿った情報を載せてみる
最後に ただライブ動画を配信するだけじゃなく、 アプリでしか体験できないようなコンテンツ を作ってみたい!!