webrtc/localCall.html

<!--
 * Copyright (C) 2016 Ericsson AB. All rights reserved.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *  http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 -->

<!DOCTYPE html>
<html>
<head>
  <title>Local Call</title>
  <link rel="stylesheet" type="text/css" href="../resources/main.css">
  <link rel="icon" href="../resources/favicon.ico">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-promise/3.2.1/es6-promise.min.js"></script>
  <script type="text/javascript" src="https://get.cct.ericsson.net/latest/cct.js"></script>
  <script type="text/javascript" src="../exampleUtils.js"></script>
  <style type="text/css">
    .video-container {
      margin-top: 20px;
    }
  </style>
</head>
<body>
  <header></header>
  <main>
    <section>
      <div class="about">
        <h2>Local Call example</h2>
        This example shows how to connect two <a href="https://get.cct.ericsson.net/latest/docs/reference/Client.html">clients</a> together through a <a href="https://get.cct.ericsson.net/latest/docs/reference/Room.html">room</a>. Once they both have joined the room, a peer-2-peer WebRTC <a href="https://get.cct.ericsson.net/latest/docs/reference/Room.html#startCall__anchor">call</a> is set up.
      </div>
    </section>
    <section>
      <div class="video-container margins small">
        <video id="self1" muted autoplay></video>
        <label>Self view 1</label>
      </div>
      <div class="video-container margins small">
        <video id="self2" muted autoplay></video>
        <label>Self view 2</label>
      </div>
    </section>
    <section>
      <div class="video-container margins medium">
        <video id="remote1" autoplay></video>
        <label>Remote view 1</label>
      </div>
      <div class="video-container margins medium">
        <video id="remote2" autoplay></video>
        <label>Remote view 2</label>
      </div>
    </section>
    <footer></footer>
  </main>
  <script type="text/javascript">
'use strict'

cct.log.setLogLevel(cct.log.ALL)
cct.log.setLogLevel('events', cct.log.NONE)
cct.log.setLogLevel('own-events', cct.log.NONE)
cct.log.color = true

var el = {
  self1: document.getElementById('self1'),
  self2: document.getElementById('self2'),
  remote1: document.getElementById('remote1'),
  remote2: document.getElementById('remote2'),
}

var client1 = new cct.Client({
  iceServers: EXAMPLE_UTILS_ICE_SERVERS,
})
var client2 = new cct.Client({
  iceServers: EXAMPLE_UTILS_ICE_SERVERS,
})

Promise.all([
  cct.Auth.anonymous({serverUrl: getCctAddress()}).then(client1.auth),
  cct.Auth.anonymous({serverUrl: getCctAddress()}).then(client2.auth),
])
.then(joinCallRoom)
.then(setupCall)
.catch(function (error) {
  cct.log.error('error', error)
})

function joinCallRoom() {
  cct.log.info('empty', 'Joining the same room')
  return Promise.all([
    client1.createRoom({
      invite: client2.user,
    }),
    client2.once('invite').then(function (room) {
      return room.join()
    }),
  ])
}

// global vars so we can inspect them in dev console
var source1
var source2
var call1
var call2

function setupCall(rooms) {
  source1 = new cct.DeviceSource()
  source2 = new cct.DeviceSource()
  source1.connect(el.self1)
  source2.connect(el.self2)

  call1 = rooms[0].startCall(client2.user.id)
  call1.setLocalSource('main', source1)
  call1.getRemoteSource('main').connect(el.remote1)

  call2 = rooms[1].startCall(client1.user.id)
  call2.setLocalSource('main', source2)
  call2.getRemoteSource('main').connect(el.remote2)
}

</script>
</body>
</html>