Integrating DRM with Brightcove Web & Smart TV SDK

Overview

Digital Rights Management (DRM) prevents your videos from being played back except in clients that are granted permission to do so. Brightcove Web & Smart TV SDK supports several DRM systems to secure video content, including Widevine, PlayReady, and FairPlay, ensuring that your media can be securely streamed across different platforms and devices.

Prerequisites

• A Brightcove account with DRM capabilities enabled.

• The Brightcove Web & Smart TV SDK installed in your project.

Integration

1. Import the Player (with UI) class from the Brightcove SDK.

   import { Player } from '@brightcove/web-sdk';
               

2. Create and Configure the Player.

   const player = new Player();
   player.updateConfiguration({
     brightcove: {
       accountId: 'your-account-id',
       auth: { policyKey: 'your-policy-key' }
     },
     drm: {
       widevine: {
         url: 'https://widevine-license-server-url'
       },
       playReady: {
         url: 'https://playready-license-server-url'
       },
       fairPlay: {
         certificateUrl: 'https://fairplay-certificate-server-url',
         licenseUrl: 'https://fairplay-license-server-url'
       }
     }
   });
               

3. Attach the Player to a Video Element.

   const videoElement = document.querySelector('video');
   player.attach(videoElement);
               

4. Load DRM-protected Content.

   const videoId = 'your-drm-protected-video-id';
   player.getVideoById({ videoId: videoId }).then((videoModel) => {
     player.loadVideoModel(videoModel);
   });
               

Complete snippet:

//Import Required Modules
import { Player } from '@brightcove/web-sdk';

//Create and Configure the Player
const player = new Player();
player.updateConfiguration({
  brightcove: {
    accountId: 'your-account-id',
    auth: { policyKey: 'your-policy-key' }
  },
  drm: {
    widevine: {
      url: 'https://widevine-license-server-url'
    },
    playReady: {
      url: 'https://playready-license-server-url'
    },
    fairPlay: {
      certificateUrl: 'https://fairplay-certificate-server-url',
      licenseUrl: 'https://fairplay-license-server-url'
    }
  }
});

//Attach the Player to a Video Element
const videoElement = document.querySelector('video');
player.attach(videoElement);

//Load DRM-protected Content
const videoId = 'your-drm-protected-video-id';
player.getVideoById({ videoId: videoId }).then((videoModel) => {
  player.loadVideoModel(videoModel);
});