~/Enable DRM on Website Using JavaScript

Feb 19, 2020

Digital Rights Management (DRM) helps protect digital content. On the web, Encrypted Media Extensions (EME) enables DRM in browsers via JavaScript.

To enable DRM for video playback, use EME with a supported video element and a Content Decryption Module (CDM), such as Widevine or PlayReady.

Basic steps:

1. Load your DRM protected content with a HTML5 video tag.
2. Use JavaScript to access EME APIs.
3. Obtain a license from your DRM license server.

Example:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

const video = document.getElementById('video');
const keySystem = 'com.widevine.alpha';

if (navigator.requestMediaKeySystemAccess) {
    navigator.requestMediaKeySystemAccess(keySystem, [{
        initDataTypes: ['cenc'],
        videoCapabilities: [{contentType: 'video/mp4; codecs="avc1.42E01E"'}]
    }]).then(function(keySystemAccess) {
        return keySystemAccess.createMediaKeys();
    }).then(function(createdMediaKeys) {
        return video.setMediaKeys(createdMediaKeys);
    });
}

When the browser requests a license, use the license server to provide keys.

DRM cannot fully prevent copying, but EME ensures compliance with content provider rules. Review documentation for EME, your preferred CDM, and browser support details.