3. p2p 연결 생성하기
3-1) icecandidate 이해하기
offer 와 answer이 끝날 때, p2p연결의 양쪽에서는 icecandidate 이벤트를 실행할 것임.
여기서ice는 internet connectivity establishment를 의미하며 '인터넷 연결 생성'을 의미한다.
icecandidate는 통신할 때 필요한 프로토콜과 라우팅 정보인데, 연결이 이루어지고 나면 이를 이용해 서로 데이터 교환을 시도할 수 있다. WebRTC연결이 처음 시작되면 일반적으로 icecandidate가 각 peer에서 여러개 만들어진다.
우리는 그중 하나를 연결에 이용하면 됨.
3-2) 이벤트 핸들러 함수 정의하기
handleIce 함수가 이벤트 핸들러 역할을 담당할 것이고 icecandidate이벤트로부터 객체가 전달될 것임.
<결과확인>
앞서말했듯이 딱 한개만 존재하는 데이터가 아니라서 콘솔창에 여러개가 출력됨을 이해해야한다.
3-3) candidate 교환하기
candidate는 브라우저가 우리에게 '이게 바로 브라우저간의 소통 방법이다' 라고 알려주는 일종의 정보다.
브라우저 1의 candidate는 브라우저2로
브라우저 2의 candidate는 브라우저 1로 교환되어야 한다.
app.js
server.js
설명 : candidate 속성을 서버에 보내고 서버에서 받은 candidate를 같은 채팅룸에 있는 다른 탭에게 전달해줌. 다시 app.js에서 addIceCandidate메서드를 통해 전달받은 candidate를 내 peer에 추가하는 역할을 함.
<결과 확인>
2. 미디어 교환하기
2-1) addstream 이벤트 추가하기
화면도 공유해야함.
addstream을 사용하고 makeConnection 함수에 이벤트함수를 추가로 등록할 것임.
addstream 이벤트는 peer 간의 연결에 스트림을 추가하면 발생하는 이벤트.
우리는 영상과 소리를 위해 스트림을 사용하고 있으니 이 이벤트에 코드를 추가하는것이 맞음.
2-1) 대화 상대의 미디어 출력하기
home.pug를 다음과 같이 수정
video 요소를 추가하외 id가 peerFace이다.
추가로 app.js 수정을 다음과 같이 하자.
이제 상대방의 stream이 화면에 출력될 것임.
<결과화면>
카메라 1은 브라우저1의 카메라고 / 카메라2는 브라우저 2의 카메라이다.
따라서 브라우저 1의 카메라를 끄면
p2p가 잘 이뤄지는 것을 확인할 수 있다.
'Develop > Zoom만들기' 카테고리의 다른 글
Zoom. 기능 추가사항 ( +오류 해결 ) (0) | 2023.09.11 |
---|---|
Zoom 만들기 15. 모바일에서 사용하기 (0) | 2023.09.09 |
Zoom만들기 13. WebRTC (0) | 2023.09.05 |
Zoom 만들기 12. 비디오와 오디오 제어하기 (0) | 2023.09.05 |
Zoom 만들기 .11 카메라 불러오기 (0) | 2023.09.04 |