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
Observability в PHP без боли. Олег Мифле, тимлид Altenar
lamodatech
0
330
データプラットフォーム技術におけるメダリオンアーキテクチャという考え方/DataPlatformWithMedallionArchitecture
smdmts
5
620
Claude Code Actionを使ったコード品質改善の取り組み
potix2
PRO
6
2.1k
米国国防総省のDevSecOpsライフサイクルをAWSのセキュリティサービスとOSSで実現
syoshie
2
1k
PHP開発者のためのSOLID原則再入門 #phpcon / PHP Conference Japan 2025
shogogg
4
660
AWS CDK 実践的アプローチ N選 / aws-cdk-practical-approaches
gotok365
6
690
実践! AIエージェント導入記
1mono2prod
0
160
SalesforceArchitectGroupOsaka#20_CNX'25_Report
atomica7sei
0
140
rubygem開発で鍛える設計力
joker1007
2
190
[TechNight #90-1] 本当に使える?ZDMの新機能を実践検証してみた
oracle4engineer
PRO
3
170
Node-REDのFunctionノードでMCPサーバーの実装を試してみた / Node-RED × MCP 勉強会 vol.1
you
PRO
0
110
GitHub Copilot の概要
tomokusaba
1
130
Featured
See All Featured
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Fireside Chat
paigeccino
37
3.5k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.8k
The Straight Up "How To Draw Better" Workshop
denniskardys
233
140k
Being A Developer After 40
akosma
90
590k
Facilitating Awesome Meetings
lara
54
6.4k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
Raft: Consensus for Rubyists
vanstee
140
7k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Faster Mobile Websites
deanohume
307
31k
Music & Morning Musume
bryan
46
6.6k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
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にサービス要件に沿った情報を載せてみる
最後に ただライブ動画を配信するだけじゃなく、 アプリでしか体験できないようなコンテンツ を作ってみたい!!