Web - Getting Started

준비사항

  • 웹 브라우저, 프론트엔드 개발 환경
  • WebRTC를 지원하는 모던 브라우저

프로젝트 생성 및 설정

RemoteMonster의 SDK는 브라우저 환경에서 작동합니다. 간단하게 일반적인 웹 프론트엔드 개발 준비를 하면 됩니다.
1
npm init
2
npm i http-server
3
touch index.html
4
npx http-server
5
# Open browser "localhost:8081"
Copied!

SDK 설치 - npm

npm을 통해 간단하게 설치가 가능합니다.
1
npm i @remotemonster/sdk
Copied!
1
import Remon from '@remotemonster/sdk'
Copied!
index.html
1
<script src="node_modules/@remotemonster/sdk/remon.min.js"></script>
Copied!

SDK 설치 - Static Import

jsDelivr CDN을 사용 할 수 있습니다. 아래와 같이 Latest 또는 Specific version을 HTML 파일에 삽입하세요.
index.html
1
<!-- Latest -->
2
<script src="https://cdn.jsdelivr.net/npm/@remotemonster/sdk/remon.min.js"></script>
3
4
<!-- Specific version -->
5
<script src="https://cdn.jsdelivr.net/npm/@remotemonster/[email protected]/remon.min.js"></script>
Copied!

개발

이제 모든 준비가 끝났습니다. 아래를 통해 세부적인 개발 방법을 확인하세요.

Service Key

SDK를 통해 RemoteMonster 방송, 통신 인프라에 접근하려면, Service Id와 Key가 필요합니다. 간단한 테스트와 데모를 위해서라면 이 과정을 넘어가도 좋습니다. 실제 서비스를 개발하고 운영하기 위해서는 아래를 참고하여 Service Id, Key를 발급 받아 적용하도록 합니다.

방송

Remon을 통해 방송 기능을 쉽고 빠르게 만들 수 있습니다.

방송 송출

1
<video id="localVideo" autoplay muted></video>
2
<script>
3
const config = {
4
view: {
5
local: '#localVideo'
6
}
7
}
8
9
const caster = new Remon({ config })
10
caster.createCast()
11
</script>
Copied!

방송 시청

1
<video id="remoteVideo" autoplay></video>
2
<script>
3
const config = {
4
view: {
5
remote: '#remoteVideo'
6
}
7
}
8
9
const viewer = new Remon({ config })
10
viewer.joinCast('CHANNEL_ID')
11
</script>
Copied!
혹은 좀더 자세한 내용은 아래를 참고하세요.

통신

Remon을 통해 통신 기능을 쉽고 빠르게 만들 수 있습니다.
1
<video id="localVideo" autoplay muted></video>
2
<video id="remoteVideo" autoplay></video>
3
<script>
4
const config = {
5
view: {
6
local: '#localVideo',
7
remote: '#remoteVideo'
8
}
9
}
10
11
const remonCall = new Remon({ config })
12
remonCall.connectCall('CHANNEL_ID')
13
</script>
Copied!
혹은 좀더 자세한 내용은 아래를 참고하세요.