icecandidate, addStream

우리가 offer와 answer를 가지고 그걸 받는 걸 모두 끝냈을 때!!

peer to peer 연결의 양쪽에서 icecandidate라는 이벤트를 실행하기 시작한다.

ice candidate는 Internet Connectivity Establishment(인터넷 연결 생성)이다.

브라우저가 서로 소통할 수 있게 해주는 방법이다.

다수의 candidate(후보)들이 각각의 연결에서 제안되고 서로의 동의 하에 하나를 선택한다.

RTCIceCandidate - Web API | MDN (mozilla.org)

RTCIceCandidate - Web API | MDN

그래서 먼저 icecandidate event를 listen해줘야 한다.

 

myPeerConnection이 만들어지면 바로 icecandidate를 listner해주자. console창을 켜보면

우리는 offer을 바로 보냈고, 그 즉시 icecandidate를 하기 시작했다. 이 candidate들을 다시 다른 브라우저로 보내야 한다. peer A에서 보이는 candidate들은 peer B로 보내져야 한다. 그리고 peer B에서 보이는 candidate들은 peer A로 보내져야 한다.

 

app.js

server.js

app.js에서 icecandidate event가 다른 peer들에게 ice event를 발생시킨다.

그럼 myPeerConnection에 candidate들을 추가시킨다.

 

 

우리가 마지막으로 할 것은 addStream event를 등록하는 것이다. 여기서 나오는 stream은 다른 peer에서 온 stream이다.

나의 stream이 상대 peer의 addstream event속 data로 들어간 것을 확인할 수 있다!!!!!!

이제 이걸 통해서 상대방의 카메라, 오디오를 가져올 수 있는 것이다!!!!

home.pug

app.js

handleAddStream의 함수를  이렇게 바꿔주자

그럼 두 화면에서 잘 출력이 된다!! 하지만 아직 고쳐야할 버그들이 많다. 우리가 카메라를 변경할 수 있도록 설정해주었는데 변경을 막상 해보면 다른 화면에서 안나올 것이다.  

 

우리는 전에 카메라를 바꿀 때 새로운 stream을 만들었다. 이 새로운 stream을 sender를 통해서 바꿔줘야 한다. 

myPeerConnection.getSender().find(sender => sender.track.kind === 'video')를 통해 sender를 사용할 수 있다.

sender는 다른 브라우저로 보내진 비디오와 오디오 데이터를 컨트롤 하는 방법이다.

카메라를 바꾸는 함수에서 if문을 추가해주자 videoTrack에서 바뀐 myStream의 videoTrack을 Sender를 통해서 replaceTrack함수로 바꿔주면 된다!!

 

예를들어 노트북과 핸드폰이 같은 wifi를 사용하고 있을 경우에는 잘 실행이 되지만, 다른 경우에는 연결이 안된다. 

공용주소를 알아내기 위해서 STUN 서버를 사용해야한다. 전문적인 webRTC를 만들려면 직접 구현해야하지만GOOGLE에서 지원하는 무료 stun서버를 사용해보겠다.

myPeerConnection을 만들 때 이렇게 해주면 된다.