สร้างขึ้นเพื่อ REACT
UI Kit ถ่ายทอดสดสำหรับ React
เพิ่มการรับชมวิดีโอไลฟ์ด้วย React Live Streaming UI Kit ของ Tencent RTC ผสานคอมโพเนนต์สำหรับผู้ชม ความคิดเห็นของผู้ชม และรายการห้องไลฟ์เข้ากับประสบการณ์รับชมที่คุณปรับแต่งได้
แหล่งข้อมูลสำหรับนักพัฒนา
เอกสารและตัวอย่าง UI Kit ถ่ายทอดสดสำหรับ React
คู่มือการผสานรวม
ติดตั้ง UI Kit ถ่ายทอดสดสำหรับ React และเชื่อมต่อผู้ใช้ของคุณ
ตัวอย่างและซอร์สโค้ด
ดูการทำงานจริงของผลิตภัณฑ์และสำรวจวิธีการนำไปใช้
รับชมการสาธิตสินค้าใน React
ให้ผู้ชมติดตามการสาธิตสินค้าของครีเอเตอร์และร่วมสนทนา แอปพลิเคชันของคุณจัดการแค็ตตาล็อกและประสบการณ์การซื้อ
การรับชมกิจกรรมสดด้วย React
นำงานนำเสนอและผู้ชมเข้าสู่แอป React ของคุณ เชื่อมต่อหน้าจอรับชมกับห้องเพื่อให้ผู้คนติดตามกิจกรรมสดได้
ความสามารถของ REACT LIVE
ฟีเจอร์รับชมวิดีโอสดสำหรับ React
รับชมสด
- คอมโพเนนต์วิดีโอถ่ายทอดสด
- การเข้าและออกจากห้อง
เข้าร่วมการสนทนา
- ความคิดเห็นของผู้ชม
- คอมโพเนนต์รายชื่อผู้ชม
ดูข้อมูลเพิ่มเติม
- รายการห้องไลฟ์
- การนำทางในแอปพลิเคชันของคุณ
สำรวจคอมโพเนนต์ไลฟ์สตรีมมิงสำหรับ React
รวมมุมมองวิดีโอ ความคิดเห็นของผู้ชม และการค้นหาห้องไว้ในเลย์เอาต์คอมโพเนนต์ React
ให้ช่วงเวลาสดเป็นจุดสำคัญ
ฝังคอมโพเนนต์วิดีโอสดไว้ในเลย์เอาต์ React และเชื่อมต่อกับการถ่ายทอดสดที่มีอยู่ การผสานรวมนี้มอบประสบการณ์การรับชมให้แก่ผู้ชม
อ่านเอกสารimport { LiveView } from 'tuikit-atomicx-react';
export function VideoPanel() {
return <LiveView />;
}เปิดโอกาสให้ผู้ชมมีส่วนร่วม
วางความคิดเห็นของผู้ชมไว้ข้างมุมมองวิดีโอไลฟ์ใน React และเชื่อมโยงทั้งบทสนทนาและวิดีโอไว้กับห้องไลฟ์เดียวกัน
อ่านเอกสารimport { BarrageList, BarrageInput } from 'tuikit-atomicx-react';
export function Comments() {
return <><BarrageList /><BarrageInput /></>;
}ช่วยให้ผู้ชมค้นหาเนื้อหาที่กำลังไลฟ์
เชื่อมต่อการค้นหาห้องกับหน้ารับชมในแอปของคุณ
อ่านเอกสารimport { LiveList } from 'tuikit-atomicx-react';
<LiveList
columnCount={3}
onLiveRoomClick={openLiveRoom}
/>การปรับแต่ง
ปรับแต่ง React Live UI Kit ของคุณ
จัดวางวิดีโอ การโต้ตอบกับผู้ชม และการนำทางรอบประสบการณ์สดในแอป React ของคุณ
เริ่มต้นใช้งาน
เพิ่มไลฟ์สตรีมลงในแอป React ของคุณ
- 01
- 02
เพิ่ม UI Kit ถ่ายทอดสดสำหรับ React
ทำตามคู่มือแพลตฟอร์มเพื่อเชื่อมต่อโปรเจกต์ของคุณ
ทำตามคู่มือการผสานรวม - 03
npm install tuikit-atomicx-react \
@tencentcloud/uikit-base-component-reactimport { 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
คำถามเกี่ยวกับการผสานรวม
รับความช่วยเหลือในการตั้งค่า UI Kit ถ่ายทอดสดสำหรับ React
ดูเอกสารสำหรับนักพัฒนาพูดคุยเกี่ยวกับแอปพลิเคชันของคุณ
พูดคุยเกี่ยวกับผลิตภัณฑ์ ปริมาณการใช้งานที่คาดการณ์ และความต้องการด้านการผสานรวมของคุณ
ติดต่อฝ่ายขายสร้างประสบการณ์รับชมสดด้วย React
เชื่อมต่อผู้ชมกับวิดีโอสด ความคิดเห็น และการค้นหาห้อง

