Giter Site home page Giter Site logo

cristian-atehortua / bitmovin-player-analytics-conviva Goto Github PK

View Code? Open in Web Editor NEW

This project forked from bitmovin/bitmovin-player-web-analytics-conviva

0.0 0.0 0.0 1.16 MB

Integration of the Bitmovin Web Player SDK with the Conviva Analytics

License: MIT License

JavaScript 2.17% HTML 4.24% TypeScript 93.58%

bitmovin-player-analytics-conviva's Introduction

Bitmovin Player Conviva Analytics Integration

Compatibility

This version of the Conviva Analytics Integration works only with Player Version >= 8.2.x. The recommended and tested version of the Conviva SDK is 2.151.0.36981. See CHANGELOG for details.

Getting Started

Installation

Using NPM

Install the npm package:

npm i @bitmovin/player-integration-conviva --save-dev

Using custom build

Build the JS file by running npm run build

Developing

  1. Clone Git repository
  2. Install node.js
  3. Install required npm packages: npm install
  4. Run tasks:
  • npm run lint to lint TypeScript files
  • npm run build to build project into dist directory
  • npm run start to open test page in browser, build and reload changed files automatically

Usage

  1. Include conviva-core-sdk.min.js as first of all scripts in your HTML document

  2. Create an instance of ConvivaAnalytics before calling player.load(...) and pass in your Conviva CUSTOMER_KEY and optional configuration properties:

    1. Using NPM import:

      1. Import ConvivaAnalytics:

        import { ConvivaAnalytics } from '@bitmovin/player-integration-conviva';
      2. Usage

        const playerConfig = {
          key: 'YOUR-PLAYER-KEY',
          // ...
        };
        
        const player = new Player(document.getElementById('player'), playerConfig);
        const conviva = new ConvivaAnalytics(player, 'CUSTOMER_KEY', {
          debugLoggingEnabled: true, // optional
          gatewayUrl: 'https://youraccount-test.testonly.conviva.com', // optional, TOUCHSTONE_SERVICE_URL for testing
          deviceCategory: Conviva.Client.DeviceCategory.WEB // optional, (default: WEB)
        });
        
        var sourceConfig = {
          // ...
        };
                    
        player.load(sourceConfig).then(function() {
          console.log('player loaded');
        }, function(reason) {
          console.error('player setup failed', reason);
        });
    2. Using custom Build:

      1. Include bitmovinplayer-analytics-conviva.js after conviva-core-sdk.min.js in your HTML document

      2. Usage

        var playerConfig = {
          key: 'YOUR-PLAYER-KEY',
          // ...
        };
        
        var container = document.getElementById('player');
        var player = new bitmovin.player.Player(container, playerConfig);
        
        // A ConvivaAnalytics instance is always tied to one player instance
        var conviva = new bitmovin.player.analytics.ConvivaAnalytics(player, 'CUSTOMER_KEY', {
          debugLoggingEnabled: true, // optional
          gatewayUrl: 'https://youraccount-test.testonly.conviva.com', // optional, TOUCHSTONE_SERVICE_URL for testing
          deviceCategory: Conviva.Client.DeviceCategory.WEB // optional, (default: WEB)
        });
        
        var sourceConfig = {
          // ...
        };
        
        player.load(sourceConfig).then(function() {
          console.log('player loaded');
        }, function(reason) {
          console.error('player setup failed', reason);
        });
  3. Release the instance by calling conviva.release() before destroying the player by calling player.destroy()

Advanced Usage

VPF tracking

If you would like to track custom VPF (Video Playback Failures) events when no actual player error happens (e.g. the server closes the connection and return net::ERR_EMPTY_RESPONSE or after a certain time of stalling) you can use following API to track those deficiencies.

conviva.reportPlaybackDeficiency('Some Error Message', Conviva.Client.ErrorSeverity.FATAL);

See ConvivaAnalytics.ts for parameter details.

Conviva suggests an timeout of about ~10 seconds and before reporting an error to conviva and providing feedback the user.

Content Metadata handling

If you want to override some content metadata attributes you can do so by adding the following:

let metadataOverrides = {
  applicationName: 'App Name',
  viewerId: 'uniqueViewerId',
  custom: {
    customTag: 'customValue',
  },
  encodedFrameRate: 24,
  // … 
};

// …
// Initialize ConvivaAnalytics
// …

conviva.updateContentMetadata(metadataOverrides);

Those values will be cleaned up after the session is closed.

See ConvivaAnalytics.ts for details about more attributes.

Consecutive playback

If you want to use the same player instance for multiple playback, just load a new source with player.load(…). The integration will close the active session.

player.load({});

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.