배경

요즘, 라이브 커머스나 게임 전달이 유행하고 있어, 모바일 유저도 영상의 실시간 송수신을 하고 싶다. 여기서, 후보가 되는 것이, ①대규모 전달에서 지연을 허용할 수 있는 경우는 HLS②소규모 전달으로 지연 없이라면 WEBRTC-SFU(힘내면 할 수 있을 것 같지만). WEBRTC-SFU에서 자신은 janus를 좋아하기 때문에, 그 모바일의 예를 react-native를 이용해 구현했다.

구현

janus gateway의 video room plugin을 사용. 본가의 janus.js는 npm 모듈이 없으므로 자체 구현해야합니다. 이 근처는 손을 뽑았다.

리포지토리

htps : // 기주 b. 코 m / 아치 노리 아 / 레아 ct- 나치 ゔ ぇ - 아니 s-가 와 y- ぇ brtc ゔ ぃ
(재미있으면 스타 부탁합니다. 수요 보고 있습니다.)

우려점

react-native-webrtc가 M58이므로 오래된 (현재 M63?)

TODO

iOS works
Android 작업
Janus Plugin Demo: Video Room works ( htps // //쟈누 s. 곤 f. 잠깐. 이 m/ゔぃ로 내려오고 st. HTML )
로컬 카메라보기
원격보기
Audio mute
Video mute
Audio Speaker
Unpublish and publish
Switch front and back camera with react-native-webrtc MediaStreamTrack.prototype._switchCamera ()
끝 전화
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
리치 UI
Refactor index.js and janus.mobile.js
More Details about how to use this Documentation
PR to awesome-react-native ( htps : // 기주 b. 코 m / 조금 t / 아우 소메 레아 ct 나치 ゔ )
기타 Janus Plugin (Audio bridge, Streaming, Sip, Video Call ... etc)

배포 예

아래 그림의 예와 같이 모바일에서 HLS 트랜스코딩을 수행하면 WEBRTC(~200) + HLS(~1000)라 할 수 있다.
htps : // 기주 b. 코 m / あちぇ 노리 아 / 쟈누 s ぇ brtc - 주름 y - c r