Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

ImageFlux Live Streamingについて

ImageFlux
September 25, 2018

ImageFlux Live Streamingについて

ImageFlux

September 25, 2018
Tweet

More Decks by ImageFlux

Other Decks in Technology

Transcript

  1. 3 自己紹介 • 茂木 勇 • ピクシブ株式会社 ImageFlux事業部 エンジニア •

    インターネット上では saturday06 という名前で活動 しています ◦ https://twitter.com/saturday06 ◦ https://github.com/saturday06 茂木 勇 エンジニア
  2. 6 ImageFlux Live Streamingの概要図 配信者 視聴者 ImageFlux Live Streaming •

    WebRTCで受け取った動画をHLSに変換して配信 ◦ WebRTC:非常に低遅延かつ、ブラウザからプラグインなしで動画配信可能 ◦ HLS:遅延が多めである代わりに、大規模配信が可能 ▪ iOSアプリに対して動画配信をする場合はこの形式を用いる必要がある WebRTC HLS
  3. 7 ImageFlux Live Streamingの概要図 配信者 視聴者 ImageFlux Live Streaming WebRTC

    HLS この部分は、 WebRTC SFU Sora を用いて実現しています (後のセッションで株式会社時雨堂の@voluntasさんから解説あると思います)
  4.   $ curl -H "Content-Type: application/json" \ -H "X-Sora-Target: ImageFlux_20180905.CreateChannel" \

    -H "Authorization: Bearer $ACCESS_TOKEN" \ -XPOST -d ' { "hls": [ { "video": { "width": 640, "height": 480, "fps": 30, "bps": 1000000 }, "audio": { "bps": 64000 } } ] }' https://live-api.alpha.imageflux.jp/ 9 配信チャンネルを作るAPI
  5.   $ curl ... -XPOST -d '{ ... }' https://live-api.alpha.imageflux.jp/ {

    "channel_id": "<channel_id>", "sora_url": "ws://example.com:5000/signaling", "playlist_url": "https://example.com/hls/XXXX/XXXXXXXX.m3u8" } 11 配信チャンネルを作るAPI
  6.   $ curl ... -XPOST -d '{ ... }' https://live-api.alpha.imageflux.jp/ {

    "channel_id": "<channel_id>", "sora_url": "ws://example.com:5000/signaling", "playlist_url": "https://example.com/hls/XXXX/XXXXXXXX.m3u8" } 12 配信チャンネルを作るAPI(配信側) 配信者は、この情報を SoraのSDKに渡して配信を開始する
  7.   $ curl ... -XPOST -d '{ ... }' https://live-api.alpha.imageflux.jp/ {

    "channel_id": "<channel_id>", "sora_url": "ws://example.com:5000/signaling", "playlist_url": "https://example.com/hls/XXXX/XXXXXXXX.m3u8" } 13 配信チャンネルを作るAPI(視聴側) 視聴者はこのURLをHLS動画プレイヤーで再生
  8. - ImageFlux Live Streamingで用 いられているものと同様の構成 で、ライブ配信を実現 - 加えて、WebRTC SFU Soraとの

    連携により、複数人同時配信・配 信者同士のリアルタイムコミュニ ケーションを実現 15 事例:pixiv Sketch LIVE
  9. 16 WebRTC から HLSへの変換 配信者 視聴者 1. WebRTCの復号化 2. Opus音声の取り出し

    3. H.264映像の取り出し 4. 音声と映像の同期 5. バッファリング 6. トランスコード 7. HLSセグメント化
  10. 17 WebRTC から HLSへの変換 配信者 視聴者 1. WebRTCの復号化 2. Opus音声の取り出し

    3. H.264映像の取り出し 4. 音声と映像の同期 5. バッファリング 6. トランスコード 7. HLSセグメント化
  11. 19 WebRTC から HLSへの変換 配信者 視聴者 1. WebRTCの復号化 2. Opus音声の取り出し

    3. H.264映像の取り出し 4. 音声と映像の同期 5. バッファリング 6. トランスコード 7. HLSセグメント化
  12. 21 WebRTC から HLSへの変換 配信者 視聴者 1. WebRTCの復号化 2. Opus音声の取り出し

    3. H.264映像の取り出し 4. 音声と映像の同期 5. バッファリング 6. トランスコード 7. HLSセグメント化
  13. 24 WebRTC から HLSへの変換 配信者 視聴者 1. WebRTCの復号化 2. Opus音声の取り出し

    3. H.264映像の取り出し 4. 音声と映像の同期 5. バッファリング 6. トランスコード 7. HLSセグメント化
  14. 26 WebRTC から HLSへの変換 配信者 視聴者 1. WebRTCの復号化 2. Opus音声の取り出し

    3. H.264映像の取り出し 4. 音声と映像の同期 5. バッファリング 6. トランスコード 7. HLSセグメント化
  15. 29 WebRTC から HLSへの変換 配信者 視聴者 1. WebRTCの復号化 2. Opus音声の取り出し

    3. H.264映像の取り出し 4. 音声と映像の同期 5. バッファリング 6. トランスコード 7. HLSセグメント化
  16. 31 WebRTC から HLSへの変換 配信者 視聴者 1. WebRTCの復号化 2. Opus音声の取り出し

    3. H.264映像の取り出し 4. 音声と映像の同期 5. バッファリング 6. トランスコード 7. HLSセグメント化
  17. 33 WebRTC から HLSへの変換 配信者 視聴者 1. WebRTCの復号化 2. Opus音声の取り出し

    3. H.264映像の取り出し 4. 音声と映像の同期 5. バッファリング 6. トランスコード 7. HLSセグメント化