[WebRTC] Google Codelab 따라하기 - 2

Google에서 제공하는 codelab이 있습니다.

 

이것을 따라서 WebRTC의 기본을 구현해보려고 합니다.

 

** 주의: 아래 내용은 제가 따라한 내용으로 보다 정확한 내용은 codelab을 이용해 주시기 바랍니다.

 

 

[WebRTC] Google Codelab 따라하기 - 1 에서는 Video와 Message 송수신에 대해 실습하였습니다.

 

 

7. Node.js 로 signaling 서버 구현

7.1. Node.js 설치

Node.js 설치 및 Helloworld 실행 페이지에 따라 설치합니다.

 

7.2. 프로젝트 실행

coldelab에서 다운받은 소스 중 /work/step-04 위치로 이동합니다. 이 예제는 socket을 사용하여 room을 생성합니다.

 

npm install 실행 후 node index.js 를 실행합니다.

> npm install
> node index.js

7.3. 사이트 접속

브라우저에서 localhost:8080 으로 접속합니다.

 

포트 변경을 원하신다면 index.js 파일을 열어서 11번 라인의 listen(8080)을 변경해 주시면 됩니다.

 

위와 같이 방 이름을 입력하시고 F12를 눌러 개발자 콘솔을 확인하시면 아래와 같이 방이 생성되는 것을 볼 수 있습니다.

8. 다른 peer와 연결하는 서버

이번 예제를 통해 실제 영상을 주고받는 것을 확인할 수 있습니다.

 

저는 카메라가 없어서 제대로 된 동작을 못 올려드립니다. 다른 PC에서 잘 되는 것을 확인했습니다.

 

8.1. work/step-05 를 실행합니다.

> npm install
> node index.js

브라우저를 두 개 열어서 한쪽에서 localhost:8080으로 접속을 합니다. 이 때 브라우저의 cache 문제로 로딩이 제대로 안 될 수 있으니 Ctrl + F5 로 새로 고침 해줍니다.

 

다른 브라우저에서도 localhost:8080으로 접속을 합니다.

 

카메라가 없는 PC에서는 에러가 발생하며, 각각 아래와 같이 개발자 콘솔을 확인할 수 있습니다. 저는 8080이 아니라 3000 포트를 사용했습니다.

 

* room을 open한 브라우저

마지막 두 줄의 로그는 상대방이 join한 후 발생합니다.

 

* room에 join한 브라우저

위 room을 open한 로그에서는 client가 0이었는데 1인 것을 볼 수 있습니다.

방 이름인 foo는 main.js 의 25번째 라인 var room = 'foo'; 에 설정되어 있습니다.

 

9. Data channel을 사용하여 캡쳐화면 송수신

work/step-06 에서는 WebRTC의 Data channel을 사용하여 현재 영상을 캡쳐하고 상대 peer에게 송신하는 것을 확인할 수 있습니다.

 

9.1. work/step-06을 실행합니다.

> npm install
> node index.js

9.2. 하나의 브라우저에서 localhost:8080 에 접속합니다.

그러면 주소가 localhost:8080/#1a778e6a14350 등으로 바뀝니다. 이 주소를 복사해서 다른 브라우저에 붙여넣습니다.

 

두 브라우저가 연결이 되면 하나의 브라우저에서 Snap 버튼을 누르고 Send 버튼을 누릅니다. 그러면 상대 브라우저로 내용이 전송되는 것을 확인할 수 있습니다.

 

Reference

  - www.html5rocks.com/ko/tutorials/webrtc/basics/

  - codelabs.developers.google.com/codelabs/webrtc-web/#0