Web - Getting Started

준비사항

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

• WebRTC를 지원하는 모던 브라우저

프로젝트 생성 및 설정

RemoteMonster의 SDK는 브라우저 환경에서 작동합니다. 간단하게 일반적인 웹 프론트엔드 개발 준비를 하면 됩니다.

npm init
npm i http-server
touch index.html
npx http-server
# Open browser "localhost:8081"

SDK 설치 - npm

npm을 통해 간단하게 설치가 가능합니다.

npm i @remotemonster/sdk

import Remon from '@remotemonster/sdk'

index.html

<script src="node_modules/@remotemonster/sdk/remon.min.js"></script>

SDK 설치 - Static Import

jsDelivr CDN을 사용 할 수 있습니다. 아래와 같이 Latest 또는 Specific version을 HTML 파일에 삽입하세요.

index.html

<!-- 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>

개발

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

Service Key

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

Service Key

방송

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

방송 송출

<video id="localVideo" autoplay muted></video>
<script>
const config = {
  view: {
    local: '#localVideo'
  }
}

const caster = new Remon({ config })
caster.createCast()
</script>

방송 시청

<video id="remoteVideo" autoplay></video>
<script>
const config = {
  view: {
    remote: '#remoteVideo'
  }
}

const viewer = new Remon({ config })
viewer.joinCast('CHANNEL_ID')
</script>

혹은 좀더 자세한 내용은 아래를 참고하세요.

Livecast

통신

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

<video id="localVideo" autoplay muted></video>
<video id="remoteVideo" autoplay></video>
<script>
const config = {
  view: {
    local: '#localVideo',
    remote: '#remoteVideo'
  }
}

const remonCall = new Remon({ config })
remonCall.connectCall('CHANNEL_ID')
</script>

혹은 좀더 자세한 내용은 아래를 참고하세요.

Communication