1周年を迎えたAbemaTVの動画配信の裏側 / The background of video distribution in AbemaTV during one year

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

Transcript

1. 1周年を迎えたAbemaTVの動画配信の裏側
   TECH PLAY CONFERENCE 2017
   Yusei YAMANAKA
   

   View Slide

2. 自己紹介
   

   View Slide

3. 山中勇成 @toriimiyukki
   株式会社サイバーエージェント 2017年新卒
   株式会社AbemaTV サーバサイドエンジニア
   配信チーム
   こういうカメラを
   持っているほどの
   放送オタクです
   

   View Slide

4. 「中3で初めて生放送サービスを作った」AbemaTVで働く最年少エンジニアとは？
   IUUQTXXXXBOUFEMZDPNDPNQBOJFTBCFNBQPTU@BSUJDMFT
   

   View Slide

5. 本日のアジェンダ
   ・AbemaTVとは
   ・AbemaTVを支える技術
   ・AbemaTVの生放送が視聴できるまで
   ・MPEG-DASH(DRM)対応
   

   View Slide

6. AbemaTVの動画配信を支えるサーバーサイドシステム
   IUUQTXXXTMJEFTIBSFOFUZVJDIJSPOBLB[BXBBCFNBUW
   インターネットにおける動画配信の仕組み
   IUUQTXXXTMJEFTIBSFOFU3ZPTVLF,VCPTT
   

   View Slide

7. AbemaTVとは
   

   View Slide

8. AbemaTVとは
   PC、タブレット、スマホ、テレビデバイスなど様々なデバイスで楽しめます
   24時間365日のリニア型放送を行う、インターネットテレビ局
   ニュースやアニメ、スポーツなど約25チャンネルを視聴できる
   

   View Slide

9. Since 2016/4/11
   

   View Slide

10. 20 million downloads
    

    View Slide

11. 290 thousand
    programs
    

    View Slide

12. 3 billion requests
    per day
    

    View Slide

13. 1.5 Petabytes via Akamai
    65 Terabytes via origin
    Weekend day, transferred
    

    View Slide

14. AbemaTVを支える技術
    

    View Slide

15. AbemaTV(サーバサイド)で使用している主要技術
    GCP + k8s + Golang
    

    View Slide

16. Google Cloud Platform
    Googleが提供するクラウド
    AbemaTVのほとんどのインフラは、GCPを使用している
    →Google検索やYouTubeと同じインフラが使用できる
    

    View Slide

17. AbemaTVでのGCP使用例
    ComputeEngine varnish, redis, mongo, wowza…
    CloudStorage 動画ファイル, セグメント, サムネイル…
    BigQuery
    BigTable
    アクセスログ
    視聴履歴データ
    Pub/Sub アクセスログ, 行動ログ, 通知…
    Network DNS, GLB…
    

    View Slide

18. Kubernetes(k8s)
    Googleのエンジニアによって作られた、コンテナの管理プラット
    フォーム
    GCPでは、Google Container Engine(GKE)として、
    マネージドなKubenetesクラスタが提供されている
    →コンソール上でノード数を指定することで自動的に環境が構築される
    デプロイ、ローリングアップデート、スケーリングのスケジューリングを
    行い、適切にpodの台数やリソースを管理してnodeに配置する
    →複数のDockerのコンテナをpodという単位で管理
    →podが動作するコンテナ環境を提供するマシンをminion(node)と呼ぶ
    

    View Slide

19. 230 nodes
    vCPU 3700 cores / RAM 3300 GB
    840 instances
    vCPU 3000 cores / RAM 13 TB
    w/o GKE nodes
    

    View Slide

20. Microservices
    →API, 管理API, 生放送管理API, メディアサーバ, 投票機能, サムネ生成などなど…
    サービス間の通信が必要な場合は、gRPCを使用している
    AbemaTVでは、マイクロサービスアーキテクチャを取り入れており、
    約40のサービスが稼働している
    4FSWJDF %#
    4FSWJDF#
    4FSWJDF"
    H31$
    

    View Slide

21. Deploykun
    AbemaTVのChatOpsボット
    Slackでサービスのリリースの作成, デプロイ, スケールなどが可能
    

    View Slide

22. Golang
    サーバサイドでは（簡単なスクリプトも含め）Golangを使用している
    ・社内での幾つか運用実績があった
    ・新しいもの好き
    ・シンプルな言語
    

    View Slide

23. Codeship
    サーバサイドのCIは、Codeshipを使用している
    ・以前は、CircleCIだった(CircleCI 2.0が出る前に移行した)
    ・Golangのユニットテストを並列で実行している
    ・Codeshipはコンテナを並列して動かすことができるため、
    　インテグレーションテストの環境が比較的楽に用意できる
    

    View Slide

24. まとめ
    AbemaTVのサーバサイドは、GCP+k8s+Golangの構成
    サービスのデプロイでは、ChatOpsを採用し、基本的にPRから
    デプロイまでを一人のエンジニアが行う
    

    View Slide

25. AbemaTVの生放送が視聴できるまで
    

    View Slide

26. AbemaTVの配信種別
    タイムシフト
    収録 生放送
    リニア
    ビデオ
    

    View Slide

27. 生放送が視聴できるまで
    現場 Encoder Streaming Server CDN Client
    (一般的な構成)
    

    View Slide

28. 生放送が視聴できるまで
    現場 Wirecast Wowza Watchman Store MediaProxy CDN Client
    放送管理画面
    (AbemaTVの場合)
    

    View Slide

29. 現場から
    送出
    現場の映像は、Wirecastを通してエンコードし、GCP上の
    Wowzaへストリーミング
    プロトコルとして、RTMP や RTMP over Zixi が使われる
    RTMP
    SDI
    

    View Slide

30. エンコード&
    パッケージング
    Wowzaでは、ストリーミングされてきた映像(1920x1080)を、
    AbemaTVで使用している各種解像度ごとに再エンコードし、
    HLSへのパッケージングも行う
    生放送管理画面で行った、CMの送信、投票の開始などの
    操作もHLSのプレイリストにメタとして埋め込む
    これを実現するために、独自の拡張モジュールを導入している
    RTMP
    m3u8
    ts(解像度ごと)
    

    View Slide

31. 監視&
    保存
    Watchmanは、プロセスごとに担当番組を決め、
    該当番組のWowzaが出力するHLSのプレイリストを監視し、
    セグメント情報をmongoへ、TSをredisとGCSに書き込む
    開局当初、GCSのみへの書き込みであったが、冗長化のために
    redisを使用した
    m3u8
    ts(解像度ごと)
    Watchman
    

    View Slide

32. 配信&
    広告挿入
    ユーザーが映像を再生するためのプレイリストやTSのエンドポイント
    を持つサービス
    プレイリストへのアクセスに対して、DBを参照して現在のチャンネ
    ルの放送すべきセグメントを計算して、収録や生放送、
    SSAI(Server Side Ad Insertion)の広告のTSパスをまとめたm3u8
    プレイリストを生成する
    TSへのアクセスに対して、redisかGCSを参照して返す
    m3u8
    ts(解像度ごと)
    MediaProxy
    

    View Slide

33. 配信から
    ユーザーまで
    m3u8
    ts
    MediaProxy
    Clientは、MediaProxyのプレイリストを取得して再生する
    TSファイルは、Akamai(CDN)を通して取得する
    

    View Slide

34. 生放送が視聴できるまで
    現場 Wirecast Wowza Watchman Store MediaProxy CDN Client
    放送管理画面
    (AbemaTVの場合)
    

    View Slide

35. 生放送が視聴できるまで
    現場 Wirecast Wowza Watchman Store MediaProxy CDN Client
    放送管理画面
    独自のシステム
    (AbemaNewsの場合)
    

    View Slide

36. 独自のシステムでは、HLSをベースに動画の取得と配信を行って
    いる
    まとめ
    AbemaTVでは、リニア型の配信やSSAIのために、独自のシス
    テムで動画配信を行っている
    CM挿入や投票機能を映像に同期して行うために、パッケージャー
    の時点でHLSにそれらの情報を埋め込んでいる
    

    View Slide

37. MPEG-DASH(DRM)
    対応
    

    View Slide

38. MPEG-DASH(DRM)対応
    DRM技術に対応したコンテンツの配信を行う必要があった
    →DRMはデバイスごとの対応が異なり、DRMによって必要な
    配信形式も異なる
    

    View Slide

39. DRMと配信方式の対応
    .JDSPTPGU
    1MBZ3FBEZ
    "QQMF
    'BJS1MBZ
    (PPHMF
    8JEFWJOF
    )-4
    .1&(%"4)
    ✕ ˓
    ✕ ˓ ˓
    ˓
    AbemaTVではこの2方式を採用
    

    View Slide

40. MPEG-DASH(DRM)対応
    DRM対応するために、MPEG-DASHへの対応が必須になった
    MPEG-DASHは、ISO国際標準規格(ISO/IEC 23001-6)
    で定められているHTTP上で動画をストリームするための規格
    規格ではTS, MP4, ABR, マルチストリーム, 字幕(CC), ライブなど
    多くの機能がある
    しかし、すべてをサポートしているプレイヤーは存在しない…！
    →プロファイルという概念が存在する
    

    View Slide

41. MPEG-DASHのプロファイル
    'VMM1SPpMF
    .1&(
    54
    NBJO
    .1&(54
    TJNQMF
    *40#BTF
    NFEJBpMF
    GPSNBU0O
    %FNBOE
    *40#BTFNFEJBpMFNBJO
    *40#BTF
    NFEJBpMF
    GPSNBU
    -JWF
    *40#.'' .1
    
    *40#.''0O%FNBOE *40#.''-JWF
    

    View Slide

42. MPEG-DASHのマニフェスト
    MPEG-DASHには、MPDと呼ばれるマニフェストファイルとMP4
    を数秒の細かいチャンクに区切ったfMP4(fragmented MP4)
    が必要
    →HLSのリスト型とは異なり、MPEG-DASHはテンプレートを書いているような感覚
    （個人談）
    

    View Slide

43. TSの構造
    UT
    1"5
    1.5
    7JEFP%BUB
    "VEJP%BUB
    7JEFP%BUB
    "VEJP%BUB
    7JEFP%BUB
    "VEJP%BUB
    CZUF۠੾Γ
    ʜ
    

    View Slide

44. MP4とfMP4の構造(だいたい)
    .1
    NFEJBNQ
    NPPW
    NWIE
    USBL
    GUZQ
    NEBU
    7JEFP%BUB
    G.1
    JOJUNT
    NT
    NPPG
    NEBU
    7JEFP%BUB
    NGIE
    USBG
    NPPW
    NWIE
    USBL
    GUZQ
    

    View Slide

45. HLSとMPEG-DASHのファイル取得
    )-4 .1&(%"4)
    NV .BTUFS1MBZMJTU
    .FEJB1MBZMJTU
    NV
    UT 4FHNFOU
    UT 4FHNFOU
    .FEJB1MBZMJTU
    NV
    UT 4FHNFOU
    NQE .BOJGFTU
    .BOJGFTU
    NQE
    NT 4FHNFOU 4FHNFOU
    NT 4FHNFOU 4FHNFOU
    NT 4FHNFOU 4FHNFOU
    *OJUJBM4FHNFOU
    NT
    7JEFP "VEJP
    *OJUJBM4FHNFOU
    

    View Slide

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)
    

    View Slide

47. AbemaTVでfMP4を生成する
    fMP4は、ffmpeg, Bento4, MP4Boxなど様々なツールで作
    成できる
    →SSAIをするために、TSとタイミングを合わせ、時間情報を同期させる必要があるため
    収録されたコンテンツは、予め変換をすることができるが、生放
    送のコンテンツは、リアルタイムで変換する必要がある
    現場 Wirecast Wowza Watchman Store MediaProxy CDN Client
    ここでやるのが一般的 AbemaTVではここで変換
    

    View Slide

48. AbemaTVでfMP4を生成する
    AbamaTVでは、予め区切られたTSファイルをMP4に変換し、
    Initial SegmentとMedia Segmentに分ける
    また、TSの時刻情報をInitial Segmentにも書き込む
    UT NQ JOJUNT
    NFEJBNT
    ࣌ؒ৘ใ
    

    View Slide

49. まとめ
    生放送の番組では、リアルタイムにTSからfMP4へのトランスコー
    ドをして、MPEG-DASHに対応している
    MPEG-DASHのMulti-Periodで広告やコンテンツを区切って
    いる
    

    View Slide

50. PR
    

    View Slide

51. AbemaTV開発局の構成
    QA
    エンジニア
    E2Eテスト, 映像の品質基準など
    Android, iOS, Web, サーバサイド, インフラなど
    ディレクター 開発のディレクションなど
    デザイナー アプリケーションのデザイン, ロゴデザインなど
    

    View Slide

52. AbemaTVエンジニアの構成
    Web
    サーバサイド
    フロント, 管理画面, Chromecastなど
    コア, API, 配信など
    Android Android, Fire TVなど
    iOS iOS, tvOSなど
    インフラ GCP, チューニング, 負荷試験など
    

    View Slide

53. We’re hiring!
    https://recruit.abematv.co.jp
    https://www.wantedly.com/companies/abema
    

    View Slide