세 가지 방식

미디어 서버

시그널링 서버+WebRTC API로 P2P connection 맺기

addStream → addTrack, “addStream” 이벤트 → “track” 이벤트로 변경됨 (참고)

화상공유 Mesh방식 1:N 구현

레퍼런스

• https://github.com/webrtc/samples/blob/gh-pages/src/content/peerconnection/channel/js/main.js
• https://millo-l.github.io/WebRTC-구현하기-1-N-P2P/

Flow

peerConnection 생성 및 offer, answer 교환

• 코드

1. 시그널링 서버에 “소켓 connect 하기”

2. 소켓이 connect되면

   1. getUserMedia로 얻은 local stream을 변수에 저장해두고 local video요소의 srcObject로 설정한다.
   2. “방에 join 하기"

3. 소켓이 방에 join되면 (방에 있는 기존 peer들의 소켓 id를 배열로 수신)

   → 각 peer와의 peerConnection을 생성하고 offer를 보낸다.

   1. peerConnection 생성 + peerConnection 이벤트 리스너 등록(onicecandidate, ontrack)
   2. peerConnection을 통해 송출될 stream에 local stream을 추가
   3. peerConnection offer 생성 및 local description으로 등록
   4. "연결맺고싶은 peer에게 offer보내기”

4. 소켓이 offer를 받으면 (offer, offer를 보낸 peer의 소켓 id를 수신)

   → offer를 보낸 peer와의 peerConnection을 생성하고 answer를 보낸다.

   1. peerConnection 생성 + peerConnection 이벤트 리스너 등록(onicecandidate, ontrack)
   2. peerConnection을 통해 송출될 stream에 local stream을 추가
   3. 전달받은 offer를 remote description으로 등록
   4. peerConnection answer 생성 및 local description으로 등록
   5. "offer를 보낸 peer에게 answer보내기”

5. 소켓이 answer를 받으면 (answer, answer를 보낸 peer의 소켓 id를 수신)

   1. 전달받은 answer를 remote description으로 등록한다.

icecandidate 교환

• 코드