SW 개발이 좋은 사람

WebRTC는 개인간 연결(Peer to Peer)을 기본으로 하기 때문에

실행되는 단말기(PC, 휴대폰등)가 공인 IP를 가지거나 같은 네트워크(공유기) 안에서 서로 인식 할 수 있어야 한다.

하나는 공유기 안에 있고, 다른 하나는 공유기 밖에 있다면 통신을 할 수 없다.

즉, 앞서서 정리한 화상채팅용 WebRTC 예제는 같은 공유기 내에서만 실행된다.

이 경우 각 단말기는 공인 IP를 가진 서버(Server)를 경유해서 통신해야 하고,

coturn서버는 WebRTC가 이렇게 통신할 수 있도록 중계 서버 역할을 해주는 오픈 소스 프로그램이다.

(이런 서버를 Turn 서버라고 한다. Turn / Stun의 개념은 인터넷으로 쉽게 찾을 수 있다.)

coturn 서버의 설치 절차는 간단하고 쉽지만 (설치 자료를 쉽게 찾을 수 있다),

리눅스에서만 사용할 수 있고,

외부에서 접근하기 위해 공인 IP를 가진 서버에 설치해야 하기 때문에 공유기를 사용하는 환경(집)에서는 한계가 있다. 

따라서, 여기에서는 coturn 설치 절차나 사용 방법을 정리하지 않고,

다음과 같이 공유기(집)를 사용하는 환경에서 coturn 서버를 설치해서 운영하기 위해 필요한 것들을(링크자료) 간단하게 정리한다.

1. WSL 설치: Linux 설치를 위해
2. 공유기 사용시 포트포워딩: 공인 IP 사용
3. coturn 설치 후 테스트
4. 예제와 연동

공인 IP를 가진 리눅스 서버가 있는 경우 1번과 2번은 넘어가도 무방하다.

1. WSL 설치

coturn을 사용하기 위해서는 리눅스가 필요한데,

Windows 10 에서는 WSL(Windows Subsystem for Linux)로 쉽게 설치해서 사용할 수 있다.

도커(Docker), VirtualBox 같은 가상화 소프트웨어를 사용해도 좋지만,

개인적인 호기심과 저사양 노트북을 쓰는 관계로 WSL을 사용해서 coturn 서버를 구축했다.

WSL의 설치는 여기에서 제공하는 내용을 따라서 진행하면 된다.

Ubuntu 설치시 로그인을 요청하는데, 계정이 없다면 로그인 창을 그냥 닫아도 설치된다.

이 내용의 하단에 있는 도커는 설치 하지 않아도 되고, WSL로 우분투(UBUNTU)를 설치한다.

WSL의 단점은 WSL로 설치한 운영체제의 IP가 재부팅 할 때 마다 변경된다는 것이다.

이 문제는 이 글에서 정리한 스크립트를 실행해서 해결한다.

WSL로 우분투를 설치한 경우 텔넷(telnet)이 기본으로 설치되어 있지 않다.

개인적으로 윈도우즈 콘솔(cmd, Terminal) 화면을 좋아하지 않아서, WSL등으로 리눅스를 실행하고 텔넷으로 접속해서 사용하는 것을 선호한다.

이경우 SSH등을 지원하게 설치해서(apt install openssh-server) 사용하는 것이 좋다.

2. 공유기 사용시 포트포워딩

다음으로, 외부에서 WSL로 설치한 리눅스에 접속할 수 있도록 지정해야 한다.

[공유기 포트포워딩] 인터넷을 검색해보면 쉽게 자료를 구할 수 있다.

사용하는 공유기에 따라 설정이 다르기 때문에 제조사를 포함해서 검색하면 변경 방법을 찾을 수 있다.

Coturn 서버외에 화상 채팅을 사용하려는 사용자들이 접속해서 채팅을 시작할 수 있도록 도와주는 웹 서버도 외부에서 접속해야 한다.

이 웹 서버(WerbRTC 예제 참조)도 같이 리눅스 서버에서 실행시키고 외부에서 접근할 수 있게 한다.

그리고 다음과 같이 웹 서버에서 사용하는 3000과 443 포트를 지정하고,

Coturn 서버에서 사용하는 3478과 5349 포트를 지정해 준다.

다음 리스트에서 포트 외에 지정된 [내부 IP 주소]는 WSL이 실행된 노트북(PC)의 내부 IP이다.

포트 포워딩이 잘 되었는지 확인하려면, NodeJS로 만든 WebRTC 예제를 다운 받아서 리눅스에 설치한다.

NodeJS를 설치하고 WebRTC 예제를 복사해서 실행하면 된다.

이 예제를 내부 IP가 아닌 공인 IP로 접속할 수 있으면 포트 포워딩이 잘 이루어진 것이다.

coturn 서버를 설치하고 잘 실행되는지 확인하려면 WebRTC 예제가 있어야 한다.

자신의 외부(공인) IP는 다음과 같이 포털에서 ip로 검색하면 된다.

3. coturn 설치 후 테스트

Coturn 설치는 인터넷 자료가 많으니 검색해 보거나, 다음 자료를 참고하면 된다.

          buttercoconut.xyz/247/

          meetrix.io/blog/webrtc/coturn/installation.html

          www.omegaduck.com/2019/08/12/sturn-turn-%EC%84%9C%EB%B2%84-%EA%B5%AC%EC%84%B1/

설치시 완성된 서비스를 제공하는 것이 아니기 때문에 SSL(TLS)을 설치하지 않아도 되고,

도메인도 사용할 필요 없이 공인 IP만 지정해서 사용한다.

Coturn 설치 후 설치가 잘 되었는지, turnutils_uclient 를 이용하여 다음과 같이 확인한다.

     turnutils_uclient -t -u 계정 -w 비밀번호 공인IP

공인 IP 대신에 내부 IP를 지정해서, coturn 서버는 잘 설치되었는데, 포트 포워딩이나 방화벽 문제로 외부에서 접속이 안되는지 확인하는 하는 용도로도 사용할 수 있다.

또는 ICE 사이트에서 다음 그림과 같이 확인 할 수 있다.

설치한 coturn 서버 정보를 입력한 후에 [Gather candidates]를 누르면, 설치가 제대로 된 경우 그림과 비슷한 결과를 얻을 수 있다.

위 그림과 다른 결과가 나온다면 coturn 설정이나 방화벽 설정 등을 다시 확인해야 한다.

4. 예제와 연동

앞서 정리한 WebRTC 예제를 설치하고

설치한 Turn 서버 정보를 입력기 위해, main.js 파일에서 다음과 같이 수정한다.

설치한 coturn 서버의 정보를 pcConfig 변수에 지정하고, 이 pcConfig를 WebRTC를 실행할때(new RTCPeerConnection) 지정한다.

이 WebRTC 예제는 구글 예제를 기반으로 작성한 것으로, 구글의 WebRTC 설명용으로 작성된 코드로 짐작되지만 사용하지 않는 코드가 있다.

예로 main.js 파일에서 requestTurn로 검색되는 코드는 사용하지 않는 코드로 Turn 서버 접속에 문제를 만들 수 있다.

코드를 확인해서 삭제하는 것이 좋다.

이제 하나는 공유기 안에서 WebRTC 서버에 접속하고, 하나는 휴대폰으로(둘다 휴대폰) 접속해서 화상 통화가 잘 실행되는지 확인한다.

ImageEditor9은 모바일 전용 자바스크립트 이미지 편집기로,

모바일의 특징을 고려하여 모바일에서 손쉽게 이미지를 편집할 수 있도록 제작하였다.

소스는 github에서 받을 수 있고, 데모도 확인할 수 있다.

여기에서는 ImageEditor9의 주요 이미지 편집 기능과 자바 스크립트로 실행하는 방법을 정리한다.

1. 이미지 편집 기능

모바일용 이미지 편집기이기 때문에 기본적인 편집 기능은 손가락 터치를 활용한 편집 기능이다.

이미지를 한 손가락으로 누른 체 이동하면 이미지의 위치를 옮길 수 있다.

손가락 두 개를 터치한 경우에는 상황에 따라 확대/축소를 하거나 회전하도록 구현하였다.

두 손가락을 대고 좁히거나 넓히면 확대 / 축소를,

두 손가락을 옆으로 움직이면 이미지를 회전 시킬 수 있다

(구현 알고리즘은 기울기를 계산하여 수직 이동에 가까우면 확대 축소를, 수평이면 회전시키는 방식이다.)

메뉴를 이용한 편집 기능은 메인 메뉴를 클릭하면 위 그림처럼 세로로 메뉴가 나타난다.

제공되는 메뉴는 다음과 같고, 순서데로 가로/세로 크기변경, 좌우 회전, 확대/축소의 편집기능과 나가기, 저장 기능이 있다.

손가락을 이용해서 사용하는 회전과 크기 조정 기능을 메뉴를 이용하여 사용할 수도 있다.

회전 기능은 왼쪽과 오른쪽으로 10도씩 이동할 수 있다.

크기 조정은 10% 단위로 크기로 확대하거나 축소할 수 있다.

비슷한 회전 기능으로 이미지의 크기를 변경하면서 90도로 회전하는 가로/세로 크기변경 기능이 있다.

즉, 앞서의 첫 그림과 같이 가로와 세로의 크기가 바뀌는 기능을 (오른쪽 그림) 제공한다.

모바일은 기기를 회전 시켜서 사진을 찍는 경우가 많아서 구현한 기능이다.

편집한 이미지는 저장하거나, 저장없이 프로그램을 종료할 수 있다.

2. 사용방법

이러한 모바일 전용 이미지 편집기 ImageEditor9은 자바스크립트(JavaScript) 라이브러로, 다음과 같이 자바스크립트로 간단하게 실행 할 수 있다.

먼저, 사용하고자 하는 HTML 파일에서 ImageEditor9 라이브러리(ImageEditor9.js)와 디자인(ImageEditor9.css) 파일을 포함한다.

<link rel="stylesheet" href="imageEditor9.css">
<script src="imageEditor9.js"></script>

ImageEditor9은 이미지 편집을 하려고 할 때 생성해도 되고,

다음과 같이 HTML 문서가 로딩되고(onload) 나면 미리 생성해도(new) 된다.

  window.onload = function() { 
    img = document.getElementById('img1');
    imageEditor = new ImageEditor9 (document.getElementById("imageEditor9"));
    imageEditor.onSave = function() {
      img.src = imageEditor.toDataURL();
    }
  }

ImageEditor9을 생성할 때(new) 이미지 편집기능을 구현한 div 태그(다음 코드)를 매개 변수로 지정한다.
( document.getElementById("imageEditor9") )

이 div 태그 안에 ImageEditor9에 필요한 내용들을 생성해서 편집 기능을 사용한다.

ImageEditor9을 생성하고 나면,

ImageEditor9에서 편집한 이미지를 받아서 처리할 저장(onSave) 이벤트를 지정해야 한다.

여기에서는 편집한 이미지를 Base64로 받아서(toDataURL), 원본 이미지(img) 태그의 이미지를(src) 교체한다.

실제 사용할 경우에는 편집한 이미지 정보를 서버로 전송해서 저장하는 형태로 사용할 것이다.

<body>
  <div id="imageEditor9"></div>
</body>

이렇게 생성한 ImageEditor9은 showFullscreen() 함수로 화면에 보이도록 실행한다.

그리고, 편집할 이미지 원본을 지정하면(setImageSource), ImageEditor9에서 해당 이미지를 편집 할 수 있다.

  function ev_fullEditor(){
    imageEditor.showFullscreen();
    imageEditor.setImageSource(img);
  }
  

showFullscreen() 함수외에도 showFulldocument()함수가 제공된다.

showFullscreen() 함수는 모바일의 작은 화면을 최대한 활용하기 위해,

스크린 전체를 편집화면으로(requestFullscreen()) 사용하는 기능으로

웹브라우저에서 F11을 눌렀을때, 전체 화면으로 표시되는 기능을 이용한 것이다.

이 기능은 애플의 사파리(Safari)에서 동작하지 않기 때문에 showFulldocument() 함수를 제작하였다.

showFullscreen() 함수로 실행해도 애플의 사파리(Safari)에서는 showFulldocument()로 실행된다.

showFulldocument()는 스크린이 아닌 문서에 꽉찬 실행으로 팝업 다이얼로그와 같은 방식으로 구현했다.

이상으로 ImageEditor9은 모바일 전용 자바스크립트 이미지 편집기의 편집 기능과 사용방법에 대해서 정리하였다.

ImageEditor9은

모바일의 특징인 손가락을 이용한 편집 기능과 

모바일의 작은 화면을 극복하기 위해 전체 화면으로 이미지를 편집할 수 있는 기능에 맞추어 제작하였다.

WebRTC는 구글에서 공유한 웹 기반 커뮤니케이션 라이브러리로, 별도의 설치 없이 웹 브라우저에서 화상채팅을 할 수 있는 기능을 제공한다.

WebRTC는 화상채팅, 음성채팅 등을 쉽게 제작할 수 있도록 도와주며,몇 번의 검색만으로 다음과 같이 다양한 설명과 예제 소스를 구할 수 있다.

      WebRTC 개념 및 각종 개념 설명

      화상채팅 예제

      WebRTC 각종 예제

대부분이 개념 설명과 코드 사용법을 중심으로 설명했는데,

여기에서는 개념 설명 없이 구글에서 제공하는 예제에 여러 가지 기능을 추가하는 방식으로 정리한다.

WebRTC는 제법 어려운(낯선) 내용들이 많고,

NodeJS, SSL, Soeket.IO, HTML, CSS 등의 부가적인 것에 대해서도 알아야 한다.

여기에서 간단하게 예제를 구현해 보면서 WebRTC 개발에 대한 재미를 느낀 뒤에,

본격적으로 관련된 깊이 있는 내용들을 찾아보면 좋을 것이다.

하지만, 최소한의 기본 개념은 있어야 하니,

WebRTC 개념 및 각종 개념에 대한 설명은 한번 쯤 읽어보고 다음 내용을 따라 하는 것이 좋다.

1. 화상 채팅 예제로 익히는 WebRTC - 기본 예제
2. 화상 채팅 예제로 익히는 WebRTC - 기능 추가
3. 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 에서 사용할 디자인 내용이 작성되어 있다.