Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
React NativeアプリでコラボLIVE配信 / Collaboration Live ...
Search
stand.fm
December 18, 2020
Programming
1
3.8k
React NativeアプリでコラボLIVE配信 / Collaboration Live Streaming with React Native App
React NativeアプリでWebRTCの通話内容をライブ配信する仕組みについてです。
stand.fm
December 18, 2020
Tweet
Share
More Decks by stand.fm
See All by stand.fm
stand.fm会社紹介資料
standfm
0
470
stand.fmのTypeScriptへの移行と活用/migrating-to-typescript-standfm
standfm
0
2.2k
stand.fmの最近の取り組み: アプリ起動速度の改善/improvement-of-speed-startup-app
standfm
4
2.6k
ReactNative製アプリがAndroidだと遅いという問題に立ち向かった話/the problem that React Native apps are slow on Android
standfm
1
3k
LIVEの負荷対策と監視について / About LIVE load countermeasures and monitoring
standfm
0
8.2k
声でつながる、 優しい世界を創るUI/UX
standfm
4
500
stand.fm(Android)におけるreact-native-track-playerの改善/Improvement of react-native-track-player on standfm Android app
standfm
0
310
stand.fmにおける開発体験とパフォーマンスの向上 / Development Experience and Performance improvement
standfm
1
7.3k
エンジニア向け会社紹介資料 / company deck for engineers
standfm
7
66k
Other Decks in Programming
See All in Programming
Flatt Security XSS Challenge 解答・解説
flatt_security
0
740
見えないメモリを観測する: PHP 8.4 `pg_result_memory_size()` とSQL結果のメモリ管理
kentaroutakeda
0
940
どうして手を動かすよりもチーム内のコードレビューを優先するべきなのか
okashoi
3
890
20年もののレガシープロダクトに 0からPHPStanを入れるまで / phpcon2024
hirobe1999
0
1k
『改訂新版 良いコード/悪いコードで学ぶ設計入門』活用方法−爆速でスキルアップする!効果的な学習アプローチ / effective-learning-of-good-code
minodriven
28
4.2k
Simple組み合わせ村から大都会Railsにやってきた俺は / Coming to Rails from the Simple
moznion
3
2.2k
DevinとCursorから学ぶAIエージェントメモリーの設計とMoatの考え方
itarutomy
0
160
php-conference-japan-2024
tasuku43
0
430
return文におけるstd::moveについて
onihusube
1
1.4k
いりゃあせ、PHPカンファレンス名古屋2025 / Welcome to PHP Conference Nagoya 2025
ttskch
1
190
PicoRubyと暮らす、シェアハウスハック
ryosk7
0
230
カンファレンス動画鑑賞会のススメ / Osaka.swift #1
hironytic
0
180
Featured
See All Featured
Automating Front-end Workflow
addyosmani
1366
200k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
113
50k
Writing Fast Ruby
sferik
628
61k
Designing Experiences People Love
moore
139
23k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
98
18k
Statistics for Hackers
jakevdp
797
220k
Side Projects
sachag
452
42k
Why You Should Never Use an ORM
jnunemaker
PRO
54
9.1k
Making Projects Easy
brettharned
116
6k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.6k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
127
18k
Practical Orchestrator
shlominoach
186
10k
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配信機能 • 配信者はリスナーの中から数人のゲストを招待
• 配信者とゲストの間で通話ができる • 通話内容を多数のリスナーに配信できる 一人の語りで面白い音声コンテンツを作るのは難しいけど 対話からは楽しみとともに面白いコンテンツが生まれやすい
アーキテクチャ概観(コラボ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
None