Setup via GitHub Packages NPM Registry

The @pixellot/web-sdk package is hosted on the Pixellot GitHub Packages Registry (opens new window) which is a private version of the regular NPM Registry. It can be added as a dependency to your project via npm/yarn/pnpm from this registry.

For detailed documentation on the GitHub Packages Registry please visit this documentation page (opens new window)

Authenticate with GitHub Packages Registry

First you must authenticate your project with the GitHub Packages registry.

Create Personal Access Token

Follow the instructions on this page (opens new window) to create a (fine-grained) Personal Access Token.

This will grant the holder of the token access to the packages and repositories you specify when it was created.

Configure .npmrc File

Create a file named .npmrc in your project with the following contents:

@pixellot:registry=https://npm.pkg.github.com/
//npm.pkg.github.com/:_authToken=<PERSONAL_ACCESS_TOKEN>

Replace the <PERSONAL_ACCESS_TOKEN> string with the token you created in the previous step.

The first line of this tells your project where to find dependent packages in the @pixellot namespace. The second provides the authentication details.

Install @pixellot/web-sdk

Now we can install the @pixellot/web-sdk package into the project:

npm install @pixellot/web-sdk --save

TIP

You can replace the npm command with your package manager of choice

You should now see the @pixellot/web-sdk package appear in your package.json file.

Import Styles

Next we can import the package's CSS stylesheet into your project. You can do this by importing the style.css file whereever you typical include global styles. For example, in a Vue.js project this might be in the main.ts, main.js or App.vue files.

import '@pixellot/web-sdk/style.css';

Instantiating the Player

Next we can import and instantiate the player in one of our components.

• Import the Player and SDKApi modules at the top of your component.

import { Player, SDKApi } from "@pixellot/web-sdk";

• Set your Project ID

SDKApi.projectId('xxxx');

• Set your API Base Url. This is only required when using the SDK API.

SDKApi.baseUrl('https://www.my-api-base-url.com');

• Create a container for your player.

<div id="player"></div>

• Initialize the player.

const container = document.getElementById('player');

// Create the player.
const player = new Player(container, {
    // config
});

// Set video source and play.
player.setSrc("https://multiplatform-f.akamaihd.net/i/multi/will/bunny/big_buck_bunny_,640x360_400,640x360_700,640x360_1000,950x540_1500,.f4v.csmil/master.m3u8");

player.play();

Player Configuration

See the Player Configuration section for more details on configuring the player.