Open Source Video Analytics as a Service

Based on open source and the open protocol (Eyevinn Player Analytics Specification) you can add online video analytics without being locked in with a single vendor. All components in the video analytics pipeline and collectors are open source and the protocol between the collector and the pipeline is public. This gives you the possibility to either setup your own analytics pipeline or build your own collectors.

To quickly get started with open source video analytics all components are available as open web services in Eyevinn Open Source Cloud and in this blog we will describe how to get started in just a few minutes.

We will cover in this blog:

• Setup an online video analytics pipeline in Open Source Cloud
• Setup a big query database for storing the analytics data
• Report analytics events with the open source video player hls.js

To follow the tutorial in this blog you need an Eyevinn Open Source Cloud account and subscribed to a plan on the Professional tier. Sign up for an account here.

Setup an online video analytics pipeline

First step in the setup of an online video analytics pipeline is to create a message queue. We are using the SQS compatible queue SmoothMQ that is open source and available as an open web service. Navigate to the service in the Open Source Cloud web console and press the button “Create message-queue”.

We give the message queue instance the name “tutorial”. For production use we strongly recommend to use stronger credentials and stored as service secrets instead. More information about open web service SmoothMQ available in the Open Source Cloud documentation.

You now have a message queue called “tutorial” up and running. Copy the URL to the message queue instance as you will need it in the next step.

Next step is to setup the event sinks. The event sinks are the receiver of all the events from the collectors in the video players. You can have one or many sinks and they are stateless so horizontal scaling with a load balancer in front is possible and recommended.

Setting up event sinks

Navigate to the open web service Player Analytics Eventsink in Open Source Cloud and press the button “Create eventsink”.

Provide the following when creating the instance:

• SqsQueueUrl: https://sqs.us-east-1.amazonaws.com/1/events
• AwsAccessKeyId: demo
• AwsSecretAccessKey: demo
• SqsEndpoint: the URL to the message queue instance that you created. In our case this is https://eyevinnlab-tutorial.poundifdef-smoothmq.auto.prod.osaas.io

The URL to the eventsink instance is the URL that the collectors will use to report events.

Setup database

For storing the events we will use the database ClickHouse that is open source and available as an open web service in Open Source Cloud. Navigate to the service in the web console and press button “Create clickhouse-server”.

Copy the URL to the ClickHouse instance as you will need it in the next step.

Setup workers

The player analytics workers consume events from the message queue and saves them to the database. You can have one or many workers running depending on the amount of events that are pushed on the message queue. The player analytics worker is open source and available as an open web service in Open Source Cloud. Navigate to the service in the web console and press button “Create worker”.

We need the URL to the ClickHouse database with the credentials, in our example it is https://demo:demo@eyevinnlab-tutorial.clickhouse-clickhouse.auto.prod.osaas.io

Provide the following when creating the instance:

• ClickHouseUrl: the URL with credentials to ClickHouse database, in our case https://demo:demo@eyevinnlab-tutorial.clickhouse-clickhouse.auto.prod.osaas.io
• SqsQueueUrl: https://sqs.us-east-1.amazonaws.com/1/events
• AwsAccessKeyId: demo
• AwsSecretAccessKey: demo
• SqsEndpoint: the URL to the message queue instance that you created first. In our case this is https://eyevinnlab-tutorial.poundifdef-smoothmq.auto.prod.osaas.io

Now the analytics pipeline is all setup and we can continue to implement a collector in a video player.

Analytics collector in video player hls.js

Available as open source is the player analytics SDK for web and the video streaming player library hls.js that we will use to create a basic web video application as an example.

In this tutorial we will use the build tool Vite to setup a web project for a web application based on the React framework.

Setup the React Typescript project

Run the following command to scaffold a new project based on React template.

% npm create vite@latest my-video-app -- --template react-ts

Then run:

% cd my-video-app
% npm install
% npm run dev

Open your browser to http://localhost:5173/ and you will see the following template.

Create a Video Player component

Now it is time to add a video player component with analytics collector.

Install the hls.js and player analytics sdk.

% npm install --save hls.js
% npm install --save @eyevinn/player-analytics-client-sdk-web

Then we will create a folder for our components.

% mkdir src/components

In this folder we will create a file called Player.tsx containing the following code.

import { useEffect, useRef } from 'react';
import { PlayerAnalyticsConnector } from "@eyevinn/player-analytics-client-sdk-web";

import Hls from 'hls.js';

export default function Player({
  src
}: {
  src: string;
}) {
  const elRef = useRef<HTMLVideoElement>(null);
  useEffect(() => {
    const playerAnalytics = new PlayerAnalyticsConnector(
      'https://eyevinnlab-tutorial.eyevinn-player-analytics-eventsink.auto.prod.osaas.io'
    );
    const hls = new Hls();
    playerAnalytics.init({ sessionId: self.crypto.randomUUID() }).then(() => {
      if (elRef.current) {
        playerAnalytics.load(elRef.current);
        hls.loadSource(src);
        hls.attachMedia(elRef.current);
      }
    });
    return () => {
      hls.destroy();
      playerAnalytics.deinit();
    }
  }, [src]);

  return <video ref={elRef} width="100%" controls={true} />;
}

Replace the URL https://eyevinnlab-tutorial.eyevinn-player-analytics-eventsink.auto.prod.osaas.io with the URL to your event sink.

Now modify file src/App.tsx

import './App.css'
import Player from './components/Player'

function App() {
  return (
    <>
      <h1>Example Video Player with Analytics</h1>
      <div className="card">
        <Player src="https://lab.cdn.eyevinn.technology/osc/osc-reel/a4e1156e-f872-455f-9f1f-be73b5effba8/index.m3u8" />
      </div>
    </>
  )
}

export default App

Reload the web site and you should see this.

Press play and start playing.

Read this blog for instructions on how to deploy and publish this web app online.

Query data in the ClickHouse database

Go to the ClickHouse open web service in the Open Source Cloud web console and click on the instance you created.

Enter the following SQL query:

select * from epas_default order by timestamp;

You should now see all events reported by the player analytics collector.

To get all player sessions you can enter this SQL query:

select sessionId from epas_default group by sessionId;

1 5eb0be47-eac8-4666-9181-59d8e54caffc
2 b6e321a3-bbd5-4c8b-9327-afe955c34c0a
3 fcb21f62-d962-42b4-b349-d7940a554b2e
4 632cbe7a-f115-4078-82f3-2ea8c8da03a9

Conclusion

Now you have a video analytics pipeline that is fully based on open source and you can start to gather insights by querying the database. With a pipeline based on open source you are not locked in with a single vendor and the open protocol enables you to build your own collectors if you want to.

Additional Resources

• https://dev.to/video/creating-a-web-video-application-56pb
• Open Source Cloud Documentation
• Open Source Cloud Javascript SDK Documentation

Join our Slack workspace for real-time support and to connect with other users.

We developed and launched Open Source Cloud to reduce the barrier to getting started with open source and at the same time contribute to a sustainable model for open source by giving back a share of the revenue to the creator.

Open source provides full transparency of the building blocks your solution is built on, and prevents you from being locked in with a single vendor.

Building solutions based on open source requires that you build, deploy, maintain, and host it yourself. What if it could be as easy that with only a click of a button, you can have it as software as a service? And that there was an easy way to support the creator financially?

This is what we solve with Open Source Cloud!

Eyevinn Technology helps companies in the TV, media, and entertainment sectors optimize costs and boost profitability through enhanced media solutions.