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

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

Transcript

1. React NativeアプリでコラボLIVE配信 瀬戸口 司 TECH STAND #2 React Native
2. 自己紹介 Tsukasa Setoguchi Programmer GitHub: @set0gut1 Twitter: @set0gut1 stand.fmの開発を2年半くらい前から やってます（初期からいる）
3. 今日話すこと 『React NativeアプリでコラボLIVE配信』 React Nativeで作っているstand.fmで 配信者とゲストの会話をLIVE配信する機能の アーキテクチャと使用ライブラリの概要
4. コラボLIVE配信: 機能概要 LIVE配信機能（一人配信） • 配信者がリアルタイムに声を多数のリスナー配信できる • リスナーはテキストチャットでコメントできる コラボLIVE配信機能 • 配信者はリスナーの中から数人のゲストを招待 • 配信者とゲストの間で通話ができる • 通話内容を多数のリスナーに配信できる 一人の語りで面白い音声コンテンツを作るのは難しいけど 対話からは楽しみとともに面白いコンテンツが生まれやすい
5. アーキテクチャ概観（コラボLIVE配信）
6. LIVEサーバ LIVEサーバはWowza Streaming Engineを利用 • 動画ストリーミング用のサーバソフトウェア • ライセンスを購入してサーバにインストールする
7. HLS: HTTP Live Streaming 1秒の音声ファイル（セグメントファイル）が LIVEの直近3秒ぶんくらい記述されている （というのをLIVEサーバがやってくれる） インデックスファイル https://${serverHost}/live/${liveId}/playlist.m3u8
8. LIVEサーバ → CDN → リスナー react-native-track-playerがHLSの 再生に対応している
9. 配信者 → LIVEサーバ（一人LIVE配信オンリーのとき） Wowza配布のiOS用/Android用SDKで 音声を録音してLIVEサーバに送信できる React Nativeから使う用のインタフェースを追加して native modulesとして利用してた （コラボLIVE配信つくる前まで）
10. アーキテクチャ概観（一人LIVE配信オンリーのとき）
11. 一人LIVE配信とコラボLIVE配信の差分 一人LIVE配信を拡張してコラボ機能をつけるために 音声まわりで必要だったこと • 数人のゲストと通話する • 通話内容をLIVEサーバに送信する 通話機能の部分はWebRTCを利用する
12. WebRTC WebRTC: Web Real-Time Communication ウェブブラウザ間のP2P通信でUDPを使って 低遅延のビデオチャットができる（ざっくり） stand.fmは音声部分のみ利用 • WebRTC: 遅延0.1秒くらい • ちなみにHLSは遅延10秒くらい
13. アーキテクチャ概観（コラボ収録） 【コラボ収録】 複数人で収録を行う機能 配信者の端末に音声ファイルとして集約して 編集しながら収録できる（切り取り・挿入）
14. アーキテクチャ概観（コラボLIVE配信）
15. コラボLIVE配信: 配信者のアプリの音声まわりの構成 • 通話 ◦ 通話だけならreact-native-webrtcでオッケー ◦ 実は通話音声を取得することができず、 このためにWebRTCライブラリ本体と react-native-webrtcをforkして改造 • 音声サーバへの送信 ◦ HaishinKitでRTMP送信（iOS） ◦ react-native-live-publisherというnpmパッケージを 自作して利用
16. まとめ: React Nativeまわりで、できたこと・やったこと React NativeアプリでコラボLIVE配信機能を作りました react-native系のライブラリを使うとできたこと • HLSを視聴する • WebRTCで通話する forkやnative moduleが必要だったこと • WebRTCの通話音声を得る • LIVEサーバに配信内容を送信する （↑Android版ではコラボ収録・コラボLIVE配信が未完成）
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