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.7k
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
430
stand.fmのTypeScriptへの移行と活用/migrating-to-typescript-standfm
standfm
0
2.2k
stand.fmの最近の取り組み: アプリ起動速度の改善/improvement-of-speed-startup-app
standfm
4
2.5k
ReactNative製アプリがAndroidだと遅いという問題に立ち向かった話/the problem that React Native apps are slow on Android
standfm
1
2.9k
LIVEの負荷対策と監視について / About LIVE load countermeasures and monitoring
standfm
0
8.2k
声でつながる、 優しい世界を創るUI/UX
standfm
4
490
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.2k
エンジニア向け会社紹介資料 / company deck for engineers
standfm
7
66k
Other Decks in Programming
See All in Programming
役立つログに取り組もう
irof
28
9.6k
よくできたテンプレート言語として TypeScript + JSX を利用する試み / Using TypeScript + JSX outside of Web Frontend #TSKaigiKansai
izumin5210
6
1.7k
watsonx.ai Dojo #4 生成AIを使ったアプリ開発、応用編
oniak3ibm
PRO
1
140
OnlineTestConf: Test Automation Friend or Foe
maaretp
0
120
Pinia Colada が実現するスマートな非同期処理
naokihaba
4
230
シェーダーで魅せるMapLibreの動的ラスタータイル
satoshi7190
1
480
AWS Lambdaから始まった Serverlessの「熱」とキャリアパス / It started with AWS Lambda Serverless “fever” and career path
seike460
PRO
1
260
GitHub Actionsのキャッシュと手を挙げることの大切さとそれに必要なこと
satoshi256kbyte
5
430
Amazon Qを使ってIaCを触ろう!
maruto
0
410
카카오페이는 어떻게 수천만 결제를 처리할까? 우아한 결제 분산락 노하우
kakao
PRO
0
110
Enabling DevOps and Team Topologies Through Architecture: Architecting for Fast Flow
cer
PRO
0
340
Compose 1.7のTextFieldはPOBox Plusで日本語変換できない
tomoya0x00
0
190
Featured
See All Featured
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
93
16k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
0
100
Optimising Largest Contentful Paint
csswizardry
33
2.9k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
6
430
Keith and Marios Guide to Fast Websites
keithpitt
409
22k
A designer walks into a library…
pauljervisheath
204
24k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.9k
Side Projects
sachag
452
42k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
Building an army of robots
kneath
302
43k
Automating Front-end Workflow
addyosmani
1366
200k
Making the Leap to Tech Lead
cromwellryan
133
8.9k
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