React NativeアプリでコラボLIVE配信 / Collaboration Live Streaming with React Native App

React NativeアプリでWebRTCの通話内容をライブ配信する仕組みについてです。

Transcript

1. React NativeアプリでコラボLIVE配信
   瀬戸口 司
   TECH STAND #2 React Native
   

   View Slide

2. 自己紹介
   Tsukasa Setoguchi
   Programmer
   GitHub: @set0gut1
   Twitter: @set0gut1
   stand.fmの開発を2年半くらい前から
   やってます（初期からいる）
   

   View Slide

3. 今日話すこと
   『React NativeアプリでコラボLIVE配信』
   React Nativeで作っているstand.fmで
   配信者とゲストの会話をLIVE配信する機能の
   アーキテクチャと使用ライブラリの概要
   

   View Slide

4. コラボLIVE配信: 機能概要
   LIVE配信機能（一人配信）
   ● 配信者がリアルタイムに声を多数のリスナー配信できる
   ● リスナーはテキストチャットでコメントできる
   コラボLIVE配信機能
   ● 配信者はリスナーの中から数人のゲストを招待
   ● 配信者とゲストの間で通話ができる
   ● 通話内容を多数のリスナーに配信できる
   一人の語りで面白い音声コンテンツを作るのは難しいけど
   対話からは楽しみとともに面白いコンテンツが生まれやすい
   

   View Slide

5. アーキテクチャ概観（コラボLIVE配信）
   

   View Slide

6. LIVEサーバ
   LIVEサーバはWowza Streaming Engineを利用
   ● 動画ストリーミング用のサーバソフトウェア
   ● ライセンスを購入してサーバにインストールする
   

   View Slide

7. HLS: HTTP Live Streaming
   1秒の音声ファイル（セグメントファイル）が
   LIVEの直近3秒ぶんくらい記述されている
   （というのをLIVEサーバがやってくれる）
   インデックスファイル
   https://${serverHost}/live/${liveId}/playlist.m3u8
   

   View Slide

8. LIVEサーバ → CDN → リスナー
   react-native-track-playerがHLSの
   再生に対応している
   

   View Slide

9. 配信者 → LIVEサーバ（一人LIVE配信オンリーのとき）
   Wowza配布のiOS用/Android用SDKで
   音声を録音してLIVEサーバに送信できる
   React Nativeから使う用のインタフェースを追加して
   native modulesとして利用してた
   （コラボLIVE配信つくる前まで）
   

   View Slide

10. アーキテクチャ概観（一人LIVE配信オンリーのとき）
    

    View Slide

11. 一人LIVE配信とコラボLIVE配信の差分
    一人LIVE配信を拡張してコラボ機能をつけるために
    音声まわりで必要だったこと
    ● 数人のゲストと通話する
    ● 通話内容をLIVEサーバに送信する
    通話機能の部分はWebRTCを利用する
    

    View Slide

12. WebRTC
    WebRTC: Web Real-Time Communication
    ウェブブラウザ間のP2P通信でUDPを使って
    低遅延のビデオチャットができる（ざっくり）
    stand.fmは音声部分のみ利用
    ● WebRTC: 遅延0.1秒くらい
    ● ちなみにHLSは遅延10秒くらい
    

    View Slide

13. アーキテクチャ概観（コラボ収録）
    【コラボ収録】
    複数人で収録を行う機能
    配信者の端末に音声ファイルとして集約して
    編集しながら収録できる（切り取り・挿入）
    

    View Slide

14. アーキテクチャ概観（コラボLIVE配信）
    

    View Slide

15. コラボLIVE配信: 配信者のアプリの音声まわりの構成
    ● 通話
    ○ 通話だけならreact-native-webrtcでオッケー
    ○ 実は通話音声を取得することができず、
    このためにWebRTCライブラリ本体と
    react-native-webrtcをforkして改造
    ● 音声サーバへの送信
    ○ HaishinKitでRTMP送信（iOS）
    ○ react-native-live-publisherというnpmパッケージを
    自作して利用
    

    View Slide

16. まとめ: React Nativeまわりで、できたこと・やったこと
    React NativeアプリでコラボLIVE配信機能を作りました
    react-native系のライブラリを使うとできたこと
    ● HLSを視聴する
    ● WebRTCで通話する
    forkやnative moduleが必要だったこと
    ● WebRTCの通話音声を得る
    ● LIVEサーバに配信内容を送信する
    （↑Android版ではコラボ収録・コラボLIVE配信が未完成）
    

    View Slide

17. 各種OSSライブラリのリンク
    react-native-track-player
    https://github.com/react-native-kit/react-native-track-player
    react-native-webrtc
    https://github.com/react-native-webrtc/react-native-webrtc
    WebRTC
    https://opensource.google/projects/webrtc
    HaishinKit
    https://github.com/shogo4405/HaishinKit.swift
    

    View Slide

18. View Slide