配信した動画が視聴者に 届くまでの技術を知ろう！

Transcript

1. 配信した動画が視聴者に 届くまでの技術を知ろう！ 配信プロトコル HLS
2. 2 この資料の内容について 配信プロトコル HLS での動画配信の概論 MPEG-DASH も主流で、配信の仕組み上の共通点も多いです 細かい仕様‧プロトコルについては触れてません • 解像度‧フレームレートなどの⽤語 • 映像‧⾳声エンコード‧パッケージング • HLSのタグの細かな仕様 etc…
3. 3 ⾃宅のスマートTV‧パソコン • ⼤抵は⾼速なネットワークが使える ◦ 光回線のダウンロード速度 理論値 1 Gbps など • ⾼解像度‧⾼画質の映像が求められる ◦ 画⾯がデカいのでノイズも⽬⽴ちやすい 動画の視聴環境
4. 4 外出先でのスマホ • モバイル回線‧フリーWi-Fi ：⽐較的遅い‧不安定 ◦ 料⾦の都合で「たくさん使えない」ケースも • スマホでは⾼解像度が表現しきれない • 画⾯が⼩さいので多少のノイズは認知されにくい （画質が多少悪くても問題ない） 動画の視聴環境
5. 5 動画の視聴環境 ⾊んなケースはあるが... • ネットワーク帯域は潤沢なので ⾼画質‧⾼解像度な動画を再⽣したい • 限られたネットワーク帯域で動画を再⽣したい 画質‧解像度とビットレートのバランスを 切り替えられる仕組みが必要
6. 6 動画の視聴環境：通信環境の不確実性 今のネットワークの速度は、使ってみるまでわからない 理論値 1 Gbps でも 100 Mbps しか出ないケースはザラにある • デバイス 〜 ルーター‧基地局の間にある遮蔽物 • 夜間でネット全体が混雑している • 同じ基地局にアクセスが集中している • 通信経路上に故障した機器があって迂回しているetc... 再⽣してみたら回線が遅かった、という事もあるので 再⽣中に切り替えられるようにしたい
7. 7 YouTube にアップロードされる30分の動画で計算すると... - 映像 60 fps, ⾳声 ステレオ 48 kHz, アスペクト⽐ 16:9 [参考] YouTube にアップロードする動画におすすめのエンコード設定 https://support.google.com/youtube/answer/1722171?hl=ja 「.mp4 ファイルそのまま」のサイズ
8. 8 YouTube にアップロードされる30分の動画で計算すると... - 映像 60 fps, ⾳声 ステレオ 48 kHz, アスペクト⽐ 16:9 • 1080p（フルHD） ：約 2.8 GB • 2160p（4K） ：約 12 ~ 15 GB 全部ダウンロードするのは時間がかかる （1GbpsとしてもフルHD 23秒ぐらい） 「.mp4 ファイルそのまま」のサイズ
9. 9 .mp4 ファイルをそのまま使う際の問題点 • 再⽣中に画質調整ができない • デカい動画ファイルのダウンロード待ち（※） • 動画の⼀部分だけ再⽣したいのに全部ダウンロードするのは無駄 （途中まで⾒て離脱する、前回の続きから⾒る etc...） これ以外にも... • 著作権保護が不⼗分（不正コピー‧再配布対策） • コーデックの互換性（特定のOSで再⽣できない可能性あり） （※）これだけならプログレッシブダウンロード対応の.mp4ファイルで解決できなくもない
10. 配信プロトコル HLS 形式の ファイル構成
11. 11 HLSの構成（MPEG-TSの場合） .m3u8 ファイル 少々 + .ts ファイル たくさん ※ TypeScript ではありません
12. 12 HLSの構成（MPEG-TSの場合） セグメント（ .ts） - 2 ~ 10 秒ぐらいに 分割された動画 プレイリスト（ .m3u8） - セグメントの一覧などが テキストで書かれている #EXTM3U #EXT-X-VERSION:3 #EXT-X-TARGETDURATION:5 #EXT-X-MEDIA-SEQUENCE:1 #EXTINF:4.004, https://www.example.com/segment_000.ts #EXTINF:4.004, https://www.example.com/segment_001.ts #EXTINF:4.004, https://www.example.com/segment_002.ts #EXTINF:4.004, https://www.example.com/segment_003.ts
13. 13 HLSの構成：再生プレイヤーの動作 1. プレイリストを取得 2. セグメントを順次取得 3. セグメントがN秒分以上取得できたら、順番に再⽣する 再⽣しながらセグメントを順次取得 ... #EXTINF:4.004, https://www.example.com/000.ts #EXTINF:4.004, https://www.example.com/001.ts ... 000.ts 001.ts 002.ts 003.ts
14. 14 HLSの構成：再生プレイヤーの動作 1. プレイリストを取得 2. セグメントを順次取得 3. セグメントがN秒分以上取得できたら、順番に再⽣する 再⽣しながらセグメントを順次取得 ... #EXTINF:4.004, https://www.example.com/000.ts #EXTINF:4.004, https://www.example.com/001.ts ... 000.ts 001.ts 002.ts 003.ts 動画全体を取得しなくても再生できるので 待ち時間が数秒になる
15. 15 HLSの構成：再生プレイヤーの動作 • 再⽣開始までの待ち時間短縮 • 再⽣するセグメントだけ取得すればいい → 通信量の節約 ◦ ⾒てる途中で離脱 ◦ 前回までに⾒たところから再⽣する ◦ 再⽣時のタイムスタンプ指定 etc... ... #EXTINF:4.004, https://www.example.com/000.ts #EXTINF:4.004, https://www.example.com/001.ts ...
16. 16 HLSの構成：プレイリスト • メディアプレイリスト ◦ 主にセグメントの⼀覧が書かれている （前項までで取り上げたもの） • マルチバリアントプレイリスト ◦ 主にメディアプレイリストや⾳声、字幕などの ストリーム⼀覧が書かれている
17. 17 フルHD 低画質 フルHD 標準画質 4K 高画質 HLSの構成：複数のストリームの例 マルチバリアント プレイリスト 動画プレイヤーが 最初に見るファイル
18. 18 HLSの構成：マルチバリアントプレイリスト #EXTM3U #EXT-X-VERSION:3 #EXT-X-STREAM-INF:BANDWIDTH=1091244,RESOLUTION=720x480 https://www.example.com/manifest_1.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=2382397,RESOLUTION=1920x1080 https://www.example.com/manifest_2.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=3859904,RESOLUTION=3840x2160 https://www.example.com/manifest_3.m3u8 ※実際はもっと色々書いてあります
19. 19 HLSの構成：マルチバリアントプレイリスト • 複数の動画ストリームを記述できる ◦ 再⽣プレイヤーが回線速度などを基に 動画ストリーム（メディアプレイリスト）を選べる ◦ タイミングが同期できれば、再⽣中に変えることも可能 • 動画の字幕データ、副⾳声などの⾳声ファイルも記述できる
20. HLS で配信する
21. 21 HLS（HTTP Live Streaming） • Apple が策定した HTTPベースの配信プロトコル ◦ .html や .jpg で Web ページを配信するのと同じ仕組みで配信できる • .mp4 などで作ったファイルを配信したい場合、 セグメントとプレイリストに変換して配信する • 再⽣の流れ ◦ プレイリスト をHTTPでGET ◦ プレイリストの内容にある セグメント をHTTPでGET ◦ 再⽣バッファが貯まったら再⽣開始
22. 22 AWSでの構築例（VOD） OVP (Online Video Platform) Amazon CloudFront Amazon S3 視聴者 配信したい動画 CDN オリジン S3 + CloudFront マネージドサービスで構成 ⼤規模配信の負荷を捌く MP4 MediaConvert ファイルをトランスコード、パッケージング 出来たファイルを S3 に配置 トランスコード‧パッケージング HLS / MPEG-DASH AWS Elemental MediaConvert .mp4 などを変換（1度きり） HTTP
23. 23 HLS（HTTP Live Streaming） Chrome での例
24. 24 アダプティブビットレートストリーミング インターネット回線速度などに合わせて ⾃動でビットレートを調整する仕組み HLS では、調整‧変更⾃体は再⽣プレイヤー側が⾏う （配信者側はファイルを⽤意しておくだけ）
25. 25 開発者ツールで遅いネットワークを再現できます アダプティブビットレートストリーミング 低い画質のセグメントに 自動で切り替え
26. LIVE 配信
27. 27 AWSでの構築例（LIVE配信） 映像を順次処理 HTTP OVP (Online Video Platform) AWS Elemental MediaLive Amazon CloudFront 視聴者 配信ソフト CDN Amazon S3 オリジン S3 + CloudFront マネージドサービスで構成 ⼤規模配信の負荷を捌く MediaLive ライブエンコード、パッケージング 出来たファイルを S3 に配置 RTMP トランスコード‧パッケージング HLS / MPEG-DASH セグメントが増える プレイリストが書き換わる
28. 28 Webアプリの中でも特に短時間に負荷が集中しやすい • LIVE配信は顕著。VODも時間帯や、コンテンツの公開直後などで増える。 • 動画なのでサイズが⼤きく、ネットワーク帯域を圧迫する。 動画配信のサーバー負荷 全アクセスを普通に捌くのは無理
29. 29 CDN：Contents Delivery Network Webコンテンツを効率よく配信するネットワーク DNS （キャッシュDNS） エッジサーバー オリジンサーバー
30. 30 CDN：Contents Delivery Network エッジサーバー オリジンサーバー 初回リクエスト時、コピーをエッジサーバーに保持 リクエスト リクエスト
31. 31 CDN：Contents Delivery Network エッジサーバー オリジンサーバー 同じリクエストが来たらコピーを渡す
32. 32 CDN：Contents Delivery Network 地理的に離れた場所に複数のエッジサーバーを配置 →（コピーがあれば）近いサーバーから低レイテンシで取得できる ※ イメージ
33. 33 CDN：Contents Delivery Network 地理的に離れた場所に複数のエッジサーバーを配置 →（コピーがあれば）近いサーバーから低レイテンシで取得できる →オリジンサーバーの負担が減る
34. 34 LIVE配信でよくあること 19:02:30 user_X　おいしそう 映像上の時計が 視聴者の時計とズレる 映像上にコメントが 遅れて表示される 遅延（レイテンシ）
35. 35 LIVE配信の遅延を減らすには OVP (Online Video Platform) AWS Elemental MediaLive Amazon CloudFront 視聴者 配信ソフト CDN Amazon S3 オリジン S3 + CloudFront マネージドサービスで構成 ⼤規模配信の負荷を捌く MediaLive ライブエンコード、パッケージング 出来たファイルを S3 に配置 RTMP トランスコード‧パッケージング HLS / MPEG-DASH HLSのセグメントを短くする 色んな機器の負荷が増えるのでトレードオフ セグメントが 10秒なら 10秒の映像を貯める必要がある
36. 36 LIVE配信の遅延を減らすには 低遅延配信が出来るプロトコルにする • LL-HLS HLS 拡張 • LL-DASH MPEG-DASH 拡張 • WHIP / WHEP WebRTC 拡張 etc...
37. 試してみたい人向け
38. 38 AWSでの構築例（VOD） OVP (Online Video Platform) Amazon CloudFront Amazon S3 視聴者 配信したい動画 CDN オリジン S3 + CloudFront マネージドサービスで構成 ⼤規模配信の負荷を捌く MP4 MediaConvert ファイルをトランスコード、パッケージング 出来たファイルを S3 に配置 トランスコード‧パッケージング HLS / MPEG-DASH AWS Elemental MediaConvert FFmpeg hls.js HTTPサーバ (nginxなど) .mp4 などを変換（1度きり） HTTP
39. 39 FFmpeg 動画や⾳声のエンコードなどが出来るコマンドラインツール （例）$ ffmpeg -i input.mp4 output.avi • エンコード・デコード（一部は対応ライブラリが必要） • ファイルフォーマットの変換 • 動画の加工 ◦ 色調調整、解像度の変更、画像の切り出し etc… .mp4 ファイルをトランスコード、パッケージングして HLSの形式にすることも可能
40. 40 hls.js：HLSのストリーミング再生をするライブラリ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>hls.js sample</title> <script src="https:</cdn.jsdelivr.net/npm/hls.js@1"></script> </head> <body> <video id="video" width="640" controls></video> <script> const video = document.getElementById('video'); if (Hls.isSupported()) { const hls = new Hls(); hls.loadSource('https:</example.com/index.m3u8'); hls.attachMedia(video); } </script> </body> </html> hls.js の読み込み 動画URLを渡す