背景
昨今、ライブコマースやゲーム配信が流行っており、モバイルユーザでも映像のリアルタイムの送受信がしたい。ここで、候補になるのが、①大規模配信で遅延を許容できる場合はHLS②小規模配信で遅延なしならWEBRTC-SFU（頑張ればできそうだが）。WEBRTC-SFUで自分はjanusが好きなので、そのモバイルの例をreact-nativeを用いて実装した。
実装
janus gateway のvideo room pluginを使用。本家のjanus.jsはnpmモジュールがないので、自前で実装する必要がある。 この辺りは手抜きした。
レポジトリ
https://github.com/atyenoria/react-native-janus-gateway-webrtc-video-chat
(面白ければスターお願いします。需要見てます。)
懸念点
react-native-webrtcがM58なので古い(現行M63?)
TODO
- iOS works
- Android works
- Janus Plugin Demo: Video Room works ( https://janus.conf.meetecho.com/videoroomtest.html )
- Local camera view
- Remote view
- Audio mute
- Video mute
- Audio Speaker
- Unpublish and publish
- Switch front and back camera with react-native-webrtc MediaStreamTrack.prototype._switchCamera()
- End call
- Problem: the delay of receving remote viedeos increases when recreating the webrtc session by unpublish/publish. Soulution: use janus.destroy() for republishing instead of unpublish and publish
- Rerender teh remote video view if others join and leave continuously
- Rerender my video view when publishing and unpublishing
- Switching camera works after recreating the session
- Connecting modal when creating session
- Redux integration
- Better handling the janus session by simple redux
- Better restarting the the janus session by simple queue system
- Text Chat Mock
- Rich UI
- Refactor index.js and janus.mobile.js
- More Details about how to use this Documentation
- PR to awesome-react-native ( https://github.com/jondot/awesome-react-native )
- Other Janus Plugin(Audio bridge, Streaming, Sip, Video Call ... etc)
展開例
下図の例のように、モバイルからHLSのトランスコーディングを行えば、WEBRTC(~200) + HLS (~ 1000)とかできる（はず）。
https://github.com/atyenoria/janus-webrtc-gateway-docker
