Skip to main content

Video Player

This guide will walk you through the steps to start a BlendVision streaming playback via the Web player SDK.

Prerequisites

Basic front-end web application development knowledge is required.

You may also start with the basic sample.

Step 1: Initialize the Player​

Install Player SDK​

You can install the BlendVision Web Player SDK token in the following two methods:

Using Node Package Manager.

npm install @blendvision/player@version react react-dom

Currently react, react-dom are required since the player is built with React. In the future, React dependency requirments will be required only if built-in player UI is used.

Notes
  • This package does not include 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 the target browsers have already supported them.

Create a Player​

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

import {createPlayer} from '@blendvision/player'
// if using CDN: const {createPlayer} = window.BlendVision

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

If you are developing a React application, there is a React integration guide available, and recommended.

If you are using another UI library/framework, like Vue or Angular, you can refer to the integration guide for other UI libraries & frameworks.

Before proceeding to next steps for BlendVision playback workflow integration, you may also try a DASH / HLS video URL here to see if the integration works.

Step 2: Obtain a Playback Token​​

Create an admin playback token via BlendVision One API:

Query ParametersRequiredDescription
resource_idRequiredThe unique ID of your content. Use BlendVision One API to get your content’s unique IDs.
VOD: GET /bv/cms/v1/vods
Live: GET /bv/cms/v1/lives
resource_typeRequiredThe streaming type of your content.
customer_idOptionalIdentify who is watching the content through your custom user ID.
This parameter is required if the content's security privacy is set to SECURITY_PRIVACY_TYPE_TOKEN.
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}'
    }
  }
).then(res => res.json())

Step 3: Start a Playback Session​

Start a playback session and obtain the streaming data via BlendVision One API:

Replace the sample URLs in Step 1 with the obtained manifest_url (dashUrl, hlsUrl) for playback.

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

You can load manifest URLs with player.load:

player.load([
  {
    type: 'application/dash+xml',
    src: dashUrl,
  },
  {
    type: 'application/x-mpegurl',
    src: hlsUrl,
  }
])

If you want to play a DRM enabled video, you can refer to the DRM guide.

Step 4: Manage the Lifecycle of a Playback Session​

To keep the playback session alive, routinely invoke the heartbeat API every 10 seconds to prevent session expiration:

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}
  )

Workflow Sequence Diagram​