How to use 3rd party player to play BlendVision One VOD with DRM

‍

The following step by step tutorial is a sample project to demonstrate how to integrate BlendVision One DRM with video.js + React.

Prerequisites

A Valid BlendVision One Account (Contact us)

‍

1. How to Get Your API Token and Organization ID

• Login to your BlendVision One console
• Navigate to Developers > API Tokens
• Click on the Create New API Token
• Set the Expiration Date. You can set it to never or set a date on your needs.
• Copy the API Token and Organization ID from the dialog

‍

2. How to Get Your Content ID

• Navigate to VOD
• Find the video that you want and click
• Copy the VOD ID under Preview in General
• Check if the VOD DRM is enabled

‍

‍

‍

3. How to Get Your Content DASH/HLS URL

• Get the Sample code from Github: https://github.com/BlendVision/bv-api-samples-python
• Copy the code from “get_content_info.py”
• Replace the Environment variable with your own value in the following code
  $ python3 get_content_info.py --content_id $BV_CONTENT_ID --api_key $BV_ONE_API_KEY --org_id $BV_ONE_ORG_ID
• ~BV_CONTENT_ID=your_content_id‍
• ~BV_ONE_ORG_ID=your_org_id‍
• ~BV_ONE_API_KEY=your_api_key

• Run the code and copy the DASH URL and HLS URL

‍

4. How to Get Your DRM Playback Token

• Get the Sample code from Github: https://github.com/BlendVision/bv-api-samples-python
• Copy the code from “get_playback_token.py”
• Replace the Environment variable with your own value in the following code
  python3 get_playback_token.py --content_id $BV_CONTENT_ID --api_key $BV_ONE_API_KEY --org_id $BV_ONE_ORG_ID
• ~BV_CONTENT_ID=your_content_id‍
• ~BV_ONE_ORG_ID=your_org_id‍
• ~BV_ONE_API_KEY=your_api_key

• Run the code and copy the DRM Playback Token

‍

5. Demo with Video.js + React sample player

• Check out the code from BlendVision Github: https://github.com/BlendVision/drm-client-samples/tree/player_setting
• Clone this repository
  git clone https://github.com/BlendVision/drm-client-samples.git
• Open the index.js file with following code
  cd drm-client-samples > subl .
• Copy and paste those ID, token and url from Step 1 to 4 in the single quotes of following parameters:‍
• ~orgId = your_org_id

• ~apiKey = your_api_key
• ~resourceID = your_content_id
• ~manifest_url_dash = your_dash_url
• ~manifest_url_hls = your_hls_url
• ~playbackToken = your_drm_playback_token

• Install dependencies: yarn or npm install
• Start development server with following code(use npm install as example)

• ~cd video-js-react > npm install > npm run dev

• Open http://localhost:3000 in your browser and you’ll find a video with DRM protection if successfully integrated with video.js + React.