2017/8/24 TECH PLAY CONFERENCE 2017
https://techplay.jp/contents/techplayconf2017
・AbemaTVとは
・AbemaTVを支える技術
・AbemaTVの生放送が視聴できるまで
・MPEG-DASH(DRM)対応
1. 1周年を迎えたAbemaTVの動画配信の裏側 TECH PLAY CONFERENCE 2017 Yusei YAMANAKA
2. 自己紹介
3. 山中勇成 @toriimiyukki 株式会社サイバーエージェント 2017年新卒 株式会社AbemaTV サーバサイドエンジニア 配信チーム こういうカメラを 持っているほどの 放送オタクです
4. 「中3で初めて生放送サービスを作った」AbemaTVで働く最年少エンジニアとは？ https://www.wantedly.com/companies/abema/post_articles/64961
5. 本日のアジェンダ ・AbemaTVとは ・AbemaTVを支える技術 ・AbemaTVの生放送が視聴できるまで ・MPEG-DASH(DRM)対応
6. AbemaTVの動画配信を支えるサーバーサイドシステム https://www.slideshare.net/yuichironakazawa2/abematv インターネットにおける動画配信の仕組み https://www.slideshare.net/RyosukeKubo/ss-67208093
7. AbemaTVとは
8. AbemaTVとは PC、タブレット、スマホ、テレビデバイスなど様々なデバイスで楽しめます 24時間365日のリニア型放送を行う、インターネットテレビ局 ニュースやアニメ、スポーツなど約25チャンネルを視聴できる
9. Since 2016/4/11
10. 20 million downloads
11. 290 thousand programs
12. 3 billion requests per day
13. 1.5 Petabytes via Akamai 65 Terabytes via origin Weekend day, transferred
14. AbemaTVを支える技術
15. AbemaTV(サーバサイド)で使用している主要技術 GCP + k8s + Golang
16. Google Cloud Platform Googleが提供するクラウド AbemaTVのほとんどのインフラは、GCPを使用している →Google検索やYouTubeと同じインフラが使用できる
17. AbemaTVでのGCP使用例 ComputeEngine varnish, redis, mongo, wowza… CloudStorage 動画ファイル, セグメント, サムネイル… BigQuery BigTable アクセスログ 視聴履歴データ Pub/Sub アクセスログ, 行動ログ, 通知… Network DNS, GLB…
18. Kubernetes(k8s) Googleのエンジニアによって作られた、コンテナの管理プラット フォーム GCPでは、Google Container Engine(GKE)として、 マネージドなKubenetesクラスタが提供されている →コンソール上でノード数を指定することで自動的に環境が構築される デプロイ、ローリングアップデート、スケーリングのスケジューリングを 行い、適切にpodの台数やリソースを管理してnodeに配置する →複数のDockerのコンテナをpodという単位で管理 →podが動作するコンテナ環境を提供するマシンをminion(node)と呼ぶ
19. 230 nodes vCPU 3700cores / RAM 3300GB 840 instances vCPU 3000cores / RAM 13TB w/o GKE nodes
20. Microservices →API, 管理API, 生放送管理API, メディアサーバ, 投票機能, サムネ生成などなど… サービス間の通信が必要な場合は、gRPCを使用している AbemaTVでは、マイクロサービスアーキテクチャを取り入れており、 約40のサービスが稼働している Service DB Service B Service A gRPC
21. Deploykun AbemaTVのChatOpsボット Slackでサービスのリリースの作成, デプロイ, スケールなどが可能
22. Golang サーバサイドでは（簡単なスクリプトも含め）Golangを使用している ・社内での幾つか運用実績があった ・新しいもの好き ・シンプルな言語
23. Codeship サーバサイドのCIは、Codeshipを使用している ・以前は、CircleCIだった(CircleCI 2.0が出る前に移行した) ・Golangのユニットテストを並列で実行している ・Codeshipはコンテナを並列して動かすことができるため、 インテグレーションテストの環境が比較的楽に用意できる
24. まとめ AbemaTVのサーバサイドは、GCP+k8s+Golangの構成 サービスのデプロイでは、ChatOpsを採用し、基本的にPRから デプロイまでを一人のエンジニアが行う
25. AbemaTVの生放送が視聴できるまで
26. AbemaTVの配信種別 タイムシフト 収録 生放送 リニア ビデオ
27. 生放送が視聴できるまで 現場 Encoder Streaming Server CDN Client (一般的な構成)
28. 生放送が視聴できるまで 現場 Wirecast Wowza Watchman Store MediaProxy CDN Client 放送管理画面 (AbemaTVの場合)
29. 現場から送出 現場の映像は、Wirecastを通してエンコードし、GCP上の Wowzaへストリーミング プロトコルとして、RTMP や RTMP over Zixi が使われる RTMPSDI
30. エンコード&パッケージング Wowzaでは、ストリーミングされてきた映像(1920x1080)を、 AbemaTVで使用している各種解像度ごとに再エンコードし、 HLSへのパッケージングも行う 生放送管理画面で行った、CMの送信、投票の開始などの 操作もHLSのプレイリストにメタとして埋め込む これを実現するために、独自の拡張モジュールを導入している RTMP m3u8 ts(解像度ごと)
31. 監視&保存 Watchmanは、プロセスごとに担当番組を決め、 該当番組のWowzaが出力するHLSのプレイリストを監視し、 セグメント情報をmongoへ、TSをredisとGCSに書き込む 開局当初、GCSのみへの書き込みであったが、冗長化のために redisを使用した m3u8 ts(解像度ごと) Watchman
32. 配信&広告挿入 ユーザーが映像を再生するためのプレイリストやTSのエンドポイント を持つサービス プレイリストへのアクセスに対して、DBを参照して現在のチャンネ ルの放送すべきセグメントを計算して、収録や生放送、 SSAI(Server Side Ad Insertion)の広告のTSパスをまとめたm3u8 プレイリストを生成する TSへのアクセスに対して、redisかGCSを参照して返す m3u8 ts(解像度ごと) MediaProxy
33. 配信からユーザーまで m3u8 ts MediaProxy Clientは、MediaProxyのプレイリストを取得して再生する TSファイルは、Akamai(CDN)を通して取得する
34. 生放送が視聴できるまで 現場 Wirecast Wowza Watchman Store MediaProxy CDN Client 放送管理画面 (AbemaTVの場合)
35. 生放送が視聴できるまで 現場 Wirecast Wowza Watchman Store MediaProxy CDN Client 放送管理画面 独自のシステム (AbemaNewsの場合)
36. 独自のシステムでは、HLSをベースに動画の取得と配信を行って いる まとめ AbemaTVでは、リニア型の配信やSSAIのために、独自のシス テムで動画配信を行っている CM挿入や投票機能を映像に同期して行うために、パッケージャー の時点でHLSにそれらの情報を埋め込んでいる
37. MPEG-DASH(DRM)対応
38. MPEG-DASH(DRM)対応 DRM技術に対応したコンテンツの配信を行う必要があった →DRMはデバイスごとの対応が異なり、DRMによって必要な 配信形式も異なる
39. DRMと配信方式の対応 Microsoft PlayReady Apple FairPlay Google Widevine HLS MPEG-DASH ✕ ○ ✕ ○ ○ ○ AbemaTVではこの2方式を採用
40. MPEG-DASH(DRM)対応 DRM対応するために、MPEG-DASHへの対応が必須になった MPEG-DASHは、ISO国際標準規格(ISO/IEC 23001-6) で定められているHTTP上で動画をストリームするための規格 規格ではTS, MP4, ABR, マルチストリーム, 字幕(CC), ライブなど 多くの機能がある しかし、すべてをサポートしているプレイヤーは存在しない…！ →プロファイルという概念が存在する
41. MPEG-DASHのプロファイル Full Profile MPEG-2 TS main MPEG-2 TS simple ISO Base media file format On Demand ISO Base media file main ISO Base media file format Live ISO BMFF(MP4) ISO BMFF On Demand ISO BMFF Live
42. MPEG-DASHのマニフェスト MPEG-DASHには、MPDと呼ばれるマニフェストファイルとMP4 を数秒の細かいチャンクに区切ったfMP4(fragmented MP4) が必要 →HLSのリスト型とは異なり、MPEG-DASHはテンプレートを書いているような感覚 （個人談）
43. TSの構造 1.ts PAT PMT Video Data #1 Audio Data #1 Video Data #2 Audio Data #2 Video Data #3 Audio Data #3 188byte区切り …
44. MP4とfMP4の構造(だいたい) MP4 media.mp4 moov mvhd trak ftyp mdat Video Data fMP4 init.m4s 1.m4s moof mdat Video Data mfhd traf moov mvhd trak ftyp
45. HLSとMPEG-DASHのファイル取得 HLS MPEG-DASH m3u8 Master Playlist Media Playlistm3u8 ts Segment #1 ts Segment #2 Media Playlistm3u8 ts Segment #3 mpd Manifest Manifestmpd m4s Segment #1 Segment #1 m4s Segment #2 Segment #2 m4s Segment #3 Segment #3 Initial Segmentm4s Video Audio Initial Segment
46. MPEG-DASHのマニフェスト構造 プロファイル指定 メディアパスのテンプレート タイムライン ビットレート、解像度別の定義 映像、音声、字幕の定義（言語別の音声など） コンテンツごとの単位（時間で分割、広告など） リクエストの一例 1. mp4ce/BSnr3JKqCoqq3H/P4AMzXhX8xh/360p.1/74011529.m4s 2. mp4ce/BSnr3JKqCoqq3H/P4AMzXhX8xh/720p.1/74011529.m4s 3. mp4ce/BSnr3JKqCoqq3H/P4AMzXhX8xh/720p.1/74332041.m4s (74011529+320512)
47. AbemaTVでfMP4を生成する fMP4は、ffmpeg, Bento4, MP4Boxなど様々なツールで作 成できる →SSAIをするために、TSとタイミングを合わせ、時間情報を同期させる必要があるため 収録されたコンテンツは、予め変換をすることができるが、生放 送のコンテンツは、リアルタイムで変換する必要がある 現場 Wirecast Wowza Watchman Store MediaProxy CDN Client ここでやるのが一般的 AbemaTVではここで変換
48. AbemaTVでfMP4を生成する AbamaTVでは、予め区切られたTSファイルをMP4に変換し、 Initial SegmentとMedia Segmentに分ける また、TSの時刻情報をInitial Segmentにも書き込む ts mp4 init.m4s media.m4s時間情報
49. まとめ 生放送の番組では、リアルタイムにTSからfMP4へのトランスコー ドをして、MPEG-DASHに対応している MPEG-DASHのMulti-Periodで広告やコンテンツを区切って いる
50. PR
51. AbemaTV開発局の構成 QA エンジニア E2Eテスト, 映像の品質基準など Android, iOS, Web, サーバサイド, インフラなど ディレクター 開発のディレクションなど デザイナー アプリケーションのデザイン, ロゴデザインなど
52. AbemaTVエンジニアの構成 Web サーバサイド フロント, 管理画面, Chromecastなど コア, API, 配信など Android Android, Fire TVなど iOS iOS, tvOSなど インフラ GCP, チューニング, 負荷試験など
53. We’re hiring! https://recruit.abematv.co.jp https://www.wantedly.com/companies/abema
miyukki
qt_luigi
bgpat
yuj1osm
taichinakamura
.png){kind=icon}
pharma_x_tech
ysknsid25
naoki_0531
yabakokobayashi
orimanabu
shingo_kawahara
scarletplover
eileencodes
iamctodd
bermonpainter
mraible
carmenintech
akosma
aarron
productmarketing
lara
cromwellryan
mongodb
