การใช้งานกับ TypeScript SDK

สำหรับโปรเจกต์ที่ใช้ TypeScript หรือ JavaScript bundler (เช่น Vite, Webpack) สามารถติดตั้งแพ็กเกจเสริมเพื่อให้ได้ type definition และ helper function สำหรับเรียกใช้ SDK

การติดตั้ง

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

หมายเหตุ: แพ็กเกจ npm นี้เป็น type definition และ helper function เท่านั้น — ยังคงต้องเพิ่ม <script> tag ของ SDK ในหน้า HTML ด้วยเช่นเดิม

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

การใช้งาน loadPassportWebSDK

ฟังก์ชัน loadPassportWebSDK() จะคืนค่า instance จาก window.PassportWebSDK ที่โหลดมาจาก Script Tag — หากยังไม่ได้โหลด SDK จะ throw 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();

การใช้งานกับ HLS.js

ตัวอย่างการใช้ getXhrSetup() ร่วมกับ HLS.js ในโปรเจกต์ TypeScript

สำหรับการได้มาของ JWT Token และ Key Server URL สามารถอ้างอิงได้จาก การติดตั้งและยืนยันตัวตนเบื้องต้น

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();