TypeScript SDK

For projects using TypeScript or a JavaScript bundler (e.g., Vite, Webpack), you can install a companion package that provides type definitions and a helper function for accessing the SDK.

Installation

npm install @byteark/passport-clearkey-web-sdk

Note: This npm package provides type definitions and a helper function only — you still need to add the SDK <script> tag to your HTML page.

<script src="https://byteark-sdk.cdn.byteark.com/passport-clearkey/web-sdk/v0/passport-web-sdk.js"></script>

Using loadPassportWebSDK

The loadPassportWebSDK() function returns the instance from window.PassportWebSDK loaded by the Script Tag — if the SDK has not been loaded yet, it will throw an Error.

import { loadPassportWebSDK } from '@byteark/passport-clearkey-web-sdk';
import type { PassportWebSDK } from '@byteark/passport-clearkey-web-sdk';
async function setup(): Promise<void> {
  const sdk: PassportWebSDK | null = await loadPassportWebSDK();
  if (!sdk) {
    console.error('SDK is not available');
    return;
  }
  // Authenticate
  const result = await sdk.initAuth(
    'YOUR_JWT_TOKEN',
    'https://YOUR_KEY_SERVER_URL',
    { logEnabled: true }
  );
  console.log('Authentication successful:', result.message);
}
setup();

Using with HLS.js

Example of using getXhrSetup() with HLS.js in a TypeScript project.

For details on obtaining the JWT Token and Key Server URL, see the ClearKey Authentication Guideline.

import { loadPassportWebSDK } from '@byteark/passport-clearkey-web-sdk';
import Hls from 'hls.js';
async function playVideo(): Promise<void> {
  const sdk = await loadPassportWebSDK();
  if (!sdk) return;
  // 1. Authenticate
  await sdk.initAuth('YOUR_JWT_TOKEN', 'https://YOUR_KEY_SERVER_URL');
  // 2. Create HLS.js with xhrSetup from SDK
  const xhrSetup = sdk.getXhrSetup();
  const hls = new Hls({ xhrSetup });
  const video = document.getElementById('video') as HTMLVideoElement;
  hls.loadSource('YOUR_HLS_URL');
  hls.attachMedia(video);
  hls.on(Hls.Events.MANIFEST_PARSED, () => {
    video.play();
  });
}
playVideo();