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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

各種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

No content