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

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

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

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

stand.fm

More Decks by stand.fm

Other Decks in Programming

Featured

Transcript

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

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

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

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

コラボLIVE配信: 配信者のアプリの音声まわりの構成 • 通話 ◦ 通話だけならreact-native-webrtcでオッケー ◦ 実は通話音声を取得することができず、このためにWebRTCライブラリ本体と react-native-webrtcをforkして改造

まとめ: React Nativeまわりで、できたこと・やったこと React NativeアプリでコラボLIVE配信機能を作りました react-native系のライブラリを使うとできたこと • HLSを視聴する • WebRTCで通話する