RemoteMonster Documents
HomepageBlogCommunityAbout Us
v2.x
v2.x
  • RemoteMonster
  • Overview
    • Flow
    • Structure
    • Examples
    • Features
    • Spec
  • Web
    • Web - Overview
    • Web - Getting Started
    • Web - Media
    • Web - Debug Inside
    • Web - Github
    • Web - SDK Reference
  • Android
    • Android - Overview
    • Android - Getting Started
    • Android - Media
    • Android - ProGuard
    • Android - Github
    • Android - SDK Reference
  • iOS
    • iOS - Overview
    • iOS - Getting Started
    • iOS - Media
    • iOS - Github
    • iOS - SDK Reference
  • api
    • Webhook API - Livecast - beta
    • Managing Channels
  • Common
    • Service Key
    • Config/RemonConfig
    • Livecast
    • Communication
    • Callbacks
    • Channel
    • Channel ID 규칙
    • Network Environment
    • Studio Environment
    • Media
    • Simulcast
    • Record - beta
    • Error
    • About WebRTC
    • FAQ
  • 그룹통화
    • 그룹통화 만들기(Android)
    • 그룹통화 만들기(iOS)
    • 그룹통화 만들기(Web)
  • 튜토리얼 - 통화
    • 통화 5 분 안에 시작하기
    • 통화 키 발급
    • 새 통화 프로젝트 설정 - Web
    • 단순 통화 앱 만들기 - Web
  • 튜토리얼 - 방송
    • 방송 5 분 안에 시작하기
    • 방송 키 발급
    • 새 방송 프로젝트 설정 - Web
    • 단순 시청 앱 만들기 - Web
Powered by GitBook
On this page
  • 준비사항
  • 프로젝트 생성 및 설정
  • CDN으로 라이브러리 추가 (권장)
  • NPM으로 라이브러리 다운로드
  • Service Id, Service Key 입력
  1. 튜토리얼 - 통화

새 통화 프로젝트 설정 - Web

Previous통화 키 발급Next단순 통화 앱 만들기 - Web

Last updated 5 years ago

준비사항

  • Project ID (Service ID)

  • 웹 브라우저, 프론트엔드 개발 환경

  • WebRTC를 지원하는 브라우저

프로젝트 생성 및 설정

웹 브라우저에서 RemoteMonster를 이용할 때에는 JavaScript 라이브러리를 이용합니다. 일반적인 웹 프론트엔드 개발 준비를 하면 됩니다.

CDN으로 라이브러리 추가 (권장)

CDN에 있는 RemoteMonster SDK를 이용할 수 있습니다. 아래와 같이 Latest 또는 Specific version을 HTML 파일에 삽입하십시오.

adapter.js 최신 버전을 remon.js 앞에 삽입해주십시오. 웹 브라우저 호환성을 위해 권장합니다.

<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>

<!-- Latest -->
<script src="https://cdn.jsdelivr.net/npm/@remotemonster/sdk/remon.min.js"></script>

<!-- 또는 -->

<!-- Specific version -->
<script src="https://cdn.jsdelivr.net/npm/@remotemonster/sdk@2.0.8/remon.min.js"></script>

NPM으로 라이브러리 다운로드

npm으로 최신 버전을 다운로드 할 수 있습니다. node_modules/webrtc-adapter/out/adapter.js 파일과 node_modules/@remotemonster/sdk/remon.min.js 파일을 HTML 파일에 위 예시를 참고하여 삽입하십시오.

npm install @remotemonster/sdk
npm install webrtc-adapter

Service Id, Service Key 입력

remon.min.js 파일을 추가한 뒤에 다음과 Service Id와 Key를 입력합니다.

<script>
const config = {
  credential: {
    serviceId: 'myServiceId', 
    key: 'myKey'
  }
}

// config는 다음과 같이 새로운 Remon 객체를 생성할 때 인자로 사용합니다.
// const caller = new Remon({config: config});
</script>

설정이 완료된 HTML파일의 예시는 다음과 같습니다.

<!DOCTYPE html>
<html lang="ko">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>


  <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@remotemonster/sdk/remon.min.js"></script>
  <script>
    const config = {
      credential: {
        serviceId: '발급 받은 Service Id를 입력',
        key: '발급 받은 Service Key를 입력'
      }
    }
  </script>
</body>

</html>

이 HTML 파일을 https가 지원되는 웹 서버에 업로드 하고 테스트합니다. 반드시 https에서 테스트하십시오.

RemoteMonster를 이용한 개발은 Remon 클래스에 대한 이해가 필요합니다.

프로젝트 설정을 완료했습니다. 이어서 기능을 구현에 대해 알아봅니다.

키 발급
jsDelivr
Remon 클래스 알아보기
단순 통화 앱 만들기(Web)