Web - Getting Started
- 웹 브라우저, 프론트엔드 개발 환경
- WebRTC를 지원하는 모던 브라우저
RemoteMonster의 SDK는 브라우저 환경에서 작동합니다. 간단하게 일반적인 웹 프론트엔드 개발 준비를 하면 됩니다.
npm init
npm i http-server
touch index.html
npx http-server
# Open browser "localhost:8081"
npm을 통해 간단하게 설치가 가능합니다.
npm i @remotemonster/sdk
import Remon from '@remotemonster/sdk'
index.html
<script src="node_modules/@remotemonster/sdk/remon.min.js"></script>
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/[email protected]/remon.min.js"></script>
이제 모든 준비가 끝났습니다. 아래를 통해 세부적인 개발 방법을 확인하세요.
SDK를 통해 RemoteMonster 방송, 통신 인프라에 접근하려면, Service Id와 Key가 필요합니다. 간단한 테스트와 데모를 위해서라면 이 과정을 넘어가도 좋습니다. 실제 서비스를 개발하고 운영하기 위해서는 아래를 참고하여 Service Id, 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>
혹은 좀더 자세한 내용은 아래를 참고하세요.
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>
혹은 좀더 자세한 내용은 아래를 참고하세요.
Last modified 3yr ago