クイックスタート - WebプレーヤーSDK

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

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 resource token using the API: /bv/cms/v1/resources/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
  • Obtain the playback token using the API: /bv/playback/v1/tokens, with the resource token as a body parameter.


const resourceId = ''

const resourceType = ''

// response {token: '...'}

const {token: resourceToken} = await fetch(



    method: 'POST',

    body: JSON.stringify({

      resource_id: resourceId,

      resource_type: resourceType,


    headers: {

      Authorization: 'Bearer ${CMS token}' // TODO API key or generate special tokens?



).then(res => res.json())

const {token: playbackToken} = await fetch(



    method: 'POST',

    headers: {

      Authorization: `Bearer ${resourceToken}`,



).then(res => res.json())

Step 2: Start a Playback Session


const headers = {

  Authorization: playbackToken,


const deviceId = uuidv4();

const sessionInfo = await fetch(


  {method: 'POST', headers}

).then(res => res.json())

const streamInfo = await fetch(



).then(res => res.json())

Step 3: Initialize the Player

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


import {createPlayer} from '@blendvision/player'

const protocols = {

  PROTOCOL_DASH: 'application/dash+xml',

  PROTOCOL_HLS: 'application/x-mpegurl',


const player = createPlayer('playerId', {

  license, // license is not required when testing in local development environment

  source: streamInfo.sources[0].manifests.map(manifest => ({

    type: protocols[manifest.protocol],

    src: manifest.url,



Step 4: Manage the Lifecycle of a Playback Session

  • To keep the playback session alive, periodically invoke the heartbeat API every 10 seconds
  • When the user leaves the player, release the session using the end playback session API


setInterval(async () => {

  const heartbeatResult = await fetch(




  if (!heartbeatResult.ok) {



}, 10000)

const endPlayback = () =>





What's More