WebRTC를 이용한 멀티 화면 공유

이진호·2024년 1월 9일
1

최종프로젝트

목록 보기
4/18
post-thumbnail
post-custom-banner

이번에는 여러 개의 화면을 동시에 공유할 수 있는 로직에 대해서 알아봤다.
클라이언트 단에서 2개의 media stream 배열을 state로 관리를 한다.

  • myVideos : MediaStream[]
  • otherVideos : MediaStream[]

해당 stream에 대한 트랙을 전부 peerConnection에 전달해서 보내면 된다. 그리고 다른 peerConnection에서는 track이 추가될 때 마다 otherVideos에 해당 stream에 대한 정보를 넘겨주면 된다.

다만 이렇게 할 경우에 이미 생성된 videos의 연결이 끊기게 되고 계속 쌓이는 버그가 있었다
이를 해결하기 위해서 다시 랜더링 하기 전에 한번 싹 비우는 로직과 그리고 onTrack이벤트가 발생했을 시 filter로 현재 활성화가 된 비디오만 랜더링을 하면 된다.

다음에는 이제 여러 명끼리 화면을 공유하는 단계인데.. 사실 이 부분이 걱정이긴 하지만 열심히 공부할 생각이다.

profile
dygmm4288

0개의 댓글