Web 播放器 SDK

快速入門： BlendVision One 串流播放

（以下內容均翻譯自英文版文件，最新資訊及內容敬請切換至英文語系參考原文）

 

本指南將指導您完成使用 Web 播放器 SDK 啟動 BlendVision One 串流播放的步驟。

 

此外，您還可以查看範例專案，以便更順利地開始工作：
https://github.com/BlendVision/web-player-samples/tree/main/playback-api-react

 

開始之前

在實施步驟之前，請確保您已準備好 BlendVision One 的串流內容。您可以通過兩種方式準備您的內容：

步驟 1：取得播放令牌

  • 按照 驗證步驟 取得有效的 API 令牌
  • 取得預期要播放的串流內容的 resource_id 和 resource_type 。
    有兩種方法可以取得此資訊：
    •  

  • 使用 API 取得 playback token ： /bv/cms/v1/tokens ，並將 resource_id 和 resource_type 設為主體參數
    • 您也可以在主體參數中加入 customer_id  ，以使用自定義的使用者 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())

 

步驟 2：開始播放工作階段

  •  
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

 

步驟 3：初始化播放器

  • 為了播放串流內容，請在初始化配置中使用許可證密鑰和串流資訊建立播放器實例：
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,
    }
  ],
})

 

步驟 4：管理播放工作階段的生命週期

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

 

了解更多

更新於