ภาพรวมการใช้งาน Video Upload SDK

ByteArk Video Upload SDK เป็น JavaScript SDK ที่ใช้ในการอัปโหลดไฟล์วิดีโอของคุณไปยัง ByteArk Stream และ ByteArk Qoder

Repository URL: https://github.com/byteark/video-upload-sdk-js (opens new window)

สิ่งที่ต้องเตรียมก่อนเริ่มใช้งาน

1. สร้าง Uploader Form ใหม่ใน ByteArk Stream (หากเคยสร้าง Uploader Form แล้วสามารถข้ามขั้นตอนนี้ได้) ดูวิธีสร้าง Uploader Form ได้ที่นี่

2. คัดลอกค่า formId และ formSecret สำหรับใช้ตั้งค่า Video Upload SDK

   1. (หากคุณสร้างแบบฟอร์มใหม่ดังขั้นตอนที่ 1 แล้วสามารถข้ามข้อย่อยที่ 1-2 ไปได้เลย) คลิกเมนู Manage ที่อยู่บนแถบเมนูสีน้ำเงินทางซ้ายสุดของเว็บไซต์
   2. ในรายการด้านซ้ายมือ เลือก Plug-in > Uploader Forms (URL ของหน้าปัจจุบัน: https://stream.byteark.com/<workspaceKey>/manage/forms)
   3. เข้าไปที่ Uploader Form ที่ต้องการใช้งาน คลิกแท็บ Credentials
   4. คัดลอกค่าจากช่อง Form ID (formId) และ Form Secret (formSecret) ไว้ใช้งาน

3. คัดลอกคีย์ของโปรเจกต์ (projectKey) สำหรับใช้ตั้งค่า Video Upload SDK ดูวิธีการนำคีย์ของโปรเจกต์ไปใช้งานได้ที่นี่ (opens new window)

นำ SDK ไปใช้ในโปรเจกต์ของคุณ

1. ติดตั้ง Video Upload SDK ลงในโปรเจกต์ Node.js ของคุณ ตัวอย่างการติดตั้งด้วย npm หรือ yarn
   

• npm

npm i @byteark/video-upload-sdk

• yarn

yarn add @byteark/video-upload-sdk

2. สร้าง instance VideoUploadManager โดยใช้ส่ง options ด้วยค่าที่ได้เตรียมไว้ดังตัวอย่างโค้ดด้านล่างนี้

import { VideoUploadManager } from '@byteark/video-upload-sdk';
const uploadManager = new VideoUploadManager({
  serviceName: 'byteark.stream',
  formId: '<formId>',
  formSecret: '<formSecret>',
  projectKey: '<projectKey>',
});

3. เพิ่มไฟล์วิดีโอที่ต้องการอัปโหลดโดยเรียกใช้ method addUploadJobs

uploadManager.addUploadJobs(fileList);

4. สั่งเริ่มการอัปโหลดโดยเรียกใช้ method start

await uploadManager.start();

ตัวอย่างโค้ดแบบเต็ม

import { VideoUploadManager } from '@byteark/video-upload-sdk';
async function main() {
  // Initialize the SDK
  const uploadManager = new VideoUploadManager({
    // SDK Options
    serviceName: 'byteark.stream',
    formId: '<formId>',
    formSecret: '<formSecret>',
    projectKey: '<projectKey>',
    // Callback Functions
    onUploadProgress: (job: UploadJob, progress: UploadProgress) => {
      // Called when Video Uploading has a progress.
    },
    onUploadCompleted: (job: UploadJob) => {
      // Called when a video has uploaded.
    },
    onUploadFailed: (job: UploadJob, error: Error | DetailedError) => {
      // Called when Video Uploading failed (cannot retry).
    },
    onVideosCreated: (videoKeys: string[]) => {
      // Called after all videos are created on our service.
    },
  });
  // An example use case
  uploadManager.addUploadJobs(fileList);
  await uploadManager.start();
}
main();