React NativeアプリでWebRTCの通話内容をライブ配信する仕組みについてです。
React NativeアプリでコラボLIVE配信瀬戸口 司TECH STAND #2 React Native
View Slide
自己紹介Tsukasa SetoguchiProgrammerGitHub: @set0gut1Twitter: @set0gut1stand.fmの開発を2年半くらい前からやってます(初期からいる)
今日話すこと『React NativeアプリでコラボLIVE配信』React Nativeで作っているstand.fmで配信者とゲストの会話をLIVE配信する機能のアーキテクチャと使用ライブラリの概要
コラボLIVE配信: 機能概要LIVE配信機能(一人配信)● 配信者がリアルタイムに声を多数のリスナー配信できる● リスナーはテキストチャットでコメントできるコラボLIVE配信機能● 配信者はリスナーの中から数人のゲストを招待● 配信者とゲストの間で通話ができる● 通話内容を多数のリスナーに配信できる一人の語りで面白い音声コンテンツを作るのは難しいけど対話からは楽しみとともに面白いコンテンツが生まれやすい
アーキテクチャ概観(コラボLIVE配信)
LIVEサーバLIVEサーバはWowza Streaming Engineを利用● 動画ストリーミング用のサーバソフトウェア● ライセンスを購入してサーバにインストールする
HLS: HTTP Live Streaming1秒の音声ファイル(セグメントファイル)が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を利用する
WebRTCWebRTC: Web Real-Time Communicationウェブブラウザ間のP2P通信でUDPを使って低遅延のビデオチャットができる(ざっくり)stand.fmは音声部分のみ利用● WebRTC: 遅延0.1秒くらい● ちなみにHLSは遅延10秒くらい
アーキテクチャ概観(コラボ収録)【コラボ収録】複数人で収録を行う機能配信者の端末に音声ファイルとして集約して編集しながら収録できる(切り取り・挿入)
コラボ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-playerhttps://github.com/react-native-kit/react-native-track-playerreact-native-webrtchttps://github.com/react-native-webrtc/react-native-webrtcWebRTChttps://opensource.google/projects/webrtcHaishinKithttps://github.com/shogo4405/HaishinKit.swift