Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

15bd11f2c2c5e3dd854153d03a102b0d?s=47 stand.fm
December 18, 2020
Programming
1
2.2k

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

React NativeアプリでWebRTCの通話内容をライブ配信する仕組みについてです。

15bd11f2c2c5e3dd854153d03a102b0d?s=128

stand.fm

December 18, 2020
Tweet

More Decks by stand.fm

See All by stand.fm
stand.fmのTypeScriptへの移行と活用/migrating-to-typescript-standfm
15bd11f2c2c5e3dd854153d03a102b0d?s=48 standfm
0
1.1k
stand.fmの最近の取り組み: アプリ起動速度の改善/improvement-of-speed-startup-app
15bd11f2c2c5e3dd854153d03a102b0d?s=48 standfm
2
1.3k
ReactNative製アプリがAndroidだと遅いという問題に立ち向かった話/the problem that React Native apps are slow on Android
15bd11f2c2c5e3dd854153d03a102b0d?s=48 standfm
0
1.4k
LIVEの負荷対策と監視について / About LIVE load countermeasures and monitoring
15bd11f2c2c5e3dd854153d03a102b0d?s=48 standfm
0
6.8k
声でつながる、 優しい世界を創るUI/UX
15bd11f2c2c5e3dd854153d03a102b0d?s=48 standfm
4
330
stand.fm（Android）におけるreact-native-track-playerの改善/Improvement of react-native-track-player on standfm Android app
15bd11f2c2c5e3dd854153d03a102b0d?s=48 standfm
0
110
stand.fmにおける開発体験とパフォーマンスの向上 / Development Experience and Performance improvement
15bd11f2c2c5e3dd854153d03a102b0d?s=48 standfm
1
6.1k
エンジニア向け会社紹介資料 / company deck for engineers
15bd11f2c2c5e3dd854153d03a102b0d?s=48 standfm
7
58k

Other Decks in Programming

See All in Programming
Better Angular Architectures: Architectures with Standalone Components @DWX2022
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
PRO
1
430
Recap CDN, Edge, WebAssembly | ワインと鍋.js#1
33ef4c1ebe619115b552db9a9f9a3509?s=48 sadnessojisan
2
1.2k
MLOps勉強会_リアルタイムトラフィックのサーバレスMLOps基盤_20220810
7771ba477a3bee861bc62012a143bffe?s=48 strsaito
1
410
FargateとAthenaで作る、機械学習システム
2e7553bdade564572b26060b4a58b98e?s=48 nayuts
0
190
Google I/O 2022 Android関連概要 / Google I/O 2022 Android summary
Ad855122c2c5b24640cc8798eb103e4b?s=48 phicdy
1
400
WindowsコンテナDojo: 第4回 Red Hat OpenShift Localを使ってみよう
E5eb221d34d4ffbe973f8542b4c3a00e?s=48 oniak3ibm
PRO
0
190
Automating Gradle benchmarks at N26
D4b7a3e2ed10f86e0b52498713ba2601?s=48 ubiratansoares
PRO
2
140
AWS Config Custom Rule、ノーコードでできるかな？
822eaa655305fe3cffb0b034913f0cd2?s=48 watany
0
250
Dagger, la CI, autrement
27021de2df79d619a3ebf52ab6392e82?s=48 guikingone
1
120
10歳の minne から、これから長く続くプロダクトを作るすべての人へ
Dd21eeb4e9dc073f37239571b85fd2ab?s=48 tsumichan
9
3.7k
レビュー駆動学習のススメ_StaPy#83
86b349524dfba1c635e944f2a9c92e91?s=48 soogie
0
320
SGGとは
3cfad86677c5966ecfe9b81955fa3489?s=48 inoue2002
0
440

Featured

See All Featured
Web development in the modern age
465724d73fe3a92c0879fdfb43a3a6f3?s=48 philhawksworth
197
9.3k
Designing the Hi-DPI Web
C157b16234f1e75e8eac3698c1d4414a?s=48 ddemaree
272
32k
We Have a Design System, Now What?
95d9f37115fbb0d13135d0f77132f856?s=48 morganepeng
35
3k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
D8fc2580cfaca035f666d9e4ee79a7f7?s=48 mongodb
29
4.4k
StorybookのUI Testing Handbookを読んだ
50fc0fdc2327ecbe7350645812de52e3?s=48 zakiyama
6
2.5k
Thoughts on Productivity
A16eb159db895e3b01d3dc95767ad595?s=48 jonyablonski
44
2.4k
4 Signs Your Business is Dying
E4f5d494ebdc9e7cce1aecf3ce3e8bc1?s=48 shpigford
169
20k
Three Pipe Problems
11c84dff30266b907714802088852677?s=48 jasonvnalue
89
8.7k
Fight the Zombie Pattern Library - RWD Summit 2016
9fa239b3154a0169d99ab7bf1422dd12?s=48 marcelosomers
226
15k
GraphQLの誤解/rethinking-graphql
3cb4e761dbdb7aebd1ffd85f752e1e3e?s=48 sonatard
31
6.8k
What's in a price? How to price your products and services
Dad095ea7038f89f760419ce475d5d14?s=48 michaelherold
229
9.4k
GraphQLとの向き合い方2022年版
893f54413c2bd9ba41d11d753aacaf2c?s=48 quramy
16
8.5k

Transcript

  1. React NativeアプリでコラボLIVE配信 瀬戸口 司 TECH STAND #2 React Native

  2. 自己紹介 Tsukasa Setoguchi Programmer GitHub: @set0gut1 Twitter: @set0gut1 stand.fmの開発を2年半くらい前から やってます（初期からいる）

  3. 今日話すこと 『React NativeアプリでコラボLIVE配信』 React Nativeで作っているstand.fmで 配信者とゲストの会話をLIVE配信する機能の アーキテクチャと使用ライブラリの概要

  4. コラボLIVE配信: 機能概要 LIVE配信機能（一人配信） • 配信者がリアルタイムに声を多数のリスナー配信できる • リスナーはテキストチャットでコメントできる コラボLIVE配信機能 • 配信者はリスナーの中から数人のゲストを招待

    • 配信者とゲストの間で通話ができる • 通話内容を多数のリスナーに配信できる 一人の語りで面白い音声コンテンツを作るのは難しいけど 対話からは楽しみとともに面白いコンテンツが生まれやすい

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

  6. LIVEサーバ LIVEサーバはWowza Streaming Engineを利用 • 動画ストリーミング用のサーバソフトウェア • ライセンスを購入してサーバにインストールする

  7. HLS: HTTP Live Streaming 1秒の音声ファイル（セグメントファイル）が LIVEの直近3秒ぶんくらい記述されている （というのをLIVEサーバがやってくれる） インデックスファイル https://${serverHost}/live/${liveId}/playlist.m3u8

  8. LIVEサーバ → CDN → リスナー react-native-track-playerがHLSの 再生に対応している

  9. 配信者 → LIVEサーバ（一人LIVE配信オンリーのとき） Wowza配布のiOS用/Android用SDKで 音声を録音してLIVEサーバに送信できる React Nativeから使う用のインタフェースを追加して native modulesとして利用してた （コラボLIVE配信つくる前まで）

  10. アーキテクチャ概観（一人LIVE配信オンリーのとき）

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

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

    遅延0.1秒くらい • ちなみにHLSは遅延10秒くらい

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

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

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

    • 音声サーバへの送信 ◦ HaishinKitでRTMP送信（iOS） ◦ react-native-live-publisherというnpmパッケージを 自作して利用

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

    forkやnative moduleが必要だったこと • WebRTCの通話音声を得る • LIVEサーバに配信内容を送信する （↑Android版ではコラボ収録・コラボLIVE配信が未完成）

  17. 各種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

  18. None