새 통화 프로젝트 설정 - Web

준비사항

  • Project ID (Service ID) 키 발급
  • 웹 브라우저, 프론트엔드 개발 환경
  • WebRTC를 지원하는 브라우저

프로젝트 생성 및 설정

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

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

jsDelivr CDN에 있는 RemoteMonster SDK를 이용할 수 있습니다. 아래와 같이 Latest 또는 Specific version을 HTML 파일에 삽입하십시오.
adapter.js 최신 버전을 remon.js 앞에 삽입해주십시오. 웹 브라우저 호환성을 위해 권장합니다.
index.html
<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/[email protected]/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파일의 예시는 다음과 같습니다.
index.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 클래스에 대한 이해가 필요합니다.
프로젝트 설정을 완료했습니다. 이어서 기능을 구현에 대해 알아봅니다.
Copy link
On this page
준비사항
프로젝트 생성 및 설정
CDN으로 라이브러리 추가 (권장)
NPM으로 라이브러리 다운로드
Service Id, Service Key 입력