WebRTC는 구글에서 공유한 웹 기반 커뮤니케이션 라이브러리로, 별도의 설치 없이 웹 브라우저에서 화상채팅을 할 수 있는 기능을 제공한다.
WebRTC는 화상채팅, 음성채팅 등을 쉽게 제작할 수 있도록 도와주며,몇 번의 검색만으로 다음과 같이 다양한 설명과 예제 소스를 구할 수 있다.
대부분이 개념 설명과 코드 사용법을 중심으로 설명했는데,
여기에서는 개념 설명 없이 구글에서 제공하는 예제에 여러 가지 기능을 추가하는 방식으로 정리한다.
WebRTC는 제법 어려운(낯선) 내용들이 많고,
NodeJS, SSL, Soeket.IO, HTML, CSS 등의 부가적인 것에 대해서도 알아야 한다.
여기에서 간단하게 예제를 구현해 보면서 WebRTC 개발에 대한 재미를 느낀 뒤에,
본격적으로 관련된 깊이 있는 내용들을 찾아보면 좋을 것이다.
하지만, 최소한의 기본 개념은 있어야 하니,
WebRTC 개념 및 각종 개념에 대한 설명은 한번 쯤 읽어보고 다음 내용을 따라 하는 것이 좋다.
- 화상 채팅 예제로 익히는 WebRTC - 기본 예제
- 화상 채팅 예제로 익히는 WebRTC - 기능 추가
- WebRTC 외부에서 사용하기 – coturn
구글의 WebRTC 예제는 다음과 같이 기초부터 하나씩 기능을 추가하여 6가지 단계로 구성되어 있다.
- 1단계는 카메라에서 비디오를 추출하는 예제,
- 2단계는 RTCPeerConnection을 이용하여 대화상대에게 비디오를 제공하는 예제 (네트워크없이)
- 3단계는 RTCDataChannel을 이용하여 데이터를 주고 받는 예제
- 4단계는 서버를 이용하여 메시지를 주고 받는 예제 (signaling)
- 5단계는 네트워크 상에서 비디오를 주고 받는 예제
- 6단계는 이미지(데이터)를 공유(제공)하는 예제 이다.
1~3 단계는 네트워크로 상대와 연결하는 것 없이 혼자 실행하는 것으로
다운로드 받은 파일을 탐색기에서 실행해서(웹 브라우저로) 확인할 수 있다.
해당 예제의 설명서에는 크롬(Chrome)의 플러그인인 Web Server를 설치해서 사용하는 방법을 설명하는데,
1~3 단계는 그냥 파일로 실행하며 관련 코드를 확인하고 인터넷으로 해당 설명을 찾아보는 것으로 충분할 것 같다.
4~6단계는 네트워크를 기반으로 하는 예제이기 때문에 NodeJS를 설치해서 웹으로 실행해야 한다.
3단계와 6단계는 데이터를 주고 받는 RTCDataChannel에 대한 것으로,
처음 시작하는 사람에게는 RTCPeerConnection 만으로도 충분이 어렵기 때문에 여기서는 정리하지 않는다.
2단계에서 사용된 RTCPeerConnection은 Peer라는 단어에서 알 수 있겠지만
대화 상대 둘이서 직접 연결해서 대화에 필요한 이미지를 주고 받도록 하는 클래스로
WebRTC로 화상채팅을 구현하기 위해서 꼭 알아야 하는 클래스이다.
정리하면,
카메라에서 비디오를 추출하고(getUserMedia - 1단계),
대화 상대를 찾아서 (signaling - 4단계)
네트워크로 연결하여 (RTCPeerConnection - 2단계)
비디오를 주고 받는 예제로 위 단계를 종합한 예제가 5단계의 예제이다.
즉, 5단계의 예제를 실행하면,
두 대의 장치에서 이미지를 주고 받으며 화상채팅이 되는 것을 볼 수 있다.
따라서, 여기에서는 이 5단계의 예제에 기능을 추가하는 방식을 정리한다.
주의: 예제는 크롬 브라우저에서만 작동한다.
IE, Edge(이전 버전, 최신 edge는 크롬기반으로 작동한다)를 제외하고는 WebRTC를 지원하지만,
예제는 크롬에서만 작동한다. 다른 웹 브라우저에서 실행하려면 별도의 처리가 필요하다.
이 외에도 구글의 예제는 몇 가지 부족한 것 들이 있다.
먼저 WebRTC는 기본적으로 네트워크 연결시 SSL이 있어야 한다.
localhost로 간단하게 비디오 화면을 가져오는 것 외에,
네트워크로 연결해서 데이터를 주고 받으며 화상 채팅을 하려면 SSL이 있어야 한다.
두 번째, 대화 상대를 찾기 위해 사용하는 서버가 한번만 연결 하도록 작성되어서,
한번 채팅을 하고 나면 계속 서버를 재가동해야 한다.
프로그램을 조금이라도 수정하고 확인하려면 계속 서버를 재가동해야 한다.
마지막으로, 해당 예제는 이미지만 주고 받는 화상채팅으로 오디오는 제공되지 않는다.
이상의 3가지 기능을 보강하는 방법은 코드 몇 줄만 추가하면 되는 것으로
이렇게 기능을 보강하다 보면 WebRTC 예제(코드)와 친해지고 개발 능력을 향상 시킬 수 있을 것이다.
본격적으로 이상의 부족한 부분을 보강을 하기 전에,
구글 예제 중 5단계 예제부터 실행 한다.
먼저 Github에서 소스를 다운 받아서 적절한 디렉토리에 설치한다.
git 명령어로 설치하거나 [Download ZIP]을 선택해서 압축 파일을 받아서 설치한다.
주의: 서버가 NodeJS로 구축되어 있기 때문에 NodeJS를 설치한다.
NodeJS는 홈페이지에서 자신의 운영체제에 맞추어 다운로드 받아서 실행하면 된다.
콘솔창(CMD)에서 예제 5(step-05)가 있는 디렉토리로 이동해서 파일을 확인하고
npm i (install) 명령어로 예제 실행에 필요한 라이브러리들을 설치한다.
실행이 끝나면 탐색기에서 node_modules 폴더에 라이브러리들이 설치된 것을 확인할 수 있다.
콘솔창에서 node index.js 을 실행해서 웹 서버를 실행한다.
아무런 메시지도 없이 다음과 같이 커서가 깜박이면 제대로 실행된 것이다.
크롬을 실행해서 주소창에 http://localhost:8080을 입력한다.
다음 그림과 같이 카메라 사용 권한 요청화면에서 [허용]을 선택한다.
그림과 같이 자신의 모습이(?) 웹 브라우저에 나타나는 것을 볼 수 있다.
하지만 다음과 같이 다른 컴퓨터나 휴대폰으로 접속하면, 화면이 나타나지 않는다.
http://서버 IP:8080
참고: 서버 IP는 NodeJS를 실행한 컴퓨터의 콘솔창에서 ipconfig or ifconfig를 입력하면 확인할 수 있다.
localhost가 아닌 IP를 사용하는 경우에는 자신의 컴퓨터에서도 화면이 나타나지 않는다.
카메라에서 이미지를 못가지고 오는 것으로, SSL을 통하지 않으면 카메라(WebRTC)를 이용할 수 없다.
이제, 이러한 문제들을 해결하고, 기능을 추가하는 방법에 대해서 정리한다 (다음 페이지).
참고사항: step-05 폴더에 있는 5 단계 예제의 주요 파일은 다음과 같다.
다음 파일들을 모두 수정하니, 어떤 파일인지, 어떤 코드가 있는지 알고 있어야 한다.
- index.js - NodeJS로 실행한 웹 서버 및 Signaling
- index.html - 사용자가 웹으로 접근했을때, 보여주는 웹페이지. 화상채팅 화면.
- js/main.js - index.html 파일에는 간단한 html 태그만 있고, RTCPeerConnection과 같은 실제 화상채팅을 하는 클라이언트 코드가 모두 여기 있다.
- css/main.css - index.html 에서 사용할 디자인 내용이 작성되어 있다.
'Node.js > WebRTC' 카테고리의 다른 글
| WebRTC 외부에서 사용하기 – coturn (8) | 2020.11.15 |
|---|---|
| 2. 화상 채팅 예제로 익히는 WebRTC - 기능 추가 (34) | 2020.06.28 |