experimental/multiClientConferenceCall.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>
  <meta charset="utf-8">
  <title>MultiClientConferenceCall</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>
    .remoteVideo {
      max-width: 16vw;
      max-height: 9vw;
      margin-top: 1vw;
      border: solid white 1px;
    }
  </style>
</head>
<body>
  <header></header>
  <main>
    <section>
      <div class="about">
        <h3>Multi Client Conference Call example</h3>
        This advanced example shows how a complete conferencing application can be built using <a href="https://get.cct.ericsson.net/latest/docs/reference/Conference.html">Conference</a>, <a href="https://get.cct.ericsson.net/latest/docs/reference/ConferenceSwitcher.html">ConferenceSwitcher</a>, <a href="https://get.cct.ericsson.net/latest/docs/reference/ThumbnailBroadcaster.html">ThumbnailBroadcaster</a> and <a href="https://get.cct.ericsson.net/latest/docs/reference/MediaBroadcaster.html">MediaBroadcaster</a>.
      </div>
      <div class="peer-link">
        <h3 class="peer-link-title"></h3>
        <input class="peer-link-input" type="url" value="" size="55">
      </div>
    </section>
    <div class="margins centered column">
      <div class="video-container large">
        <video id="bigVideo" muted autoplay></video>
        <label>Active speaker</label>
      </div>
      <div id="remoteVideoContainer" class="row"></div>
      <div id="controlsContainer" class="row">
        <button class="margins" type="button" id="audioButton">Microphone: On</button>
        <button class="margins" type="button"  id="videoButton">Camera: On</button>
      </div>
    </div>
    <footer></footer>
  </main>
  <script type="text/javascript">
'use strict'

cct.log.setLogLevel('example', cct.log.ALL)
cct.log.setLogLevel('conference', cct.log.DEBUG)
cct.log.setLogLevel('media-broadcaster', cct.log.DEBUG)
cct.log.setLogLevel('conference-switcher', cct.log.DEBUG)
cct.log.setLogLevel('thumbnail-broadcaster', cct.log.DEBUG)
cct.log.color = true

var bigVideo = document.getElementById('bigVideo')
var remoteVideoContainer = document.getElementById('remoteVideoContainer')
var videoSource
var audioSource
var client
var room
var conference
var audioBroadcaster
var thumbnailBroadcaster
var thumbnailRenderer

cct.webRtcReady()
  .then(setupMediaSources)
  .then(setupConference)
  .then(setupSwitcher)
  .then(setupVideoBroadcaster)
  .then(setupAudioBroadcaster)
  .then(setupButtonListeners)
  .catch(function (err) {
    cct.log.error('example', 'Failed to setup conference, ' + err)
  })

function setupMediaSources() {
  cct.log.info('example', 'setting up media sources')
  // We could use StreamSplitter instead of two sources, but only if we're not aiming to support WebRTC plugins
  videoSource = new cct.DeviceSource({
    video: {
      aspectRatio: 16 / 9,
    },
  })
  audioSource = new cct.DeviceSource({audio: true})
}

function setupConference() {
  cct.log.info('example', 'setting up client')
  client = new cct.Client({
    iceServers: EXAMPLE_UTILS_ICE_SERVERS,
  })
  return PeerConnecter.clientInRoom(client).then(function (connecter) {
    cct.log.info('example', 'setting up conference')
    room = connecter.room
    // switcherMode: 'automatic' is switching based on voice activity
    conference = room.startConference({switcherMode: 'automatic'})
  })
}

function setupSwitcher() {
  cct.log.info('example', 'setting up switcher')

  videoSource.connect(conference.switcher)
  conference.switcher.connect(bigVideo)
  conference.switcher.on('speaker', function (newActive) {
    cct.log.info('example', 'Switched to ' + newActive)
  })
}
var ads = []
function setupAudioBroadcaster() {
  cct.log.info('example', 'setting up audio broadcast')

  let audioBroadcaster = cct.MediaBroadcaster.createAudioBroadcaster()
  audioSource.connect(audioBroadcaster)
  conference.attach('audio', audioBroadcaster)
}

function setupVideoBroadcaster() {
  cct.log.info('example', 'setting up video broadcast')
  thumbnailBroadcaster = new cct.ThumbnailBroadcaster({
    projectionConfiguration: {
      width: 100,
      aspectRatio: 16/9,
      contentMode: 'aspectFill',
    },
    videoFrameRate: 10,
    imageFrameRate: 1,
  })

  thumbnailRenderer = thumbnailBroadcaster.createRenderer({
    elementClass: 'remoteVideo',
  })
  // As users join and leave the conference their thumbnail elements will
  // be added and removed. The elements here can be either video or image
  // elements, depending on what the connection between the two users allows.
  thumbnailRenderer.on('added', function (added) {
    added.forEach(function (element) {
      remoteVideoContainer.appendChild(element)
    })
  })
  thumbnailRenderer.on('removed', function (removed) {
    removed.forEach(function (element) {
      remoteVideoContainer.removeChild(element)
    })
  })

  videoSource.connect(thumbnailBroadcaster)
  conference.attach('thumbnailBroadcaster', thumbnailBroadcaster)
}

function setupButtonListeners() {
  cct.log.info('example', 'setting up button listeners')
  var audioButton = document.getElementById('audioButton')
  var videoButton = document.getElementById('videoButton')

  audioButton.onclick = function () {
    audioSource.mute.audio = !audioSource.mute.audio
    audioButton.innerText = audioSource.mute.audio ? 'Microphone: Off' : 'Microphone: On'
  }
  videoButton.onclick = function () {
    videoSource.mute.video = !videoSource.mute.video
    videoButton.innerText = videoSource.mute.video ? 'Camera: Off' : 'Camera: On'
  }
}
  </script>
</body>
</html>