Videocap NPM | npm.io

Introduction
Technologies
Browser Support
Setup
ways to capture OTT data
Naming Convention in project

Introduction

A demo project that will be used as analytical engine on the web browser. Tracking add, content, user data & sending it as CSV format finally. It track the media player Activities across different plateforms and Send it to csv formate.

Techonolgies

javaScript
TypeScript

Browser Support

* Internet Explorer.
* Google Chrome.
* Mozilla Firefox.
* Safari.
* Opera.
* Edge.

Setup

const BARC_Track = new SdkBasic('hotStar', 'jsa5656ghsayysa89');
BARC_Track.init({ debug: true},contentInfo,adInfo,appInfo,'my_video');

We just have to call init method once.

to Create Object of Content Info and set Value

const content = contentInfo();
content.setChannelName("sonyLiv")
.setSubBrand("asd")
.setProgramName("KBC")
.setAdLoadType("asd")
.setLength("123")
.setEpisodeTitle("KBC")
.setGenre("sad")
.setContentType("adsa")
.setDuration("123")
.setLanguage("HIndi")
.setContentId("1230")
.setUserGenerated("2135")
.setIsLive(true)
.setIsPremium(true)
.setIsDownloaded(true)
.getData();

There are three ways to capture OTT data by the SDK

Using HTML Event Hooks.
Using Youtube Event Hooks.
Using Open Methods.

Using HTML Event Hooks

When we call init method with web-sdk object the fifth parameter is for HTML video tag if you pass the ID of video player it will start capturing data.
If a web-site have more than one HTML video play than we don't have to call init method again and again. We are providing "html5EventHooks" method in VideoTracker.

VideoTracker.getVideoInstance().html5EventHooks(HTML5videoTagObject, contentInfoObject, adInfoObject, appInfoObject);

Using Youtube Event Hooks

We have special event hooks for youtube player. This method can only be used for youtube player.
To use them first need to create object of YTPlayer.
To create object of YTPlayer you have to pass Content information, advertisement information and Application information object.
After creating object add "YTEventsHooks" to the onStateChange hook of youtube player.

ytPlayer=new YTPlayer(contentInfoObject, adInfoObject, appInfoObject);
'onStateChange': ytPlayer.YTEventsHooks,

Using Open Method

When you don't have HTML video player or youtube player then we are providing Open methods too.
To use first start the timer you have create timer object.
There are open methods for everything.To generate data stream we have "dataSteram" method in SAKService but to use that you have to set VideoSessionID and AdSessionID.
To get VideoSessionID and AdSessionID you have to call getVideoSessionID, getAdSessionID method of VideoTracker and pass contentInfo and adinfo OBject.
You have to generate advertisementSessionId and VideoSessionID every everytime a new advertisement and video is play.
When video or advertisement is pause than you have to call "stopTimer" method of Timer and when play again you have to call "startTimer" method.

videoTracker=VideoTracker.getVideoInstance();
let currentTime=new Date().getTime();
let videoSessionID=videoTracker.getVideoSessionID(contentInfo);
let timer= new Timer(videoSessionID);
SDKService.getInstance().dataSteram(timer.getTimer(),contentInfoObject, adInfo,appInfo, pingType,currentTime, event , contentType, videoSessionID, advertisementSessionId);
timer.startTimer(contentInfo, adInfo, appInfo);

//when video or advertisement are pause
timer.stopTimer();

//when video or advertisement are play again
timer.startTimer(contentInfo, adInfo, appInfo)

//when advertisement is end 
thimer.endAdvertisement();

//when video is ended
timer.endTimer();