Skip to main content

Use QUANTEEC plugin with Chromecast

note

The QUANTEEC plugin for Chromecast is currently in a beta state. A stable version is scheduled for the end of February 2024. This documentation might change in the future according to our development.

QUANTEEC technology can be used when casting a video to a Chromecast but with an additional constraint compared to other video web players. Indeed it's necessary to develop your own custom media receiver for Chromecast and to host it. Indeed, the two media receivers provided by Google and called "default media receiver" and "stylized media receiver" do not allow the use of custom JavaScript which is necessary for QUANTEEC to work. More information about these different types of Web receivers can be found here.

Install QUANTEEC for Chromecast​

5 steps:

1- Import the QUANTEEC library for Chromecast into your custom media receiver application:

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

2- Declare the video player in your Html page by using a <video> </video> element instead of the <cast-media-player></cast-media-player> element as specified in the Google Cast documentation:

<video id="videoplayer" style="width:100%;height:100%"></video>

3- Register the HTML Media Element inside the PlayerManager of the Google Cast SDK:

const videoElement = document.getElementById("videoplayer");
cast.framework.CastReceiverContext.getInstance().getPlayerManager().setMediaElement("videoElement");

4 - Adjust the QUANTEEC configuration to your quanteecKey and specific options:

var quanteecConfig = { 
    quanteecKey: "<your-quanteec-key>" 
};
note

A complete description of the possible options of the quanteecConfiguration object can be found here.

5- Link QUANTEEC to the video player inside a setMediaPlabackInfoHandler event that will be triggered by the Chromecast SDK:

    cast.framework.CastReceiverContext.getInstance().getPlayerManager().playerManager.setMediaPlaybackInfoHandler((loadRequestData, playbackConfig) => {
      quanteec = window.quanteec = new Quanteec(configuration, videoElement);
      return playbackConfig;
    });

Here is a complete example of the use of QUANTEEC for Chromecast:

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript"
      src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js">
  </script>
  <script src="//www.gstatic.com/cast/sdk/libs/devtools/debug_layer/caf_receiver_logger.js"></script>
  <!-- 1- Import the QUANTEEC plugin -->
  <script src="https://files.quanteec.com/quanteec/latest/quanteec-chromecast.min.js"></script>

</head>
<body>
  <video id="videoplayer" style="width:100%;height:100%"></video> <!-- 2- Use a video html element -->

  <script>
    const videoElement = document.getElementById("videoplayer");
    const context = cast.framework.CastReceiverContext.getInstance();
    const playerManager = context.getPlayerManager();
    // 3- Registering the video media element inside the Google Cast SDK
    playerManager.setMediaElement("videoElement");

    // 4- Adjust QUANTEEC configuration
    var quanteecConfig = {
        quanteecKey: "<your-quanteec-key>", 
        videoID: "<enter-your-custom-videoID>" // [Optional but recommended] String --> specific name to identify a video. Useful if the videosource url contains a token which is different for every user. By default: the videoSource value is used.
    };

    // 5-  Link QUANTEEC to the video player inside a setMediaPlabackInfoHandler event
    playerManager.setMediaPlaybackInfoHandler((loadRequestData, playbackConfig) => {
        quanteec = window.quanteec = new Quanteec(configuration, videoElement);
        return playbackConfig;
    });

    context.start();
  </script>