v2.x
Android
Common
새 방송 프로젝트 설정 - Web
준비사항
- 웹 브라우저, 프론트엔드 개발 환경
- WebRTC를 지원하는 브라우저
프로젝트 생성 및 설정
웹 브라우저에서 RemoteMonster를 이용할 때에는 JavaScript 라이브러리를 이용합니다. 일반적인 웹 프론트엔드 개발 준비를 하면 됩니다.
CDN으로 라이브러리 추가 (권장)
jsDelivr CDN에 있는 RemoteMonster SDK를 이용할 수 있습니다. 아래와 같이 Latest 또는 Specific version을 HTML 파일에 삽입하십시오.
adapter.js 최신 버전을 remon.js 앞에 삽입해주십시오. 웹 브라우저 호환성을 위해 권장합니다.
index.html
1
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
2
3
<!-- Latest -->
4
<script src="https://cdn.jsdelivr.net/npm/@remotemonster/sdk/remon.min.js"></script>
5
6
<!-- 또는 -->
7
8
<!-- Specific version -->
9
<script src="https://cdn.jsdelivr.net/npm/@remotemonster/[email protected]/remon.min.js"></script>
Copied!
NPM으로 라이브러리 다운로드
npm으로 최신 버전을 다운로드 할 수 있습니다. node_modules/webrtc-adapter/out/adapter.js 파일과 node_modules/@remotemonster/sdk/remon.min.js 파일을 HTML 파일에 위 예시를 참고하여 삽입하십시오.
1
npm install @remotemonster/sdk
2
npm install webrtc-adapter
Copied!
Service Id, Service Key 입력
remon.min.js 파일을 추가한 뒤에 다음과 Service Id와 Key를 입력합니다.
1
<script>
2
const config = {
3
credential: {
4
serviceId: 'myServiceId',
5
key: 'myKey'
6
}
7
}
8
9
// config는 다음과 같이 새로운 Remon 객체를 생성할 때 인자로 사용합니다.
10
// const caller = new Remon({config: config});
11
</script>
Copied!
설정이 완료된 HTML파일의 예시는 다음과 같습니다.
index.html
1
<!DOCTYPE html>
2
<html lang="ko">
3
4
<head>
5
<meta charset="utf-8">
6
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7
</head>
8
9
<body>
10
11
12
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
13
<script src="https://cdn.jsdelivr.net/npm/@remotemonster/sdk/remon.min.js"></script>
14
<script>
15
const config = {
16
credential: {
17
serviceId: '발급 받은 Service Id를 입력',
18
key: '발급 받은 Service Key를 입력'
19
}
20
}
21
</script>
22
</body>
23
24
</html>
Copied!
이 HTML 파일을 https가 지원되는 웹 서버에 업로드 하고 테스트합니다. 반드시 https에서 테스트하십시오.
RemoteMonster를 이용한 개발은 Remon 클래스에 대한 이해가 필요합니다.
프로젝트 설정을 완료했습니다. 이어서 기능을 구현에 대해 알아봅니다.
Last modified 2yr ago