คู่มือแนะนำการใช้งาน ByteArk

# วิธีการติดตั้ง ByteArk Lighthouse กับ Hls.js และ React.js

# วิธีการติดตั้ง

  1. ใส่แท็กโหลดสคริปท์ของ ByteArk Lighthouse ในไฟล์ index.html

    <script src="https://byteark-sdk.cdn.byteark.com/lighthouse/hlsjs/@latest/lighthouse-hlsjs-plugin.min.js"></script>
    1

  2. สร้าง Component สำหรับ Video player และทำการเซ็ตอัพ Hls.js และ ByteArk Lighthouse

    const videoSources = [
  {
    id: "TZyZheqEJUwC",
    label: "Big Buck Bunny",
    url: "https://byteark-playertzxedwv.stream-playlist.byteark.com/streams/TZyZheqEJUwC/playlist.m3u8",
  },
  {
    id: "TZyZhhLbiVxG",
    label: "Sintel",
    url: "https://byteark-playertzxedwv.stream-playlist.byteark.com/streams/TZyZhhLbiVxG/playlist.m3u8",
  },
];
const videoRef = useRef<HTMLVideoElement | null>(null);
const [currentSourceIndex, setCurrentSourceIndex] = useState(0);
useEffect(() => {
  const currentSource = videoSources[currentSourceIndex];
  // create Hls.js instance
  const hls = new Hls();
  // create Lighthouse Plugin instance
  const lighthouse = new window.LighthousePlugin(videoRef.current!, hls, {
    debug: true,
    projectId: 'YOUR_PROJECT_ID',
    // optional set Hls.js version
    hlsjsVersion: Hls.version,
    // optional set metadata
    metadata: {
      user: {
        userId: 'YOUR_USER_ID',
      },
      video: {
        videoId: currentSource.id,
        videoTitle: currentSource.label,
      },
    },
  });
  // load video source url
  hls.loadSource(currentSource.url);
  // attach video element to Hls.js instance
  hls.attachMedia(videoRef.current!);
  return () => {
    // destroy previous lighthouse instance
    lighthouse.destroy();
    hls.destroy();
  };
}, [currentSourceIndex]);
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55

Note

projectId ให้ระบุ project ID ที่ได้จากทาง ByteArk

  1. ทดลองเปิดเว็บเพจแล้วเปิด Developer console หากเห็นข้อความลักษณะนี้แปลว่าสามารถติดตั้งได้ถูกต้อง

    ...
[LighthousePlugin] Init Lighthouse SDK for hls.js
...
    1
    2
    3

  2. นำออพชัน debug: true ออก

# การส่งข้อมูลใหม่เมื่อมีการเปลี่ยนวิดีโอ

เมื่อมีการเปลี่ยน video url ให้ทำการเรียก destroy() method ของ Lighthouse Plugin instance เพื่อเคลียร์ข้อมูล และทำการสร้าง Lighthouse Plugin instance ใหม่ สำหรับใช้กับวิดีโอใหม่ทุกครั้ง

สามารถดูตัวอย่างการใช้งานได้ที่ ตัวอย่างเว็บเพจที่ติดตั้ง ByteArk Lighthouse กับ Hls.js และ React.js

# การปรับตั้งค่า options

Name Type Required Default Value Description
debug Boolean No false เปิด/ปิด debug
projectId String Yes - projectId ที่ได้จากทาง ByteArk
hlsjsVersion String No - version ของ Hls.js ที่ใช้งาน
metadata Object No - Metadata object ที่สามารถส่งข้อมูลเข้าสู่ระบบของ ByteArk Lighthouse
metadata.user Object No - User Metadata Object
metadata.video Object No - Video Metadata Object
metadata.custom Object No - Custom Metadata Object

# User Metadata Object

Name Type Required Description
user.userId String No ID ของผู้ใช้งาน
user.age String No อายุของผู้ใช้งาน
user.country String No ประเทศของผู้ใช้งาน
user.city String No เมือง / จังหวัดของผู้ใช้งาน
user.lat String No ละติจูดของผู้ใช้งาน
user.long String No ลองจิจูดของผู้ใช้งาน
user.gender String No เพศของผู้ใช้งาน
user.nationality String No สัญชาติของผู้ใช้งาน
user.subscriptionPlan String No แพลน subscription ของผู้ใช้งาน
user.accountCreationDate String No วันที่แอคเคานท์ของผู้ใช้งานถูกสร้าง

# Video Metadata Object

Name Type Required Description
video.videoId String No ไอดีของวิดีโอ
video.videoTitle String No ชื่อวิดีโอ
video.seriesId String No ID ของซีรี่ย์
video.seriesTitle String No ชื่อซีรี่ย์ของวิดีโอ
video.season String No ซีซั่นของวิดีโอ
video.episode String No episode ของวิดีโอ
video.subEpisode String No episode ย่อย
video.duration String No ความยาวของวิดีโอ
video.publishedDate String No เวลาที่วิดีโอถูกเผยแพร่
video.genres String No ประเภทของวิดีโอ
video.rating String No เรตของวิดีโอ

# Custom Metadata Object

Name Type Required Description
custom.d1 String No custom metadata ตัวที่ 1 ที่ต้องการส่งข้อมูล
custom.d2 String No custom metadata ตัวที่ 2 ที่ต้องการส่งข้อมูล
custom.d3 String No custom metadata ตัวที่ 3 ที่ต้องการส่งข้อมูล
custom.d4 String No custom metadata ตัวที่ 4 ที่ต้องการส่งข้อมูล
custom.d5 String No custom metadata ตัวที่ 5 ที่ต้องการส่งข้อมูล
custom.d6 String No custom metadata ตัวที่ 6 ที่ต้องการส่งข้อมูล
custom.d7 String No custom metadata ตัวที่ 7 ที่ต้องการส่งข้อมูล
custom.d8 String No custom metadata ตัวที่ 8 ที่ต้องการส่งข้อมูล
custom.d9 String No custom metadata ตัวที่ 9 ที่ต้องการส่งข้อมูล
custom.d10 String No custom metadata ตัวที่ 10 ที่ต้องการส่งข้อมูล

# TypeScript

สำหรับการใช้งานกับ TypeScript สามารถนำ Type Definition ด้านล่างไปใช้งานได้

import Hls from "hls.js";
declare interface LighthouseMetadata {
  user?: {
    userId?: string | null;
    age?: string | null;
    country?: string | null;
    city?: string | null;
    lat?: string | null;
    long?: string | null;
    gender?: string | null;
    nationality?: string | null;
    subscription_plan?: string | null;
    accountCreation_date?: string | null;
  };
  video?: {
    videoId?: string | null;
    videoTitle?: string | null;
    seriesId?: string | null;
    seriesTitle?: string | null;
    season?: string | null;
    episode?: string | null;
    subEpisode?: string | null;
    duration?: string | null;
    publishedDate?: string | null;
    genres?: string | null;
    rating?: string | null;
  };
  custom?: {
    d1: string | null;
    d2: string | null;
    d3: string | null;
    d4: string | null;
    d5: string | null;
    d6: string | null;
    d7: string | null;
    d8: string | null;
    d9: string | null;
    d10: string | null;
  };
}
declare class LighthousePlugin {
  private media;
  private hls;
  private config;
  constructor(
    media: HTMLMediaElement,
    hls: Hls,
    config: LighthousePluginConfig
  );
  get playbackId(): string | undefined;
  destroy(): void;
}
export default LighthousePlugin;
declare interface LighthousePluginConfig {
  debug?: boolean;
  projectId: string;
  hlsjsVersion?: string;
  metadata?: LighthouseMetadata;
}
declare global {
  interface Window {
    LighthousePlugin: typeof LighthousePlugin;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73

# ตัวอย่างเว็บเพจที่ติดตั้ง ByteArk Lighthouse กับ Hls.js และ React.js

สามารถดูตัวอย่างได้จาก CodeSandbox (opens new window)

← ติดตั้งบน Android →

Pricing Contact Terms of Service