WebRTC 1:1 영상채팅 시나리오

1:1 WebRTC 영상 채팅 시나리오

user1과 user2가 1:1 영상 채팅을 한다고 가정

1. [user1/user2] getUserMedia를 통해 mediaStream을 얻어 localVideo.srcObject에 등록하고 localStream변수에 저장해 놓는다.

2. [user1/user2] socket.io 에 지정된 방 번호로 join한다. 이 때 먼저 접속한 유저는 Initiator가된다.

3. [user1/user2] 방에 모든 유저가 입장완료되면, 각 유저는 RTCPeerConnection객체를 생성한 후 아래 3개의 이벤트의 핸들러를 등록한다.

   • onicecandidate
   • ontrack
   • onremovestream

4. [user1/user2] 위에서 생성한 RTCPeerConnection객체의 addStream()를 통해 localStream을 추가한다.

5. [user1] 4번 작업이 완전히 끝나면, Initiator인 user1은 RTCPeerConnection.createOffer()를 통해 sessionDescription생성 후 RTCPeerConnection.setLocalDescription(sessionDescription)을 통해 description을 등록한다.

6. [user1] socket.io를 통해 user2에게 description객체를 전달한다.

7. [user2] user2는 user1의 description을 RTCPeerConnection.setRemoteDescription(new RTCSessionDescription(description)); 함수를 통해 등록한다.

8. [user2] RTCPeerConnection.createAnswer()를 통해 sessionDescription생성 후 RTCPeerConnection.setLocalDescription(sessionDescription)을 통해 description을 등록한다.

9. [user2] socket.io를 통해 user1에게 description객체를 전달한다.

10. [user1] user1은 user2의 description을 RTCPeerConnection.setRemoteDescription(new RTCSessionDescription(description)); 함수를 통해 등록한다.

11. [user1/user2] setRemoteDescription을 등록하고나면, 위의 onicecandidate에 등록해두었던 핸들러가 동작한다. socket.io를 통해 서로의 candidate를 전달한다.

12. [user1/user2] 서로가 전달한 candidate를 아래 코드를 통해 추가한다.

    • RTCPeerConnection.addIceCandidate(new RTCIceCandidate({
      	sdpMLineIndex: candidate.label,
      	candidate: candidate.candidate
      }));
      

13. [user1/user2] 위의 onaddstream핸들러를 통해 remoteStream을 얻어온 후 remoteStream변수와 remoteVideo.srcObject에 등록해준다.

14. 연결 완료!

참고할만한 정보

• onaddstream : setRemoteDescription () 호출 직후에 발생. 해당 함수가 deprecated되어 onTrack으로 대체해야함
• addTrack() : RTCPeerConnection의 메소드인 addTrack()은 다른 유저에게 전송될 트랙들의 묶음에 신규 미디어 트랙을 추가 addStream를 대체하기 위한 함수