ผลิตภัณฑ์
Call
สร้างฟังก์ชันการโทรผ่านวิดีโอและเสียงภายในแอปได้อย่างง่ายดาย
Room
เพิ่มฟีเจอร์การประชุมลงในแอปของคุณด้วย Room SDK
Live
เพิ่มการไลฟ์สตรีมวิดีโอและเสียงแบบโต้ตอบลงในแอปของคุณ
Chat
เพิ่มประสบการณ์การรับส่งข้อความให้กับแอปของคุณด้วย Chat API
Push
เข้าถึงและกระตุ้นให้ผู้ใช้กลับมามีส่วนร่วมอีกครั้งได้ทันทีด้วย App Push และ Web Push
RTC Engine
ยกระดับการสื่อสารแบบเรียลไทม์ภายในแอปด้วย RTC SDK
In-game Voice Chat
สร้างแชตเสียงในเกมที่สมจริงด้วย GVoice SDK
Beauty AR
ผสานรวม Beauty AR สำหรับภาพและวิดีโอแบบเรียลไทม์
โซลูชัน

สร้างขึ้นเพื่อ REACT

UI Kit ถ่ายทอดสดสำหรับ React

เพิ่มการรับชมวิดีโอไลฟ์ด้วย React Live Streaming UI Kit ของ Tencent RTC ผสานคอมโพเนนต์สำหรับผู้ชม ความคิดเห็นของผู้ชม และรายการห้องไลฟ์เข้ากับประสบการณ์รับชมที่คุณปรับแต่งได้

แหล่งข้อมูลสำหรับนักพัฒนา

เอกสารและตัวอย่าง UI Kit ถ่ายทอดสดสำหรับ React

รับชมการสาธิตสินค้าใน React

ให้ผู้ชมติดตามการสาธิตสินค้าของครีเอเตอร์และร่วมสนทนา แอปพลิเคชันของคุณจัดการแค็ตตาล็อกและประสบการณ์การซื้อ

การรับชมกิจกรรมสดด้วย React

นำงานนำเสนอและผู้ชมเข้าสู่แอป React ของคุณ เชื่อมต่อหน้าจอรับชมกับห้องเพื่อให้ผู้คนติดตามกิจกรรมสดได้

ความสามารถของ REACT LIVE

ฟีเจอร์รับชมวิดีโอสดสำหรับ React

รับชมสด

  • คอมโพเนนต์วิดีโอถ่ายทอดสด
  • การเข้าและออกจากห้อง

เข้าร่วมการสนทนา

  • ความคิดเห็นของผู้ชม
  • คอมโพเนนต์รายชื่อผู้ชม

ดูข้อมูลเพิ่มเติม

  • รายการห้องไลฟ์
  • การนำทางในแอปพลิเคชันของคุณ

สำรวจคอมโพเนนต์ไลฟ์สตรีมมิงสำหรับ React

รวมมุมมองวิดีโอ ความคิดเห็นของผู้ชม และการค้นหาห้องไว้ในเลย์เอาต์คอมโพเนนต์ React

วิดีโอสด

ให้ช่วงเวลาสดเป็นจุดสำคัญ

ฝังคอมโพเนนต์วิดีโอสดไว้ในเลย์เอาต์ React และเชื่อมต่อกับการถ่ายทอดสดที่มีอยู่ การผสานรวมนี้มอบประสบการณ์การรับชมให้แก่ผู้ชม

อ่านเอกสาร
LivePlayer.tsx
import { LiveView } from 'tuikit-atomicx-react';

export function VideoPanel() {
  return <LiveView />;
}

การปรับแต่ง

ปรับแต่ง React Live UI Kit ของคุณ

จัดวางวิดีโอ การโต้ตอบกับผู้ชม และการนำทางรอบประสบการณ์สดในแอป React ของคุณ

อัตลักษณ์ทางภาพของคุณ

ปรับการนำเสนอภาพด้วยตัวเลือกการปรับแต่งที่มีอยู่บนแพลตฟอร์มของคุณ

อ่านเอกสาร

เริ่มต้นใช้งาน

เพิ่มไลฟ์สตรีมลงในแอป React ของคุณ

  1. 01

    สร้างแอปของคุณ

    เปิดใช้งาน Live สำหรับแอปพลิเคชันและผู้ใช้ทดสอบ

    เปิดคอนโซล Live
  2. 02

    เพิ่ม UI Kit ถ่ายทอดสดสำหรับ React

    ทำตามคู่มือแพลตฟอร์มเพื่อเชื่อมต่อโปรเจกต์ของคุณ

    ทำตามคู่มือการผสานรวม
  3. 03

    เชื่อมต่อกับห้องแรกของคุณ

    ให้ผู้ชมลงชื่อเข้าใช้และเปิดห้องของโฮสต์ที่มีอยู่

    ตั้งค่าการยืนยันตัวตน
React Live UI Kit
เทอร์มินัล
npm install tuikit-atomicx-react \
  @tencentcloud/uikit-base-component-react
LivePlayer.tsx
import { useLoginState } from 'tuikit-atomicx-react';

const { login } = useLoginState();
await login({ SDKAppID, userID, userSig });

คำถามที่พบบ่อยเกี่ยวกับ UI Kit ถ่ายทอดสดสำหรับ React

ฉันสามารถสร้างหน้าถ่ายทอดสดสำหรับโฮสต์ด้วย React ได้หรือไม่

ปัจจุบัน React Live Streaming UI Kit รองรับการรับชมของผู้ชมและรายการห้องถ่ายทอดสด การสตรีมฝั่งโฮสต์ด้วย React ระบุว่ากำลังจะเปิดให้บริการ โปรดใช้การใช้งานฝั่งโฮสต์ด้วย Vue เมื่อต้องการอินเทอร์เฟซการถ่ายทอดสดผ่านเว็บที่พร้อมใช้งานอยู่แล้ว

UI Kit นี้ทำงานร่วมกับ SDK อย่างไร

UI Kit มีคอมโพเนนต์อินเทอร์เฟซอยู่บนบริการพื้นฐาน เลือก SDK เมื่อต้องการควบคุม UI ของแอปพลิเคชันคุณเองได้มากขึ้น

ฉันจะเชื่อมต่อโปรแกรมดูไลฟ์ React กับการออกอากาศได้อย่างไร

เปิดใช้บริการ Live ตรวจสอบสิทธิ์ผู้ชม และเข้าร่วมห้องที่โฮสต์สร้างขึ้น ใช้บัญชีแยกกันเพื่อทดสอบหน้าจอผู้ชม React และทำตามคู่มือแพลตฟอร์มเพื่อกำหนดค่า

ฉันจะตรวจสอบสิทธิ์ผู้ใช้ React Live Streaming UI Kit ได้อย่างไร

สร้าง UserSig บนเซิร์ฟเวอร์ของคุณและส่งให้ไคลเอนต์หลังจากขั้นตอนการลงชื่อเข้าใช้ของคุณเองเสร็จสมบูรณ์ เก็บข้อมูลลับของแอปพลิเคชันไว้บนเซิร์ฟเวอร์เสมอ

UI Kit การสตรีมสดสำหรับ React ใช้งานฟรีหรือไม่

อินเทอร์เฟซและบริการ Live แบบโฮสต์มีบทบาทแตกต่างกัน เปิดใช้งานบริการสำหรับแอปพลิเคชันของคุณ แล้วตรวจสอบแพ็กเกจปัจจุบัน ความพร้อมใช้งานของฟีเจอร์ และค่าบริการตามการใช้งาน

จะผสานรวม UI Kit ไลฟ์สตรีม React กับ React ได้อย่างไร?

เริ่มต้น provider ตามเอกสารและประกอบคอมโพเนนต์ที่เชื่อมต่อแล้ว จัดการ subscription และ cleanup ให้ตรงกับวงจรชีวิต React จากนั้นทดสอบการนำทางและการ mount ซ้ำในแอปจริง

จะทดสอบ UI Kit ไลฟ์สตรีม React ก่อนเผยแพร่แอปได้อย่างไร?

ทดสอบบทบาทผู้จัดและผู้ชม เหตุการณ์ส่งหรือเล่นที่รองรับ และเชื่อมใหม่

จะปรับแต่งอินเทอร์เฟซของ UI Kit ไลฟ์สตรีม React ได้อย่างไร?

ครอบคอมโพเนนต์สำหรับผู้ชมของ React ด้วย UIKitProvider เพื่อเลือกธีมสว่างหรือมืด เช่น เรนเดอร์ LiveList ด้วย columnCount={5} และตัวจัดการ onLiveRoomClick ที่เปิดเส้นทางสำหรับผู้ชม ตัวจัดการนี้ต้องเชื่อมห้องที่เลือกเข้ากับขั้นตอนการรับชม การเปลี่ยนจำนวนคอลัมน์ของรายการเพียงอย่างเดียวไม่ได้ทำให้เข้าร่วมสตรีมได้ การผสาน React ในหน้านี้ใช้สร้างส่วนรับชมสำหรับผู้ชม ส่วนการออกอากาศต้องใช้การผสานสำหรับผู้จัดไลฟ์แยกต่างหาก

การสนับสนุนด้านการผสานรวมสำหรับ React Live

พูดคุยเกี่ยวกับแอปพลิเคชันของคุณ

พูดคุยเกี่ยวกับผลิตภัณฑ์ ปริมาณการใช้งานที่คาดการณ์ และความต้องการด้านการผสานรวมของคุณ

ติดต่อฝ่ายขาย

สร้างประสบการณ์รับชมสดด้วย React

เชื่อมต่อผู้ชมกับวิดีโอสด ความคิดเห็น และการค้นหาห้อง