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

document.addEventListener('DOMContentLoaded', function () {
  window.sigmaPacker = new SigmaPacker();
  window.sigmaPacker.onload = () => {
    console.log('SigmaPacker loaded');
  };
  window.sigmaPacker.init();
});

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

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

// SourceConfig object to be passed to Bitmovin Player instance
const source = {
  dash: DASH_MANIFEST_URL,
  hls: HLS_MANIFEST_URL,
  drm: {
    widevine: {
      LA_URL: LICENSE_WIDEVINE_URL,
    },
    playready: {
      LA_URL: LICENSE_PLAYREADY_URL,
    },
    fairplay: {
      LA_URL: LICENSE_FAIRPLAY_URL,
      certificateURL: FAIRPLAY_CERTIFICATE_URL,
    },
  },
};

let licenseURL = ''; // The variable to store license request url
// SourceConfig object to be passed to Bitmovin Player instance
const source = {
  hls: HLS_MANIFEST_URL,
  drm: {
    fairplay: {
      LA_URL: LICENSE_FAIRPLAY_URL,
      certificateURL: FAIRPLAY_CERTIFICATE_URL,
      prepareLicense: (license) => {
        return new Uint8Array(license);
      },
      prepareMessage: (event, session) => {
        return JSON.stringify({
          spc: event.messageBase64Encoded,
          assetId: session.contentId,
        });
      },
      prepareContentId: (contentId) => {
        const pattern = 'skd://';
        const idx = contentId.indexOf(pattern);

        if (idx > -1) {
          licenseURL = contentId.substring(idx + pattern.length);
          licenseURL = 'https://' + licenseURL;
          return new URL(licenseURL).searchParams.get('assetId');
        }
        return '';
      },
    },
  },
};

// The configuration object is used to initialize the Bitmovin Player instance
const config = {
  network: {
    preprocessHttpRequest: function (type, request) {
      const HttpRequestType = bitmovin.player.HttpRequestType;
      if (type === HttpRequestType.DRM_LICENSE_FAIRPLAY) {
        const customData = {
          merchantId,
          appId,
          userId,
          sessionId,
        };
        request.url = licenseURL;
        request.headers['Content-Type'] = 'application/json';
        request.headers['custom-data'] = btoa(JSON.stringify(customData));
      }
      return Promise.resolve(request);
    },
  },
};

// The configration object using init bitmovin player instance
const config = {
  network: {
    preprocessHttpRequest: function (type, request) {
      const HttpRequestType = bitmovin.player.HttpRequestType;
      if (
        type === HttpRequestType.DRM_LICENSE_WIDEVINE ||
        type === HttpRequestType.DRM_LICENSE_PLAYREADY
      ) {
        const customData = {
          merchantId: MERCHANT_ID,
          appId: APP_ID,
          userId: USER_ID,
          sessionId: SESSION_ID,
        };
        request.headers['Content-Type'] = 'application/octet-stream';
        request.headers['custom-data'] = btoa(JSON.stringify(customData));
      }
      return Promise.resolve(request);
    },
  },
};

const config = {
  network: {
    preprocessHttpRequest: function (type, request) {
      const HttpRequestType = bitmovin.player.HttpRequestType;
      if (
        type === HttpRequestType.DRM_LICENSE_WIDEVINE ||
        type === HttpRequestType.DRM_LICENSE_PLAYREADY
      ) {
        const packInfo = window.sigmaPacker.getDataPacker(request.body) || {};
        const customData = {
          merchantId: MERCHANT_ID,
          appId: APP_ID,
          userId: USER_ID,
          sessionId: SESSION_ID,
          reqId: packInfo.requestId,
          deviceInfo: packInfo.deviceInfo,
        };
        request.headers['Content-Type'] = 'application/octet-stream';
        request.headers['custom-data'] = btoa(JSON.stringify(customData));
      }
      return Promise.resolve(request);
    },
  },
};

const config = {
  network: {
    preprocessHttpResponse: function (type, response) {
      const HttpRequestType = bitmovin.player.HttpRequestType;
      if (type === HttpRequestType.DRM_LICENSE_FAIRPLAY) {
        // This is the wrapped license, which is a JSON string.
        try {
          const wrapped = JSON.parse(response.body);
          // Parse the JSON string into an object.
          // 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 FairPlay.
          response.body = Uint8Array.from(atob(rawLicenseBase64), (c) =>
            c.charCodeAt(0)
          );
          // 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.
        } catch (error) {}
      }
    },
  },
};

const config = {
  network: {
    preprocessHttpResponse: function (type, response) {
      const HttpRequestType = bitmovin.player.HttpRequestType;
      if (
        type === HttpRequestType.DRM_LICENSE_WIDEVINE ||
        type === HttpRequestType.DRM_LICENSE_PLAYREADY
      ) {
        // This is the wrapped license, which is a JSON string.
        try {
          const wrappedString = new TextDecoder().decode(response.body);
          // Parse the JSON string into an object.
          const wrapped = JSON.parse(wrappedString);
          // 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.body = Uint8Array.from(atob(rawLicenseBase64), (c) =>
            c.charCodeAt(0)
          );
          // 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.
        } catch (error) {}
      }
    },
  },
};

const config = {
  network: {
    preprocessHttpResponse: function (type, response) {
      const HttpRequestType = bitmovin.player.HttpRequestType;
      if (
        type === HttpRequestType.DRM_LICENSE_WIDEVINE ||
        type === HttpRequestType.DRM_LICENSE_PLAYREADY
      ) {
        // This is the wrapped license, which is a JSON string.
        try {
          const wrappedString = new TextDecoder().decode(response.body);
          // Parse the JSON string into an object.
          const wrapped = JSON.parse(wrappedString);

          if (response.headers['client-info']) {
            window.sigmaPacker.update(atob(response.headers['client-info']));
          } else if (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.body = Uint8Array.from(atob(rawLicenseBase64), (c) =>
            c.charCodeAt(0)
          );
          // 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.
        } catch (error) {}
      }
    },
  },
};

const player = new bitmovin.player.Player(
  document.getElementById('VIDEO_CONTAINER_ELEMENT'),
  config
);
player.load(source);