screen-sharing/screenSharing.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>Screen sharing</title>
  <link rel="stylesheet" type="text/css" href="../resources/main.css">
  <link rel="icon" href="../resources/favicon.ico">
  <script type="text/javascript" src="https://get.cct.ericsson.net/latest/cct.js"></script>
  <style>
    #error-display {
      color: #f00;
    }
    video {
      width: 100%;
    }
  </style>
</head>
<body>
  <header></header>
  <main>
    <section>
      <div class="about">
        <h3>Screen sharing example</h3>
        This example shows how to use a <a href="https://get.cct.ericsson.net/latest/docs/reference/ScreenSource.html" target="_blank">ScreenSource</a>. The code for the Chrome extension can be found <a href="https://github.com/Ericsson/c3-web-examples/tree/gh-pages/screen-sharing/chrome-extension" target="_blank">here</a>, and Firefox <a href="https://github.com/Ericsson/c3-web-examples/tree/gh-pages/screen-sharing/firefox-extension" target="_blank">here</a>.
      </div>
    </section>
    <div class="margins">
      <div>
        <a href="https://chrome.google.com/webstore/detail/c3-example-extension/epajpkbdigdpepgncdpmilaoamkjgoah" target="_blank">
          Chrome extension
        </a>
      </div>
      <div>
        <a href="firefox-extension/ericsson_c3_screen_sharing-0.0.2-fx.xpi" target="_blank">
          Firefox extension
        </a>
      </div>
      <br>
      <button id="sharing-button">Start screen sharing</button>
      <div id="error-display"></div>
      <video autoplay muted></video>
    </div>
    <footer></footer>
  </main>
  <script type="application/javascript">
'use strict'

cct.log.setLogLevel(cct.log.ALL)
cct.log.color = true

var el = {
  button: document.getElementById('sharing-button'),
  error: document.getElementById('error-display'),
  video: document.querySelector('video'),
}

var screenshareSource

el.button.addEventListener('click', function () {
  if (screenshareSource) {
    screenshareSource.stop()
    screenshareSource = null
    el.button.textContent = 'Start screen sharing'
  } else {
    el.button.disabled = true

    screenshareSource = new cct.ScreenSource({
      chromeExtensionId: 'epajpkbdigdpepgncdpmilaoamkjgoah',
      audio: false,
      video: {
        frameRate: 5,
      },
    })
    screenshareSource.connect(el.video)
    screenshareSource.promise.then(function () {
      cct.log.info('example', 'screen sharing started successfully')
      el.button.textContent = 'Stop screen sharing'
      el.button.disabled = false
    }, function (error) {
      cct.log.info('example', 'screen sharing failed, ' + error)
      el.button.disabled = false
      el.error.textContent = error.toString()
      screenshareSource = null
    })
  }
})
  </script>
</body>
</html>