ผลิตภัณฑ์
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 NATIVE

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

เพิ่มการออกอากาศบนมือถือด้วย React Native Live Streaming UI Kit ของ Tencent RTC เชื่อมต่อหน้าโฮสต์ ผู้ชม และรายการห้องของ TUILiveKit เข้ากับการนำทางของแอปพลิเคชัน

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

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

การสาธิตผลิตภัณฑ์แบบไลฟ์ด้วย React Native

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

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

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

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

ฟีเจอร์สตรีมมิงสดสำหรับ React Native

เริ่มไลฟ์

  • บทบาทโฮสต์และผู้ชม
  • การจัดการวงจรชีวิตของห้อง

เชื่อมโยงผู้คนเข้าด้วยกัน

  • การเล่นวิดีโอสด
  • การมีส่วนร่วมของผู้ชม

ทำให้เป็นของคุณเอง

  • เค้าโครงแอปพลิเคชันที่ยืดหยุ่น
  • องค์ประกอบเฉพาะแพลตฟอร์ม

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

เชื่อมต่อมุมมองโฮสต์ มุมมองผู้ชม และรายการห้องไลฟ์เข้ากับระบบนำทางของแอป

ตัวอย่างสำหรับโฮสต์

มอบพื้นที่เริ่มต้นให้ครีเอเตอร์

เพิ่มหน้าจอเตรียมตัวสำหรับโฮสต์ด้วย React Native เพื่อให้ครีเอเตอร์ดูตัวอย่างกล้องก่อนเริ่มถ่ายทอด เชื่อมต่อหน้าจอนี้กับบัญชีโฮสต์ที่ยืนยันตัวตนแล้ว

อ่านเอกสาร
LiveScreen.tsx
import { AnchorPage } from 'react-native-tuikit-live';

<AnchorPage onBack={goBack} onEndLive={showLiveSummary} />

การปรับแต่ง

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

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

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

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

อ่านเอกสาร

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

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

  1. 01

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

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

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

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

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

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

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

    ใช้บัญชีหนึ่งเพื่อออกอากาศและอีกบัญชีหนึ่งเพื่อรับชม

    ตั้งค่าการยืนยันตัวตน
React Native Live UI Kit
เทอร์มินัล
git clone https://github.com/Tencent-RTC/TUIKit_ReactNative.git
LiveScreen.tsx
import { useLoginState } from
  'react-native-tuikit-atomic-x';

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

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

ฉันสามารถสร้างอะไรได้บ้างด้วย React Native Live UI Kit

UI Kit สำหรับการสตรีมสดบน React Native มีอินเทอร์เฟซสำหรับโฮสต์ ผู้ชม และรายการห้อง เชื่อมต่อคอมโพเนนต์ TUILiveKit เหล่านี้กับบัญชีผู้ใช้และการนำทาง React Native เพื่อสร้างขั้นตอนการรับชมที่ครบถ้วน

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

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

ฉันจะเชื่อมต่อหน้าจอผู้ชมไลฟ์บน React Native เข้ากับการออกอากาศได้อย่างไร

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

ฉันจะยืนยันตัวตนผู้ใช้ UI Kit สำหรับไลฟ์สตรีมมิงบน React Native ได้อย่างไร

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

React Native Live Streaming UI Kit ใช้งานฟรีหรือไม่

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

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

ติดตั้งแพ็กเกจและ dependency แบบเนทีฟตามเอกสาร แล้วบิลด์แอปเนทีฟใหม่ ตรวจสอบสิทธิ์ วงจรชีวิต และ callback แบบเนทีฟ โดยไม่ถือว่ารันไทม์มีเพียง JavaScript

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

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

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

ปรับแต่งหน้าจอ live/src/pages/Anchor/index.tsx ที่คัดลอกมาและทรัพยากรที่ใช้ร่วมกันของ tuikit-atomic-x เช่น เพิ่มปุ่ม Product ที่แถบด้านล่าง แล้วเชื่อม onPress กับแผงแค็ตตาล็อกของคุณ ไอคอนอยู่ใน src/static/images และข้อความอยู่ใน src/locales ภายใต้ tuikit-atomic-x ให้บิลด์ใหม่หลังแก้ไข ปุ่มนี้ไม่ได้มาพร้อมแค็ตตาล็อก ขั้นตอนชำระเงิน หรือระบบหลังบ้านสำหรับการจ่ายเงิน งานเหล่านี้ยังเป็นความรับผิดชอบของแอป

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

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

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

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

เพิ่มการสตรีมสดลงในแอป React Native ของคุณ

เชื่อมต่อครีเอเตอร์และผู้ชมด้วย React Native Live Streaming UI Kit และคู่มือสำหรับแพลตฟอร์ม