$30 off During Our Annual Pro Sale. View Details »

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

stand.fm
December 18, 2020

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

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

stand.fm

December 18, 2020
Tweet

More Decks by stand.fm

Other Decks in Programming

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