Hướng dẫn sử dụng Shaka Player ​

var player;
document.addEventListener('DOMContentLoaded', function () {
  shaka.polyfill.installAll();
  var video = document.getElementById('VIDEO_ID'); // media element
  player = new this.shaka.Player(video);
});

var player;
document.addEventListener('DOMContentLoaded', function () {
  var video = document.getElementById('VIDEO_ID'); // media element
  player = new this.shaka.Player(video);

  window.sigmaPacker = new SigmaPacker();
  window.sigmaPacker.onload = () => {
    console.log('SigmaPacker loaded');
    shaka.polyfill.installAll();
  };
  window.sigmaPacker.init();
});

// src/App.js
import ... from "...";
import ... from "...";

window.sigmaPacker = new SigmaPacker();
window.sigmaPacker.onload = () => {
  console.log('SigmaPacker loaded');
  shaka.polyfill.installAll();
};
window.sigmaPacker.init();
// do something

const manifestUri = MANIFEST_URI;
const licenseWidevineServer = LICENSE_WIDEVINE_URL;
const licensePlayReadyServer = LICENSE_PLAYREADY_URL;
const licenseFairPlayServer = LICENSE_FAIRPLAY_URL;

player.configure({
  drm: {
    servers: {
      'com.widevine.alpha': licenseWidevineServer,
      'com.microsoft.playready': licensePlayReadyServer,
      'com.apple.fps.1_0': licenseFairPlayServer,
    },
  },
});
// Try to load a manifest.
try {
  await player.load(manifestUri);
  // The video should now be playing!
} catch (e) {
  console.error(e);
}

var licenseURL; // Biến lưu thông tin địa chỉ request license
// Đầu tiên cần cấu hình certificate
const serverCertificateURI = CERTIFICATE_URI; // xem mục 1
const response = await fetch(serverCertificateURI);
if (!response.ok) {
  console.error('Could not get certificate!');
  return;
}
const certificate = await response.arrayBuffer();
player.configure({
  drm: {
    advanced: {
      'com.apple.fps.1_0': {
        serverCertificate: new Uint8Array(certificate),
      },
    },
  },
});
// Chỉnh sửa thông tin nội dung (assetId) và lưu thông tin licenseURL
player.configure('drm.initDataTransform', (initData, type, drmInfo) => {
  if (type != 'skd') return initData;
  const skdURL = shaka.util.StringUtils.fromBytesAutoDetect(initData);
  const contentId = new URL(skdURL).searchParams.get('assetId');
  const cert = player.drmInfo().serverCertificate;
  licenseURL = skdURL.replace('skd://', 'https://');
  return shaka.util.FairPlayUtils.initDataTransform(initData, contentId, cert);
});
// Tùy chỉnh request lấy license
player.getNetworkingEngine().registerRequestFilter(function (type, request) {
  if (type == shaka.net.NetworkingEngine.RequestType.LICENSE) {
    request.uris = [licenseURL];
    request.method = 'POST';
    request.headers['Content-Type'] = 'application/json';
    request.headers['custom-data'] = btoa(
      JSON.stringify({
        userId: 'USER_ID',
        sessionId: 'SESSION_ID',
        merchantId: 'MERCHANT_ID',
        appId: 'APP_ID',
      })
    );
    const originalPayload = new Uint8Array(request.body);
    const base64Payload =
      shaka.util.Uint8ArrayUtils.toStandardBase64(originalPayload);
    request.body = JSON.stringify({
      spc: base64Payload,
      assetId: new URL(licenseURL).searchParams.get('assetId'),
    });
  }
});

player.getNetworkingEngine().registerRequestFilter(function (type, request) {
  // Only add headers to license requests:
  if (type == shaka.net.NetworkingEngine.RequestType.LICENSE) {
    // This is the specific header name and value the server wants:

    request.headers['Content-Type'] = 'application/octet-stream';
    request.headers['custom-data'] = btoa(
      JSON.stringify({
        userId: 'USER_ID',
        sessionId: 'SESSION_ID',
        merchantId: 'MERCHANT_ID',
        appId: 'APP_ID',
      })
    );
  }
});

player.getNetworkingEngine().registerRequestFilter(function (type, request) {
  const StringUtils = shaka.util.StringUtils;
  const Uint8ArrayUtils = shaka.util.Uint8ArrayUtils;
  if (type == shaka.net.NetworkingEngine.RequestType.LICENSE) {
    // This is the specific header name and value the server wants:
    const packInfo = window.sigmaPacker.getDataPacker(request.body) || {};
    request.headers['Content-Type'] = 'application/octet-stream';
    request.headers['custom-data'] = btoa(
      JSON.stringify({
        userId: 'USER_ID',
        sessionId: 'SESSION_ID',
        merchantId: 'MERCHANT_ID',
        appId: 'APP_ID',
        reqId: packInfo.requestId,
        deviceInfo: packInfo.deviceInfo,
      })
    );
  }
});

player.getNetworkingEngine().registerResponseFilter(function (type, response) {
  var StringUtils = shaka.util.StringUtils;
  var Uint8ArrayUtils = shaka.util.Uint8ArrayUtils;

  // Only manipulate license responses:
  if (type == shaka.net.NetworkingEngine.RequestType.LICENSE) {
    // This is the wrapped license, which is a JSON string.
    try {
      var wrappedString = StringUtils.fromUTF8(response.data);
      // Parse the JSON string into an object.
      var wrapped = JSON.parse(wrappedString);

      // This is a base64-encoded version of the raw license.
      var rawLicenseBase64 = wrapped.license;
      // Decode that base64 string into a Uint8Array and replace the response
      // data.  The raw license will be fed to the Widevine CDM.
      response.data = Uint8ArrayUtils.fromBase64(rawLicenseBase64);

      // Read additional fields from the server.
      // The server we are using in this tutorial does not send anything useful.
      // In practice, you could send any license metadata the client might need.
      // Here we log what the server sent to the JavaScript console for
      // inspection.
      console.log(wrapped);
    } catch (err) {}
  }
});

player.getNetworkingEngine().registerResponseFilter(function (type, response) {
  // Alias some utilities provided by the library.
  const StringUtils = shaka.util.StringUtils;
  const Uint8ArrayUtils = shaka.util.Uint8ArrayUtils;

  // Only manipulate license responses:
  if (type == shaka.net.NetworkingEngine.RequestType.LICENSE) {
    // This is the wrapped license, which is a JSON string.
    try {
      const wrappedString = StringUtils.fromUTF8(response.data);
      // Parse the JSON string into an object.
      const wrapped = JSON.parse(wrappedString);

      if (response.headers['client-info']) {
        console.log(response.headers['client-info']);
        window.sigmaPacker.update(atob(response.headers['client-info']));
      } else if (wrapped.clientInfo) {
        console.log(wrapped.clientInfo);
        window.sigmaPacker.update(JSON.stringify(wrapped.clientInfo));
      }

      // This is a base64-encoded version of the raw license.
      const rawLicenseBase64 = wrapped.license;
      // Decode that base64 string into a Uint8Array and replace the response
      // data.  The raw license will be fed to the Widevine CDM.
      response.data = Uint8ArrayUtils.fromBase64(rawLicenseBase64);
      // Read additional fields from the server.
      // The server we are using in this tutorial does not send anything useful.
      // In practice, you could send any license metadata the client might need.
      // Here we log what the server sent to the JavaScript console for
      // inspection.
      console.log(wrapped);
    } catch (err) {}
  }
});