Skip to main content

WebRTS

WebRTS is a protocol designed by Ceeblue for real-time streaming. It allows for sub-second latency while being compatible with HTTP and CDN. QUANTEEC is compatible with Ceeblue WebRTS SDK trough a Service Worker. In order to use it, you need to be sure your page can embed a Service Worker.

Install QUANTEEC for WebRTS plugin​

4 steps:

1- Import the QUANTEEC library for WebRTC plugin in your webpage:

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

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

var quanteecConfig = { 
    quanteecKey: "<your-quanteec-key>",
    videoID: "<enter-your-custom-videoID>",
    lowLatency: true,
};
info

To create a new QUANTEEC configuration and/or retrieve your default QUANTEEC key, you must first go to the Config page of your panel.

note

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

warning

In your QUANTEEC configuration, remember to set a different videoID if you have different formats of the same stream (e.g., one DASH stream and one HLS stream) or two variants of the same stream (one stream with English audio and one stream with another language).

Click here to find more informations on videoID

3- Link QUANTEEC configuration object to WebRTS right after the setup of the WebRTS player instance:

var player = new Player(document.getElementById("videoplayer"));

var quanteecPlugin = new Quanteec(quanteecConfig, player);

4- Start Quanteec Service Worker with the function "useServiceWorker" and the link to the quanteec-sw.min.js file before calling "player.start()". This file is available here and needs to be self-hosted on you web server.

quanteecPlugin.useServiceWorker("./quanteec-sw.min.js");
danger

Quanteec Service Worker has the same requirements as any Service Worker.

The website should be served in HTTPS.

You need to self-host the file on your web server. This file is available here.

You need to make sure that quanteec-sw.min.js is available from a valid scope at the root or on top of your page. For example, if your page is in the path "/videos/stream/", then the Quanteec Service Worker should be served from "/videos/" or "/videos/stream/".

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


<!DOCTYPE html>
<html>
    <head>
        <!-- 1- Import QUANTEEC plugin for WebRTS -->
        <script src="https://files.quanteec.com/quanteec/latest/quanteec-webrts.min.js"></script>
    </head>
    <body>
        <video id="videoplayer" controls></video>

        <script type="module">
            // Import WebRTS Player
            import {Player} from "./wrts-client.min.js"

            document.addEventListener("DOMContentLoaded", function () {
                
                // 2- 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 URL of the source is used.
                    lowLatency: true,
                };

                var player = new Player(document.getElementById("videoplayer"))

                // 3- Link QUANTEEC configuration object to WebRTS right after the setup of the WebRTS player instance
                var quanteecPlugin = new Quanteec(quanteecConfig, player);
                
                // 4- Start Quanteec **Service Worker** with the function "useServiceWorker"
                quanteecPlugin.useServiceWorker("./quanteec-sw.min.js");


                player.start({
                    endPoint: "example.com",
                    streamName: "<WebRTS Stream Name>"
                });
                
            });
        </script>
    </body>
</html>

tip

Good practice: try-catch block​

One good practice is to encapsulate the instantiation of the QUANTEEC object within a try-catch block. This approach provides a robust mechanism for handling situations where QUANTEEC might not be available or may encounter compatibility issues.

Script loading​

Embedding QUANTEEC on a webpage involves loading an external script. If, for any reason, this script fails to load or execute correctly, an error may occur. Wrapping the instantiation of the QUANTEEC object in a try-catch block allows you to catch and handle these errors gracefully.

Unusual environments​

Web environments are diverse, and unusual browsers or plugin associations might cause issues with QUANTEEC. By encapsulating the new Quanteec() operation in a try-catch block, you can account for scenarios where QUANTEEC is either unavailable or incompatible with the current browser, preventing unhandled exceptions.