꾸준히 개발하기

WebRTC의 연결 설정, 통신, 데이터 전송은 JS API를 통해 구현된다. 기본 API는 다음과 같다.

WebRTC JS API

- RTCPeerConnection : 피어 투 피어 연결 생성, 탐색

- RTCSessionDescription : 연결의 한쪽 끝, 구성 방법 설명

- navigator.getUserMedia : 오디오/비디오 캡쳐

현재 구글 WebRTC 예제 중 네트워크 상에서 비디오를 주고 받는 step 5 예제를 변형할 예정이다.

카메라에서 비디오를 추출하고 (getUserMedia - step 1)

대화 상대를 찾고 (signaling - step 4)

네트워크로 연결하여 (RTCPeerConnection - step 2)

비디오를 주고 받는 코드가 step 5이다.

구글 예제는 로컬 환경에서 구동되므로 SSL이 따로 필요하지 않았지만, 일반적인 서비스를 만드는 경우 WebRTC는 기본적으로 네트워크 연결시 SSL이 있어야한다. (데이터를 주고 받고, 화상 채팅을 하려면)

또한 서버가 한번만 연결하도록 작성되어 계속 서버를 재가동해야하는 불편함이 있다.

오디오 또한 제공되지 않는다! 

* step 5 폴더에 있는 주요 파일은 다음과 같다.

• index.js - NodeJS로 실행한 웹 서버 및 signaling
• index.html - 사용자가 보는 웹페이지 (화상채팅 화면)
  • js/main.js - RTCPeerConnection 등 실제 화상채팅을 하는 클라이언트 코드가 모두 여기 있음
  • css/main.css - index.html의 UI 정의

현재 나는 

1. WebRTC로 여러명의 비디오를 받아와 동시에 띄우며

2. 해당 웹사이트는 가상서버에서 호스팅을 해야한다. (즉, SSL 필수)

-> 보통 WebRTC는 로컬환경이 아닌 경우 보안 이슈가 있어 SSL 설정이 번거로운 것으로 알고 있다... 열심히 해쳐나가는 과정을 쭉 기록해놓고자 한다.

* 이 분의 블로그를 많이 참조했다. 보다 정확하고 세부적인 정보를 위해서는 이쪽으로 (forest71.tistory.com/211)