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.7k
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
JAZUG 15周年記念 × JAT「AI Agent開発者必見:"今"のOracle技術で拡張するAzure × OCIの共存アーキテクチャ」
shisyu_gaku
1
160
AWSでAgentic AIを開発するための前提知識の整理
nasuvitz
2
160
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
12
80k
E2Eテスト設計_自動化のリアル___Playwrightでの実践とMCPの試み__AIによるテスト観点作成_.pdf
findy_eventslides
2
630
今この時代に技術とどう向き合うべきか
gree_tech
PRO
2
1.8k
なぜAWSを活かしきれないのか?技術と組織への処方箋
nrinetcom
PRO
5
920
RDS の負荷が高い場合に AWS で取りうる具体策 N 連発/a-series-of-specific-countermeasures-available-on-aws-when-rds-is-under-high-load
emiki
1
860
ユーザーの声とAI検証で進める、プロダクトディスカバリー
sansantech
PRO
1
140
AWS IoT 超入門 2025
hattori
0
340
綺麗なデータマートをつくろう_データ整備を前向きに考える会 / Let's create clean data mart
brainpadpr
3
520
データ戦略部門 紹介資料
sansan33
PRO
1
3.7k
能登半島地震で見えた災害対応の課題と組織変革の重要性
ditccsugii
0
970
Featured
See All Featured
Building a Modern Day E-commerce SEO Strategy
aleyda
44
7.8k
How to Ace a Technical Interview
jacobian
280
24k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Unsuck your backbone
ammeep
671
58k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
GraphQLとの向き合い方2022年版
quramy
49
14k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
35
6.1k
Statistics for Hackers
jakevdp
799
220k
Designing Experiences People Love
moore
142
24k
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にサービス要件に沿った情報を載せてみる
最後に ただライブ動画を配信するだけじゃなく、 アプリでしか体験できないようなコンテンツ を作ってみたい!!