Web Player SDK

Quickstart: Playback a BlendVision One Stream

This guide will walk you through the steps to start a BlendVision One streaming playback using the web player SDK.

 

Additionally, you can also check out the sample project for an even smoother start:
https://github.com/BlendVision/web-player-samples/tree/main/playback-api-react

 

Before We Start

Before proceeding, ensure that you have prepared your BlendVision One streaming content. You can prepare your content in two ways:

Step 1: Obtain a Playback Token

  • Obtain a valid API token by following the authentication steps
  • Retrieve the resource_id and resource_type of the streaming content you would like to playback. There are two ways to obtain this information:
    • Retrieve using the API
    • Copy from your BlendVision One console
      • VOD > Publishing Tools > Player SDK > VOD ID
      • Live > Publishing Tools > Player SDK > Event ID

  • Obtain the playback token using the API: /bv/cms/v1/tokens, with the resource_id and resource_type as body parameters

    • You can also include customer_id in the body parameters if you want to track user playback with your own defined user ID

const resourceId = ''
const resourceType = ''
const customerId = ''

// response {token: '...'}
const {token: playbackToken} = await fetch(
  `https://api.one.blendvision.com/bv/cms/v1/tokens`,
  {
    method: 'POST',
    body: JSON.stringify({
      resource_id: resourceId,
      resource_type: resourceType,
      customer_id: customerId,
    }),
    headers: {
      Authorization: 'Bearer ${CMS token}' // TODO API key or generate special tokens?
    }
  }
).then(res => res.json())

 

Step 2: Start a Playback Session

const headers = {
  Authorization: playbackToken,
}
const deviceId = uuidv4();

const sessionInfo = await fetch(
  `https://api.one.blendvision.com/bv/playback/v1/sessions/${deviceId}:start`,
  {method: 'POST', headers}
).then(res => res.json())

const streamInfo = await fetch(
  `https://api.one.blendvision.com/bv/playback/v1/sessions/${deviceId}`,
  {headers}
).then(res => res.json())

const {manifests} = streamInfo.sources[0]
const dashUrl = manifests.find(manifest => manifest.protocol === 'PROTOCOL_DASH')?.url
const hlsUrl = manifests.find(manifest => manifest.protocol === 'PROTOCOL_HLS')?.url

 

Step 3: Initialize the Player

Obtain Player License Key

Obtain a valid player license key from your BlendVision One console

Install Player SDK

There are two methods to install BlendVision Web Player SDK as described below. You can install BlendVision Player SDK through npm:

npm install @blendvision/player@version

Alternatively, you can refer to an up‐to‐date version from the CDN:

<script src="https://unpkg.com/@blendvision/player"></script>
  • You can also specify the version as needed https://unpkg.com/@blendvision/player@<version>
  • Note that this project includes no polyfills by default. If you use any other ES6+ features that need runtime support (such as Array.at()), make sure you are including the appropriate polyfills manually, or that the browsers you are targeting already support them.

Create a Player

To play the streaming content, create a player instance with the license key and stream data in the initialization configuration:

import {createPlayer} from '@blendvision/player'

// It inserts a video element to div id="player-container"
const player = createPlayer('player-container', {
  license, // license is not required when testing in local development environment
  source: [
    {
      type: 'application/dash+xml',
      src: dashUrl,
    },
    {
      type: 'application/x-mpegurl',
      src: hlsUrl,
    }
  ],
})

 

Step 4: Manage the Lifecycle of a Playback Session

setInterval(async () => {
  const heartbeatResult = await fetch(
    `https://api.one.blendvision.com/bv/playback/v1/sessions/${deviceId}:heartbeat`,
    {headers}
  )

  if (!heartbeatResult.ok) {
    player.release()
  }
}, 10000)

const endPlayback = () =>
  fetch(
    `https://api.one.blendvision.com/bv/playback/v1/sessions/${deviceId}:end`,
    {headers}
  )

 

What's More

Updated