Javascript 개발환경 준비하기

환영합니다.

PlayRTC 세계에 오신것을 환영합니다.

PlayRTC는 쉽고 빠르게 웹기술을 통해 1:1 영상/음성 통신을 할 수 있게하는 플렛폼 입니다.

이 튜토리얼에서는 모던 웹 브라우저와 PlayRTC 자바스크립트 SDK를 통해 쉽고 빠르게 1:1 영상/음성 통화 웹앱을 만들어 보도록 하겠습니다.

환경 준비하기

PlayRTC로 1:1 영상/음성 통화 웹앱을 만들기 위해서는, 간단한 텍스트 에디터와 간단한 웹서버가 필요합니다. 이미 이러한 환경에 익숙 하다면, 다음장으로 곧장 넘어가도 좋습니다. 아니라면 각각 다음과 같이 준비해 보도록 합니다.

테스트 에디터

평상시 사용하는 텍스트 에디터나 IDE 환경을 준비합니다.

간편 하면서도 편리한 모던 에디터를 찾고 있다면, 다음을 추천합니다.

웹 서버

튜토리얼을 진행하기 위해서는 간단한 웹 서버가 필요합니다. 여기서 웹서버는 PlayRTC 웹앱을 실행하는데 필요하며 실제로는 ruby, php, node.js와 같은 서버측의 코드는 전혀 없이 단순히 html파일을 전달하는 정적 웹서버 역할 입니다.

만약 웹서버에 대해 자세히 모른 다면 다음과 같이 node기반의 정적 웹 서버 Harp를 준비합니다.

Harp – node기반 정적 웹 서버

이제 node.js를 설치하고 Harp를 설치하여 웹서버를 준비해 봅시다.

Harpnodejs기반 정적 웹 서버 입니다. node는 브라우저에서 작동하는 자바스크립트를 서버, 시스템 프로그래밍등의 범용으로 사용하기 위해 만든 체계 입니다.

  • node.js설치
  • Harp 설치
    • Windows :
      • PS> npm install -g harp
    • OSX, unix-like :
      • $ npm install -g harp

이제 명령 프롬프트/파워쉘/터미널에서 다음과 같이 실행하면 간단하게 웹서버가 작동합니다.

  • Windows :
    • 사용자의 홈 폴더로 이동합니다.
    • PS> cd %UserProfile%
    • 웹 서버의 루트가 될 www 폴더를 만듭니다.
    • PS> mkdir www
    • www란 폴더로 이동합니다.
    • PS> cd www
    • harp 웹 서버를 실행시킵니다.
    • PS> harp server -p 8000
  • OSX, unix-like :
    • 사용자의 홈 폴더로 이동합니다.
    • $ cd ~
    • 웹 서버의 루트가 될 www폴더를 만든다음 이동합니다.
    • $ mkdir www && cd www
    • harp 웹 서버를 실행시킵니다.
    • $ harp server -p 8000

이제 브라우저를 열고 주소 입력난에 http://localhost:8000/을 입력하면 사용자의 홈폴더/www/폴더에 있는 파일을 http의 웹 통신을 통해 제공(serve)하게 됩니다. 위와 같은 harp 사용법을 익혀두면 앞으로 웹앱을 만들때 여러모로 요긴하게 사용하게 됩니다.

javascript, node.js, Harp에 대해 보다 더 자세한 내용을 알고 싶으면, 아래의 링크를 참고 하면 좋습니다.

기타 웹서버 준비

만약 튜토리얼을 진행하는 컴퓨터에 python, php이 깔려있다면 별도의 준비가 필요 없이 원하는 폴더에서 다음과 같이 입력하기만 하면 웹서버가 가동됩니다.

$ php -S localhost:8000
$ python -m SimpleHTTPServer 8000

Apache httpd, nginx, IIS와 같은 웹서버를 다룰줄 안다면 해당 웹서버를 사용해도 좋습니다.

예제 앱 다운로드

이제 예제앱을 다운로드 받고 준비 해 봅시다.

예제앱은 아래를 통해 압축파일 형태로 다운로드 받을 수 있습니다.

  • https://www.playrtc.com/download/
  • https://github.com/playrtc/
  • https://developers.sktelecom.com/develop/doc/sdk/

혹은 PlayRTC GitHub 저장소에서 Git을 통해 클론받을 수 있습니다.

$ git clone https://github.com/PlayRTC/PlayRTC-Javascript-Tutorial-SimpleChat

이로써 모든 튜토리얼을 개발하기 위한 모든 환경이 갖추어졌습니다. 다음장을 통해 본격적으로 영상/음성 웹앱을 만들어 보도록 하겠습니다.

Git에 대한 설치와 자세한 내용을 알고 싶다면 아래의 링크를 참고하세요.

 

Play RTC

서비스 체험

Play RTC build PlaygrOund

나만의 플레이그라운드를 만들어 친구를 초대해보세요 !

www.playrtc.com/

번거로운 가입이나 설치 없이ID만 만들어서 영상통화나 파일 공유, 채팅 서비스를 무료로 즐겨보세요.

 

Play RTC

서비스 체험

개설한 Playground 주소를 복하해서 친구에게 보내조세요. 친구가 Playground에 접속하면 이곳에 친구의 영상과 음성이 나타납니다. Waiting..

Photo

X
이미지 미리보기
이미지
 

서비스 체험

 

서비스 체험

서비스 체험은 크롬과 파이어폭스 브라우저에 최적화되어 있습니다.
크롬 또는 파이어폭스 브라우저를 설치 후 다시 이용해주세요.