Documentation

Working With Quanteec

Introduction

WebRTC-powered streaming offers a great way to improve viewer experience, reduce content delivery cost and diminish the carbon footprint of the streaming media chain. We have partnered with Quanteec eco-friendly peer-assisted streaming solution to make Quanteec technology available with Radiant Media Player.

Stream BETTER, stream GREENER and save costs at the same time! Quanteec offers better scaling performance & better quality for all videos with its peer-assisted streaming solution for HLS and MPEG-DASH.

In this article we will review how to use Quanteec WebRTC-powered streaming solution with Radiant Media Player.

Quanteec is a Radiant Media Player technology alliance partner.

Quanteec is a member of the Greening of Streaming industry forum with Radiant Media Player.

Scope of support

Quanteec support in Radiant Media Player is currently available in HLS and MPEG-DASH for on-demand, live or DVR content in the following environments:

  • Chrome, FireFox, Opera, MS Edge 79+ for Desktop
  • Chrome, FireFox, Opera, Samsung Internet for Android 5+
  • Ionic/Cordova/WebView for Android 5+
  • macOS and iPadOS Safari

All Radiant Media Player features can be used in conjunction with Quanteec technology. Where Quanteec support is not available (e.g. iOS Safari) the player will gracefully fallback to "classic" HLS delivery (e.g. not WebRTC-accelerated). You can obtain further technical information about Quanteec inner workings here.

Usage example

First you will need an account with Quanteec to obtain a Quanteec Key. If you do not already have one you can sign up for Quanteec here.

We will now prepare our player code. To help you out, we have made this as straight-forward as possible: you just need to add the JavaScript Quanteec library and the Radiant Media Player library to your page <head> and configure Radiant Media Player and Quanteec accordingly. For existing Quanteec customers you can also test Quanteec support in Radiant Media Player with our free 14-day trial.

Player code example for HLS streaming

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">
  <title>TODO supply a title</title>
  <!-- Include Quanteec library in your <head> -->
  <script src="https://files.quanteec.com/quanteec/latest/quanteec-hlsjs.min.js"></script>
  <!-- Include Radiant Media Player HLS-optimized library in your <body> or <head> -->
  <script src="https://cdn.radiantmediatechs.com/rmp/9.15.3/js/rmp-hlsjs.min.js"></script>
</head>
<body>
  <!-- Player container element -->
  <div id="rmp"></div>
  <!-- Set up player configuration options -->
  <script>
  // Quanteec configuration
  var configQuanteec = {
    quanteecKey: "your-quanteec-key",
    videoID: "testRMPHLS"
  };
  // Streaming source - HLS
  const src = {
    hls: "https://your-hls-url.m3u8"
  };
  // Then we set our player settings
  const settings = {
    licenseKey: 'your-license-key',
    src: src,
    width: 640,
    height: 360,
    // To enable Quanteec support for Apple devices
    forceHlsJSOnAppleDevices: true,
    autoplay: true
  };
  const rmp = new RadiantMP('rmp');
  rmp.one('hlsinstancecreated', () => {
    const hlsJSInstance = rmp.getHlsJSInstance();
    var quanteecPlayer = new Quanteec(configQuanteec, hlsJSInstance);
  });
  rmp.init(settings);
  </script>
</body>
</html>

Player code example for MPEG-DASH streaming

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">
  <title>TODO supply a title</title>
  <!-- Include Quanteec library in your <head> -->
  <script src="https://files.quanteec.com/quanteec/latest/quanteec-shaka.min.js"></script>
  <!-- Include Radiant Media Player MPEG-DASH optimized library in your <body> or <head> -->
  <script src="https://cdn.radiantmediatechs.com/rmp/9.15.3/js/rmp-shaka.min.js"></script>
</head>
<body>
  <!-- Player container element -->
  <div id="rmp"></div>
  <!-- Set up player configuration options -->
  <script>
  // Quanteec configuration
  var configQuanteec = {
    quanteecKey: "your-quanteec-key",
    videoID: "testRMPShaka"
  };
  // Streaming source - MPEG-DASH
  const src = {
    dash: "https://your-hls-url.mpd"
  };
  // Then we set our player settings
  const settings = {
    licenseKey: 'your-license-key',
    src: src,
    width: 640,
    height: 360,
    autoplay: true
  };
  const rmp = new RadiantMP('rmp');
  rmp.one('shakainstancecreated', () => {
    const shakaPlayerInstance = rmp.getShakaPlayerInstance();
    var quanteec = new Quanteec(configQuanteec, shakaPlayerInstance);
  });
  rmp.init(settings);
  </script>
</body>
</html>

Visualize Quanteec data

Add the following script to your <head> before the Quanteec script

<script src="https://files.quanteec.com/vizualisation/latest/quanteec-visualize.min.js"></script>

Add the following HTML element after player container

<div id="quanteec-visualize-tool" style="font-size: 11px; flex: 0 0 90%;max-width:70%;" quanteecShow="less"></div>

We have seen great results when using Quanteec peer-assisted solution with Radiant Media Player including faster player start-up and reduced buffering, significant content delivery cost reduction, increased scalability and ultimately happier viewers.

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License.

Radiant Media Player

Support

Company

©2015-2024 Radiant Media Player. All Rights Reserved.