ママリで動画配信するまでに検討したこと / video-distribution-on-mamari

KGDC Tech Conference のLT資料です。
https://kgdc.connpass.com/event/203487

資料最後に出てくるブログのリンクはこちらです。
https://tech.connehito.com/entry/2020/05/12/143906

Transcript

1. ママリで動画配信するまでに検討したこと
   2021/03/17 KGDC Tech Conference
   もりや ひろゆき
   

   View Slide

2. ママ向けNo.1アプリ、情報メディア「ママリ」
   ユーザー同士で悩みを相談しあうQ&A機能
   生活に役立つ記事を毎日配信。
   人気順の質問検索や回答リクエスト、プレミアム限定記事など、ママリをより便利に使
   える機能を提供。
   ※妊娠中〜2歳0ヶ⼒の⼒供を持つ⼒性1,084⼒を対象とした調査より「現在使っているアプリ(妊娠・⼒育て系) をすべて教えてください」で第1位（2019年3⼒実施、調査協⼒：インテージ）。
   Q&Aコミュニティ
   メディア
   ママリプレミアム
   

   View Slide

3. View Slide

4. 今日はママリに動画を配信するまでに、
   検討したことなどを簡単にお話します。
   

   View Slide

5. 自己紹介
   ● もりやひろゆき
   ● 2019/09 コネヒト入社
   ● Webエンジニア（フロントエンドがメイン）
   ○ 個人的によくAWSを触っています
   ● ママリ動画の配信側を設計、実装しました
   ○ アプリは触っていない
   

   View Slide

6. 動画を配信するにあたって検討したこと
   1. どういう形式で動画を配信するか
   2. どうやって配信するか
   3. どうやって動画を変換するか
   

   View Slide

7. 動画を配信するにあたって検討したこと
   1. どういう形式で動画を配信するか
   2. どうやって配信するか
   3. どうやって動画を変換するか
   

   View Slide

8. ストリーミングの主な形式
   1. MPEG-DASH
   ○ 国際標準規格(ISO/IEC 23001-6)
   ○ DRMなどの複雑な要件にも対応できる
   2. HLS (HTTP Live Streaming)
   ○ Appleが提唱している規格
   ○ シンプル
   

   View Slide

9. ストリーミングの主な形式
   1. MPEG-DASH
   ○ 国際標準規格(ISO/IEC 23001-6)
   ○ DRMなどの複雑な要件にも対応できる
   2. HLS (HTTP Live Streaming)
   ○ Appleが提唱している規格
   ○ シンプル
   HLSに決定！
   

   View Slide

10. 動画を配信するにあたって検討したこと
    1. どういう形式で動画を配信するか
    2. どうやって配信するか
    3. どうやって動画を変換するか
    

    View Slide

11. HLSの仕組み
    以下の２種類のファイルで構成されている
    1. 配信情報ファイル（.m3u8）
    2. 動画ファイル（.ts）
    ○ 約10秒ごとに分割（分割単位は設定で変更可）
    #EXTM3U
    #EXT-X-VERSION:3
    #EXT-X-TARGETDURATION:13
    #EXT-X-MEDIA-SEQUENCE:1
    #EXT-X-PLAYLIST-TYPE:VOD
    #EXTINF:12,
    hls_1_00001.ts
    #EXTINF:12,
    hls_1_00002.ts
    #EXTINF:12
    ...
    #EXTM3U
    #EXT-X-VERSION:3
    #EXT-X-INDEPENDENT-SEGMENTS
    #EXT-X-STREAM-INF:BANDWIDTH=1000000,AVERAGE-BA
    NDWIDTH=100000,CODECS="avc1.4d4020,mp4a.40.2",
    RESOLUTION=800x600,FRAME-RATE=29.970
    hls_1.m3u8
    

    View Slide

12. CloudFront + S3 で配信
    ● HTTPサーバーで静的ファイルを配信できればOK
    ● ママリはAWSを使っているので、スタンダードな CloudFront + S3
    の構成で配信することに決定
    

    View Slide

13. 動画を配信するにあたって検討したこと
    1. どういう形式で動画を配信するか
    2. どうやって配信するか
    3. どうやって動画を変換するか
    

    View Slide

14. HLSへの変換
    ● MP4やMOVからHLSへ変換が必要
    ● 常時使うわけでもないのにサーバー立てるのは微妙・・・
    

    View Slide

15. AWSで何か使えるサービス無いかな・・・
    

    View Slide

16. ありました！
    ● MediaConvert というサービスで動画変換ができます！
    ○ https://aws.amazon.com/jp/mediaconvert/
    ● Elastic Transcoder というサービスもあるようですが、MediaConvert の方を勧めている
    ようです。
    ○ https://aws.amazon.com/jp/elastictranscoder/
    

    View Slide

17. MediaConvertでやっていること
    ● 動画の変換（MP4,MOV → HLS）
    ● サムネイル画像の作成
    ○ ママリでは１秒毎に１枚のキャプチャ(JPEG)を作成して、その中
    からサムネイルに使う画像を選んでいます
    

    View Slide

18. MediaConvertの料金（ママリの場合）
    ● ※変換内容によって金額は大きく変わります
    ● ママリの例：60分の動画を変換した場合
    ○ 0.034USD * 60分 * 107円 = 約218円（$1 = 107円計算）
    ○ １分間の変換料金は 0.034USD。
    ■ MediaConvert の算定方法だと 4K に該当するサイズ
    ■ フレームレートは <30fps
    ● 料金は変換した時間で課金されます。
    ● サーバーを立てて維持管理するコストを考えるとめちゃくちゃ安
    い！
    

    View Slide

19. まとめ
    ● ストリーミングはMPEG-DASHとHLSの２つが主流らしい
    ● ストリーミングは静的ファイルを配信できるHTTPサーバーがあれば
    可能
    ● MediaConvertを使うとサーバー立てずに簡単に動画を変換できる
    

    View Slide

20. [PR] 詳細は「コネヒト TECH BLOG」へ
    https://tech.connehito.com/entry/2020/05/12/143906
    

    View Slide

21. ご静聴ありがとうございました！
    

    View Slide