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 Streaming with React Native App
Search
stand.fm
December 18, 2020
Programming
1
3.4k
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
270
stand.fmのTypeScriptへの移行と活用/migrating-to-typescript-standfm
standfm
0
2k
stand.fmの最近の取り組み: アプリ起動速度の改善/improvement-of-speed-startup-app
standfm
3
2.3k
ReactNative製アプリがAndroidだと遅いという問題に立ち向かった話/the problem that React Native apps are slow on Android
standfm
1
2.6k
LIVEの負荷対策と監視について / About LIVE load countermeasures and monitoring
standfm
0
7.9k
声でつながる、 優しい世界を創るUI/UX
standfm
4
440
stand.fm(Android)におけるreact-native-track-playerの改善/Improvement of react-native-track-player on standfm Android app
standfm
0
250
stand.fmにおける開発体験とパフォーマンスの向上 / Development Experience and Performance improvement
standfm
1
7k
エンジニア向け会社紹介資料 / company deck for engineers
standfm
7
65k
Other Decks in Programming
See All in Programming
ファイル先頭の use の意味、説明できますか? 〜PHP の namespace と autoloading の関係を正しく理解しよう〜 / namespace and autoloading in php
okashoi
2
410
Go1.22からの疑似乱数生成器について/go-122-pseudo-random-generator
convto
1
120
Laravel OpenAPIによる"辛くない"スキーマ駆動開発
kentaroutakeda
2
1.5k
架空のコンペ_スクワットフォーム判別コンペの解法
cpptake
0
430
開発者体験を変えるInfrastructure as Codeの新機能6選!
konokenj
4
850
Jakarta EE 11 - Performance and Developer Productivity
ivargrimstad
0
870
生成 AI の中身を覗いてみよう〜基礎から医療現場での応用まで〜
soh9834
2
700
Sementic Kernelのネイティブ関数について
tomokusaba
0
790
【KMC春合宿2024】実装視点で見るNeural Radiance Fields
runningoutrate
0
130
ログラスの継続的なプロンプト改善のためのLLMOpsの今 / LLMOps at loglass now
rkaga
PRO
1
330
品質が高いコードって何?Rev2.1
ickx
1
390
私がエッジを使う理由
chimame
9
3.6k
Featured
See All Featured
Learning to Love Humans: Emotional Interface Design
aarron
266
39k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
19
1.6k
Done Done
chrislema
178
15k
VelocityConf: Rendering Performance Case Studies
addyosmani
319
23k
Mobile First: as difficult as doing things right
swwweet
215
8.5k
Build your cross-platform service in a week with App Engine
jlugia
223
17k
Why Our Code Smells
bkeepers
PRO
330
56k
What's new in Ruby 2.0
geeforr
335
31k
Designing Experiences People Love
moore
135
23k
Building an army of robots
kneath
300
41k
How GitHub Uses GitHub to Build GitHub
holman
467
290k
How STYLIGHT went responsive
nonsquared
92
4.7k
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