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/ui';
               

2. Create the player

   const player = new Player();
               

3. Configure the Player

   DRM playback is enabled automatically when loading encrypted Brightcove media from the Playback API, so no additional DRM configuration is necessary.

   If you are loading remote encrypted media outside of Brightcove, you need to configure the keySystems property in the Source object.

   //Widevine keySystems example:
   
   source.keySystems = {
     '<keySystem>' : {
       licenseServerUri: '<licenseUrl>'  
     }
   }

   keySystem: Identifies the DRM system (e.g., Widevine, PlayReady).

   licenseServerUri: URL to the license server that issues licenses for decrypting the DRM-protected content.

4. Attach the Player to a Video Element.

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

5. Load DRM-protected Content.

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