สร้างขึ้นเพื่อ REACT NATIVE
UI Kit ถ่ายทอดสดสำหรับ React Native
เพิ่มการออกอากาศบนมือถือด้วย React Native Live Streaming UI Kit ของ Tencent RTC เชื่อมต่อหน้าโฮสต์ ผู้ชม และรายการห้องของ TUILiveKit เข้ากับการนำทางของแอปพลิเคชัน
แหล่งข้อมูลสำหรับนักพัฒนา
เอกสารและตัวอย่าง UI Kit ถ่ายทอดสดสำหรับ React Native
คู่มือการผสานรวม
ติดตั้ง UI Kit ถ่ายทอดสดสำหรับ React Native และเชื่อมต่อผู้ใช้ของคุณ
ตัวอย่างและซอร์สโค้ด
ดูการทำงานจริงของผลิตภัณฑ์และสำรวจวิธีการนำไปใช้
การสาธิตผลิตภัณฑ์แบบไลฟ์ด้วย React Native
ให้ผู้ชมติดตามการสาธิตสินค้าของครีเอเตอร์และร่วมสนทนา แอปพลิเคชันของคุณจัดการแค็ตตาล็อกและประสบการณ์การซื้อ
การรับชมกิจกรรมสดด้วย React Native
นำงานนำเสนอและผู้ชมมาไว้ในแอป React Native ของคุณ เชื่อมต่อหน้าจอรับชมกับห้องเพื่อให้ผู้ใช้ติดตามกิจกรรมสดได้
ความสามารถของ REACT NATIVE LIVE
ฟีเจอร์สตรีมมิงสดสำหรับ React Native
เริ่มไลฟ์
- บทบาทโฮสต์และผู้ชม
- การจัดการวงจรชีวิตของห้อง
เชื่อมโยงผู้คนเข้าด้วยกัน
- การเล่นวิดีโอสด
- การมีส่วนร่วมของผู้ชม
ทำให้เป็นของคุณเอง
- เค้าโครงแอปพลิเคชันที่ยืดหยุ่น
- องค์ประกอบเฉพาะแพลตฟอร์ม
สำรวจคอมโพเนนต์ไลฟ์สตรีมมิงสำหรับ React Native
เชื่อมต่อมุมมองโฮสต์ มุมมองผู้ชม และรายการห้องไลฟ์เข้ากับระบบนำทางของแอป
มอบพื้นที่เริ่มต้นให้ครีเอเตอร์
เพิ่มหน้าจอเตรียมตัวสำหรับโฮสต์ด้วย React Native เพื่อให้ครีเอเตอร์ดูตัวอย่างกล้องก่อนเริ่มถ่ายทอด เชื่อมต่อหน้าจอนี้กับบัญชีโฮสต์ที่ยืนยันตัวตนแล้ว
อ่านเอกสารimport { AnchorPage } from 'react-native-tuikit-live';
<AnchorPage onBack={goBack} onEndLive={showLiveSummary} />ทำให้การรับชมเป็นส่วนหนึ่งของแอปคุณ
เปิดมุมมองผู้ชม React Native ด้วยห้องถ่ายทอดสดที่เลือก เชื่อมต่อการเข้าและออกจากห้องกับการนำทางของแอป
อ่านเอกสารimport { LiveAudiencePage } from 'react-native-tuikit-live';
<LiveAudiencePage
onBack={goBack}
onEndLive={showLiveSummary}
/>เปิดประตูสู่การค้นพบไลฟ์
เพิ่มรายการที่เลือกดูได้และเชื่อมต่อกับขั้นตอนการรับชม
อ่านเอกสารimport { LiveListPage } from 'react-native-tuikit-live';
<LiveListPage onBack={goBack} />การปรับแต่ง
ปรับแต่ง React Native Live UI Kit ของคุณ
จัดวางวิดีโอ การโต้ตอบกับผู้ชม และการนำทางรอบประสบการณ์สดในแอป React Native ของคุณ
เริ่มต้นใช้งาน
เพิ่มไลฟ์สตรีมลงในแอป React Native ของคุณ
- 01
- 02
เพิ่ม UI Kit ถ่ายทอดสดสำหรับ React Native
ทำตามคู่มือแพลตฟอร์มเพื่อเชื่อมต่อโปรเจกต์ของคุณ
ทำตามคู่มือการผสานรวม - 03
git clone https://github.com/Tencent-RTC/TUIKit_ReactNative.gitimport { 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
คำถามเกี่ยวกับการผสานรวม
รับความช่วยเหลือในการตั้งค่า UI Kit ถ่ายทอดสดสำหรับ React Native
ดูเอกสารสำหรับนักพัฒนาพูดคุยเกี่ยวกับแอปพลิเคชันของคุณ
พูดคุยเกี่ยวกับผลิตภัณฑ์ ปริมาณการใช้งานที่คาดการณ์ และความต้องการด้านการผสานรวมของคุณ
ติดต่อฝ่ายขายเพิ่มการสตรีมสดลงในแอป React Native ของคุณ
เชื่อมต่อครีเอเตอร์และผู้ชมด้วย React Native Live Streaming UI Kit และคู่มือสำหรับแพลตฟอร์ม

