Skip to main content

QUANTEEC integration with Nice People At Work

Nice People At Work's Video Analytics (Youbora) is a video QoS and QoE measurement software solution helping video platforms and video providers identify how to improve video streaming quality with comprehensive and customizable dashboards of streaming quality metrics to instantly see the health of their video. QUANTEEC can be integrated with NPAW's Video Analytics to add P2P metrics to your existing dashboard. Hence, all of your QoS analytics are available in one place.

Integrate with NPAW web SDK by using the instances of Youbora and QUANTEEC​

First of all, install NPAW's Video Analytics SDK with the appropriate video player adapter in your project. Information is available here.

If the object Youbora is publicly available in the web page "window" object, all you have to do is declare your Youbora plugin before initializing QUANTEEC. Then, set the Youbora adapter after initializing QUANTEEC.

// If window.youbora is defined

// 1 - Initialize the Youbora plugin.
window.plugin = new youbora.Plugin({ accountCode: 'accountTest' });
// 2 - Initialize the video player. This step depends on the video player you are using. For this example, we use a player called "Player".
var player = new Player();
// 3 - Initialize QUANTEEC.
var quanteecPlayer = new Quanteec(quanteecConfig, player);
// 4 - Set the adapter for the player "Player" to your Youbora plugin. 
plugin.setAdapter(new youbora.adapters.PlayerAdapter(player))

If the Youbora object is not publicly available in the webpage window object, you need to pass it to QUANTEEC using the function "extendYouboraAdapters".

// If window.youbora is undefined

// 1 - Initialize the Youbora plugin.
window.plugin = new youbora.Plugin({ accountCode: 'accountTest' });
// 2 - Initialize the video player. This step depends on the video player you are using. For this example, we use a player called "Player".
var player = new Player();
// 3 - Initialize QUANTEEC.
var quanteecPlayer = new Quanteec(quanteecConfig, player);
// 4 - Pass the Youbora object to QUANTEEC in order to link P2P-related metrics
quanteecPlayer.extendYouboraAdapters(youbora);
// 5 - Set the adapter for the player "Player" to your Youbora plugin. 
plugin.setAdapter(new youbora.adapters.PlayerAdapter(player));

Full example with the player hls.js :

<!DOCTYPE html>
<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
        <!-- Import QUANTEEC plugin for hls.js -->
        <script src="https://files.quanteec.com/quanteec/latest/quanteec-hlsjs.min.js"></script>
        <!-- Import NPAW's Youbora -->
        <script src="http://smartplugin.youbora.com/v6/js/adapters/hlsjs/6.7.0/sp.min.js"></script>
    </head>
    <body>
        <video id="videoplayer" width="854" height="480" controls></video>

        <script>
            document.addEventListener("DOMContentLoaded", function () {
                var videoSource = "https://example.com/videoSource.m3u8";

                // Initialize Youbora plugin
                var youboraPlugin = new youbora.Plugin({ accountCode: '<your-youbora-accountCode>' });
                // 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.
                };

                var videoPlayer = document.getElementById("videoplayer");

                var hlsPlayer = new Hls();

                // Link QUANTEEC to hls.js right *after* the creation of the hls.js player instance
                var quanteecPlayer = new Quanteec(quanteecConfig, hlsPlayer);

                // Initialize the adapter after the creation of the QUANTEEC instance
                youboraPlugin.setAdapter(new youbora.adapters.Hlsjs(hlsPlayer));

                hlsPlayer.loadSource(videoSource);
                hlsPlayer.attachMedia(videoPlayer);
                hlsPlayer.on(Hls.Events.MANIFEST_PARSED, function() {
                    videoPlayer.play();
                });
            });
        </script>
    </body>
</html>

Integrate with NPAW web SDK by using the global QUANTEEC object​

note

This feature is available since version 1.0.1.

When accessing the Youbora object after the instanciation of the QUANTEEC Plugin and before the instanciation of the Youbora Adapter, the global QUANTEEC object can be used. The static and global function QuanteecYouboraAdapter() should be called at the creation of the adapter.

var youboraPlugin = new youbora.Plugin({ accountCode: '<your-youbora-accountCode>' });

let yourCustomAdapter = ... // Create your adapter here

yourCustomAdapter.extend(Quanteec.QuanteecYouboraAdapter());

youboraPlugin.setAdapter(YourCustomAdapter);

The function QuanteecYouboraAdapter() extends the adapter and overwrites the functions getCdnTraffic(), getP2PTraffic(), getUploadTraffic(), and getIsP2PEnabled(). The functions are calling a global object accessible in the global variable window. Once created, the QUANTEEC Plugins will register in this global object and the Youbora Adapter will be able to get the P2P-related data.

Integrate with NPAW Exoplayer SDK​

First of all, install NPAW in your project. Information is available here.

In order to integrate with QUANTEEC, it is necessary to create a custom Youbora Adapter extending Exoplayer2Adapter in order to transfer P2P-related metrics by using the QuanteecCore API. The adapter should be:

open class Exoplayer2QuanteecAdapter(val quanteecCore: QuanteecCore, player: ExoPlayer) :
    Exoplayer2Adapter(player) {

    override fun getP2PTraffic(): Long? { return (quanteecCore.dataPeer as Number).toLong() }
    override fun getCdnTraffic(): Long? { return (quanteecCore.dataCDN as Number).toLong() }
    override fun getIsP2PEnabled(): Boolean { return quanteecCore.factory.generalSettings.isP2pActivated }
    override fun getUploadTraffic(): Long? { return (quanteecCore.dataSent as Number).toLong() }
}

Then, it is necessary to set this adapter to the Youbora plugin after the creation of the QuanteecCore object.

val adapter = Exoplayer2QuanteecAdapter(quanteecCore, mExoPlayer)
youboraPlugin.adapter = adapter

Full example:

open class Exoplayer2QuanteecAdapter(val quanteecCore: QuanteecCore, player: ExoPlayer) :
    Exoplayer2Adapter(player) {

    override fun getP2PTraffic(): Long? { return (quanteecCore.dataPeer as Number).toLong() }
    override fun getCdnTraffic(): Long? { return (quanteecCore.dataCDN as Number).toLong() }
    override fun getIsP2PEnabled(): Boolean { return quanteecCore.factory.generalSettings.isP2pActivated }
    override fun getUploadTraffic(): Long? { return (quanteecCore.dataSent as Number).toLong() }
}
YouboraLog.setDebugLevel(YouboraLog.Level.VERBOSE);
val youboraOptions = Options()
youboraOptions.accountCode = "<your-youbora-accountCode>"
val youboraPlugin = Plugin(youboraOptions, context)
youboraPlugin.activity = activity // Android variable "activity"

val quanteecConfig = QuanteecConfig("<enter-your-custom-videoID>", "<your-quanteec-key>");
val quanteecCore = QuanteecExoCore(context, quanteecConfig); 

val quanteecDataSourceFactory = QuanteecBaseDataSource.Factory(quanteecCore);

val quanteecBandwidthMeters = QuanteecBandwidthMeters.Builder(context).build();

val mExoPlayer = remember(mContext) {
    ExoPlayer.Builder(mContext).setMediaSourceFactory(DefaultMediaSourceFactory(mContext).setDataSourceFactory(quanteecDataSourceFactory) 
    ).setBandwidthMeter(quanteecBandwidthMeters
    ).build().apply {
        val mediaItem = MediaItem.Builder(
        ).setUri(Uri.parse("your-video-url")
        ).build()

       setMediaItem(mediaItem)

        playWhenReady = true
        }
}

quanteecCore.setPlayer(mExoPlayer);

val adapter = Exoplayer2QuanteecAdapter(quanteecCore, mExoPlayer)
youboraPlugin.adapter = adapter

mExoPlayer.prepare();