webrtc 를 이용한 비디오챗 이해하기 - Peer2Peer 이해하기

회사에서 webrtc 를 이용한 웹 비디오 챗을 만들었는데 꽤 오랫동안 작업해서 지금은 안정화 되었지만, 이게 참 이슈가 많았다.

webrtc 는 브라우저가 제공하는 비디오 & 오디오 관련 API 인데 브라우저별로 서포트 하는 범위가 버전별로 다르다.

가장 힘들었던 부분이 크로스 브라우징 이었는데, 대부분의 기능들은 브라우저 자체가 서포트하기만 하면 adapter를 이용해서 polyfill 이 가능하다. 문제는 아예 이를 지원하지 않는 브라우저 대표적으로 IE 같은 것들. 그리고 의외의 복병이었던게 안드로이드의 자체 브라우저나 앱에서 링크를 클릭했을때 앱 내부에서 임베디드 식으로 사용되는 브라우저들의 문제였다.

뭐 이들은 그렇다 치고, 가장 힘들었던게 바로 Peer2Peer 프로세스를 이해하는 것이었는데,  이게 처음에는 너무 힘들었다.

양쪽에서 PeerConnection 을 생성하고 getUserMediaStream 을 이용해 mediaStream 을 생성해 붙인다음  한쪽에서 offer 를 만들어 보내고 상대방이 offer 를 받아 answer 를 생성해 다시 보내주면 이쪽에서 받은 answer 를 프로세스한다. 그러니까 한쪽은 offer , 한쪽은 answer 를 생성하게 되고 이를 주고받고, 이 과정에서 iceCandidate 로 네트웍 정보를 주고받아 커넥션이 완성된다.

 

offer, answer, 그리고 iceCandidate 를 주고받는 것은 주로 소켓 메시지로 전달한다. 커넥션이 완료되면 서버와의 별도 커넥션 없이 브라우저 대 브라우저, peer to peer 커넥션이 생성된다. 이후에는 한쪽 브라우저에서 다른 브라우저로 비디오/오디오 스트림을 전송할수 있게 된다. 카카오톡이나 줌 과 같은 비디오챗의 기본원리는 아마 이와 같을거다. 

회사에서는 app 도 개발했는데 웹의 경우 일부 브라우저는 스크린쉐어도 가능하다.

webrtc samples page 에서 각종 샘플 코드를 확인 할 수 있는데 이 샘플들이 정말 많은 도움이 됐다.

사실 뭐부터 어떻게 풀어야 할지를 모르겠어서 대충.... 전체적인 흐름만 짚어봤다. 기회가 된다면 나중에 디테일....ㅎ