Bunny Stream Fairplay sample

by Miha Nagelj

HTML

<video controls preload="metadata" width=960></video>

JavaScript

// MODIFY: You need to replace {library_id} and {video_id} with actual values  
window.fp_license_server_url = 
"https://video.bunnycdn.com/FairPlayLicense/196366/25f5b2ef-5663-4336-9b4b-6cf2f6e6cc1c";
//"https://video.bunnycdn.com/FairPlayLicense/{library_id}/{video_id}";  
// MODIFY: You need to replace {pull_zone_url} and {video_id} with actual URL  
window.playback_url = 
"https://vz-0dcf3ca7-468.b-cdn.net/25f5b2ef-5663-4336-9b4b-6cf2f6e6cc1c/playlist.m3u8";
//"https://{pull_zone_url}.b-cdn.net/{video_id}/playlist.m3u8";



document.addEventListener('DOMContentLoaded', startVideo);

async function loadFpCertificate() {  
    try {  
        let response = await fetch(window.fp_license_server_url);  
        var certResult = await response.json();
        window.fp_certificate = base64ToArrayBuffer(certResult.certificate);
    } catch(e) {  
        window.console.error(`Could not load certificate at ${window.fp_license_server_url}`);  
    }  
}

window.keysPromise = null;
async function createMediaKeys(video) {
  if (keysPromise)
    await keysPromise;
  if (!video.mediaKeys) {
    var resolve = null
    keysPromise = new Promise(r => resolve = r);
    var accessPromise = navigator.requestMediaKeySystemAccess("com.apple.fps", [{
      initDataTypes: ['cenc', 'sinf', 'skd'],
      videoCapabilities: [{ contentType: 'application/vnd.apple.mpegurl', robustness: '' }],
      distinctiveIdentifier: 'not-allowed',
      persistentState: 'not-allowed',
      sessionTypes: ['temporary'],
    }]);
    var access = await accessPromise;
    var keys = await access.createMediaKeys();
    var success = await keys.setServerCertificate(window.fp_certificate);
    var keysResult = await video.setMediaKeys(keys);
    resolve();
  }
}


async function startVideo() {
	console.log('Start Video');
  await loadFpCertificate();
  console.log('Cert loaded');
  // get html5 video element
  let video = document.querySelector('video');
  
  // hook up the encrypted event
 ...