꾸준히 개발하기

WebRTC가 로컬 환경이 아니면 보안 문제로 카메라 권한을 원활하게 받아오지 못한다는 것은 알지만 우선 s3 버킷에 올려서 호스팅부터 해보기로 했다. 

자, 내가 필요한 건 1. 서버 2. 도메인 이렇게 두가지인데, 학회 수준 프로젝트에서 도메인을 매년 만얼마씩 주면서 구매할 필요성을 못 느껴서 무료 도메인을 서치하던 중 좋은 사이트를 발견했다.

내도메인.한국이라는 사이트인데, 회원가입만 하면 무료로 도메인을 발급받을 수 있다. (물론 .com같은 도메인은 아니긴 하다.)

우리 프로젝트 노션명을 따와서 postmafia.kro.kr를 발급받았다. 

Route 53

AWS 로 이동하여, route 53에 들어간다. 아래 이미지는 이미 호스팅 영역이 추가되어 있지만, '호스팅 영역 생성' 버튼을 클릭하여 추가해준다. 

도메인 이름의 postmafia.kro.kr을 클릭하면 4개의 네임서버를 볼 수 있는데, 내도메인한국의 설정창에서 CNAME 칸에 추가로 입력해줬다. 여기서 입력해줘야하는 네임서버가 4개라서 이따구로 적어놨는데 나중에 수정해야겠다..!

Amazon s3

s3 버킷을 생성하고, step5 파일을 업로드한 뒤, 정적 웹사이트 호스팅을 걸어두었다. 왜인지 모르겠지만 postmafia.kro.kr으로 접속했을 때 바로 인덱스 문서(index.html)로 넘어가지 않는다.

DNS 설정에서 별칭을 다 저렇게 정해놔서 그런건가..? 그렇다고 하기에는 1.postmafia.kro.kr로 접속해도 시간이 너무 오래 걸린다고 하고 안 뜬다.. ㅠㅠㅠ 우선은 엔드포인트로 도메인 웹포워딩을 걸어뒀다 ㅠㅠ 흐엉 속상해

근데 2시간 걸려서 http:// 환경 미완성 구축해놓은 상태인데 제대로 webRTC를 띄우기 위한 https:// 설정은 언제 하지..?!

(s3버킷 하다보니까 안교수님 강의실 미완성상태인게 너무 눈에 밟힌다... 올해 안에는 끝내야될텐데 아주 첩첩산중이야~)

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)