Web - Getting Started

Prerequisites

• Web browser, front-end development environment

• Modern browsers that support WebRTC (Web Real-Time Communication)

Creating and Configuring a New Project

The RemoteMonster SDK works in a browser environment. Simply prepare for common front-end web development.

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

SDK Installation - npm

npm can be used to easily install the SDK..

npm i @remotemonster/sdk

index.html

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

SDK Installation - Static Import

jsDelivr CDN can be used. Insert it into a HTML file as shown below.

index.html

<!-- Latest -->
<script src=""></script>

<!-- Specific version -->
<script src="https://cdn.jsdelivr.net/npm/@remotemonster/sdk@2.0.8/remon.min.js"></script>

Development

Now you are ready for development. Refer to the following for detailed development methods

Service Key

To access the RemoteMonster broadcast and communications infrastructure through the SDK, a Service Id and Key are required. For simple testing and demonstration, you can skip this step. In order to develop and operate the actual service, refer to the following to acquire and apply the Service Id and Key.

pageService Key

Broadcast

Remon can make broadcasting functions easy and fast.

Broadcast Transmission

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

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

Broadcast Viewing

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

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

Or refer to the following for more details.

pageLivecast

Communication

Remon can make communication functions easy and fast.

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

Or refer to the following for more details.