Getting Started

Preparations

  • Web browser and frontend development environment

  • Modern browser supporting WebRTC

Creating and Configuring Project

elasticlive runs in a browser environment. What you need to do is simply preparing to develop a general web frontend.

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

Installing SDK - npm

You can easily install by using npm.

npm i @elasticlive/sdk
npm i webrtc-adapter #Optional lib for lagacy WebRTC API support
import ELive from '@elasticlive/sdk'
index.html
<!-- Optional lib for lagacy WebRTC API support -->
<script src="node_modules/webrtc-adapter/out/adapter.js"></script>
<script src="node_modules/@elasticlive/sdk/dist/ELive.min.js"></script>

Installing SDK - Static Import

You can use jsDelivr CDN. Please insert in the HTML file as follows.

index.html
<!-- Optional lib for lagacy WebRTC API support -->
<script src="https://cdn.jsdelivr.net/npm/webrtc-adapter/out/adapter.js"></script>
<!-- Latest -->
<script src="https://cdn.jsdelivr.net/npm/@elasticlive/sdk"></script>
<!-- Specific version -->
<script src="https://cdn.jsdelivr.net/npm/@elasticlive/sdk@3.0.0/dist/ELive.min.js"></script>

Developing

The actual running code is provided as follows. Check it out now.

Service Key

You need Service Id and Key. You may skip this step to simply test and demonstrate. In order to actually develop and run services, issue and apply Service Id and Key by referring to the Credential of the console.

1:N

Broadcasting

<video id="localVideo" autoplay muted></video>
<script>
const config = {
view: {
local: '#localVideo'
}
}
const live = new ELive({ config })
live.cast('myBroadCast')
</script>

Watching

<video id="remoteVideo" autoplay></video>
<script>
const config = {
view: {
remote: '#remoteVideo'
}
}
const live = new ELive({ config })
live.watch('myBroadCast')
</script>

1:1

<video id="localVideo" autoplay muted></video>
<video id="remoteVideo" autoplay></video>
<script>
const config = {
view: {
local: '#localVideo',
remote: '#remoteVideo'
}
}
const live = new ELive({ config })
live.call('myCall')
</script>

Methods

close()

Disconnect the return resources.

live.close()

Import the list of current broadcast and communication.

live.search()

switchCamera()

Change over the camera.

live.switchCamera()

captureScreen()

Capture the screen.

live.captureScreen()

sendMessage()

Send a message to another user.

live.sendMessage()