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

UI Kit การโทรวิดีโอสำหรับ React

เพิ่มการโทรภายในแอปด้วย React Video Calling UI Kit ของ Tencent RTC ฝัง TUICallKit เชื่อมต่อผู้ใช้ และปรับหน้าจอการโทรกับหน้าต่างลอยให้เข้ากับแอป React ของคุณ

เริ่มสร้าง ทดลองใช้เดโม Call

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

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

ข้อมูลอ้างอิงคอมโพเนนต์

สำรวจคอมโพเนนต์ UI Kit การโทรวิดีโอสำหรับ React

สำรวจคอมโพเนนต์การยืนยันตัวตนผู้ใช้

คู่มือการผสานรวม

ติดตั้ง UI Kit การโทรวิดีโอสำหรับ React และเชื่อมต่อผู้ใช้ของคุณ

การผสานรวม React เริ่มต้นอย่างรวดเร็ว

ตัวอย่างและซอร์สโค้ด

ดูการทำงานจริงของผลิตภัณฑ์และสำรวจวิธีการนำไปใช้

ทดลองใช้เดโม Call ดู ซอร์สโค้ด ของ React

วิดีโอคอลแบบตัวต่อตัวใน React

นำการสนทนาแบบเห็นหน้ามาสู่แอป React ของคุณเพื่อสร้างความสัมพันธ์ส่วนตัวหรือให้คำปรึกษา พร้อมวิดีโอและส่วนควบคุมการโทรในประสบการณ์เดียวกัน

สำรวจการให้คำปรึกษาผ่านวิดีโอ

การโทรผ่านวิดีโอแบบกลุ่มใน React

เชื่อมต่อผู้เข้าร่วมหลายคนในคอมโพเนนต์การโทร React ของคุณ ใช้คู่มือแพลตฟอร์มเพื่อกำหนดค่าขั้นตอนการโทรและเลย์เอาต์กลุ่มที่รองรับ

สำรวจการโทรแบบกลุ่ม

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

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

เชื่อมโยงผู้คน

การโทรด้วยเสียงและวิดีโอ
การจัดการสายเรียกเข้า

ควบคุมประสบการณ์การโทรได้อย่างมั่นใจ

ส่วนควบคุมกล้องและไมโครโฟน
เหตุการณ์ในวงจรชีวิตของการโทร

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

ขั้นตอนการทำงานของแอปพลิเคชัน
การผสานรวมเฉพาะแพลตฟอร์ม

สำรวจคอมโพเนนต์การโทรผ่านวิดีโอสำหรับ React

เชื่อมต่อ TUICallKit กับเค้าโครงคอมโพเนนต์ แล้วเริ่มการโทรผ่านการดำเนินการภายในแอปของคุณ

อินเทอร์เฟซการโทร

ฝังอินเทอร์เฟซการโทร React ของคุณ

เมานต์ TUICallKit ในเลย์เอาต์คอมโพเนนต์และเริ่มต้นด้วยผู้ใช้ที่ผ่านการยืนยันตัวตน คอมโพเนนต์นี้มีอินเทอร์เฟซและส่วนควบคุมการโทรให้

อ่านเอกสาร

import { TUICallKit } from '@trtc/calls-uikit-react';

export function CallView() {
  return <TUICallKit />;
}

เริ่มการโทร

เริ่มการโทรผ่านวิดีโอใน React

ส่ง ID ผู้รับจากแอปพลิเคชันของคุณไปยัง API การโทร เชื่อมโยงการดำเนินการนี้กับรายชื่อติดต่อ การสนทนา หรือปุ่มโทรในอินเทอร์เฟซ React

อ่านเอกสาร

import { TUICallKitAPI, CallMediaType } from
  '@trtc/calls-uikit-react';

await TUICallKitAPI.calls({
  userIDList: [recipientID],
  type: CallMediaType.VIDEO,
});

หน้าต่างลอย

แสดงการสนทนาไว้อย่างต่อเนื่องขณะที่ผู้ใช้ไปยังส่วนต่าง ๆ ในแอปของคุณ

อ่านเอกสาร

TUICallKitAPI.enableFloatWindow(true);

การปรับแต่ง

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

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

เลย์เอาต์และการควบคุม

ปรับประสบการณ์การโทรด้วยตัวเลือกการปรับแต่งในคู่มือแพลตฟอร์ม

อ่านเอกสาร

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

เพิ่มการโทรวิดีโอในแอป React ของคุณ

01
สร้างแอปของคุณ
เปิดใช้งาน Call สำหรับแอปพลิเคชันและผู้ใช้ทดสอบ
เปิดคอนโซล Call
02
เพิ่ม UI Kit การโทรวิดีโอสำหรับ React
ทำตามคู่มือแพลตฟอร์มเพื่อเชื่อมต่อโปรเจกต์ของคุณ
ทำตามคู่มือการผสานรวม
03
เริ่มการโทรครั้งแรกของคุณ
ลงชื่อเข้าใช้ด้วยผู้ใช้ทดสอบสองคน จากนั้นโทรออกและรับสาย
ตั้งค่าการยืนยันตัวตน

React Call UI Kit

npm install @trtc/calls-uikit-react

import { TUICallKitAPI } from '@trtc/calls-uikit-react';

await TUICallKitAPI.init({ SDKAppID, userID, userSig });

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

React Video Calling UI Kit มีอะไรบ้าง

React Video Calling UI Kit มีหน้าจอ TUICallKit และส่วนควบคุมการโทร เชื่อมต่อกับข้อมูลประจำตัวผู้ใช้และเลย์เอาต์คอมโพเนนต์ของคุณ โดยบริการ Call จะเชื่อมต่อผู้เข้าร่วม

ฉันควรใช้ SDK การโทรสำหรับ React หรือ UI Kit

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

SDK การโทรวิดีโอบน Web

วิดีโอคอลด้วย React ในเบราว์เซอร์ต้องใช้อะไรบ้าง

เริ่มต้น TUICallKit สำหรับผู้ใช้ที่ผ่านการยืนยันตัวตนและเปิดใช้บริการ Call ใช้ HTTPS หรือ localhost และจัดการสิทธิ์ของกล้อง ไมโครโฟน และการเล่นสื่อบนเบราว์เซอร์

คู่มือการผสานรวมการโทรสำหรับ React

ฉันจะยืนยันตัวตนผู้ใช้ของ UI Kit การโทรผ่านวิดีโอสำหรับ React ได้อย่างไร

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

อ่านคู่มือการยืนยันตัวตน

UI Kit วิดีโอคอลสำหรับ React ใช้งานฟรีหรือไม่

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

ดูราคาของ Call

จะผสานรวม UI Kit การโทรวิดีโอ React กับ React ได้อย่างไร?

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

อ่านคู่มือแพลตฟอร์ม

จะทดสอบ UI Kit การโทรวิดีโอ React ก่อนเผยแพร่แอปได้อย่างไร?

ทดสอบสถานะเชิญ รับสาย ปฏิเสธ และวางสายระหว่างผู้ใช้แยกกัน รวมถึงกรณีปฏิเสธสิทธิ์

อ่านคู่มือแพลตฟอร์ม

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

ใช้ TUICallKitAPI จาก @trtc/calls-uikit-react เพื่อปรับปุ่มควบคุมตามที่ API รองรับ เช่น hideFeatureButton(FeatureButton.Camera) จะซ่อนปุ่มกล้อง และ setLayoutMode(LayoutMode.LocalInLargeView) จะแสดงวิดีโอของผู้ใช้ฝั่งตนเองในมุมมองขนาดใหญ่ การตั้งค่าเลย์เอาต์นี้ใช้ได้เฉพาะวิดีโอคอลแบบตัวต่อตัว หากต้องการอินเทอร์เฟซที่แตกต่างออกไปทั้งหมด ให้พัฒนาบน TUICallEngine โดยไม่สันนิษฐานว่าทุกมุมมองภายในมี prop ของ React สำหรับแทนที่

อ่านคู่มือการปรับแต่ง

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

คำถามเกี่ยวกับการผสานรวม

รับความช่วยเหลือในการตั้งค่า UI Kit การโทรวิดีโอสำหรับ React

ดูเอกสารสำหรับนักพัฒนา

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

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

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

เพิ่มวิดีโอคอลให้กับแอป React ของคุณ

เริ่มต้นด้วย React Video Calling UI Kit เชื่อมต่อผู้ใช้ทดสอบสองคน และสร้างการโทรครั้งแรก

เริ่มต้นใช้งานฟรี ดูคู่มือ UI Kit

UI Kit การโทรวิดีโอสำหรับ React

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

ข้อมูลอ้างอิงคอมโพเนนต์

คู่มือการผสานรวม

ตัวอย่างและซอร์สโค้ด

วิดีโอคอลแบบตัวต่อตัวใน React

การโทรผ่านวิดีโอแบบกลุ่มใน React

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

เชื่อมโยงผู้คน

ควบคุมประสบการณ์การโทรได้อย่างมั่นใจ

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

สำรวจคอมโพเนนต์การโทรผ่านวิดีโอสำหรับ React

ฝังอินเทอร์เฟซการโทร React ของคุณ

เริ่มการโทรผ่านวิดีโอใน React

หน้าต่างลอย

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

เลย์เอาต์และการควบคุม

เสียงเรียกเข้าและข้อมูลระบุตัวตน

เพิ่มการโทรวิดีโอในแอป React ของคุณ

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

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

เริ่มการโทรครั้งแรกของคุณ

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

React Video Calling UI Kit มีอะไรบ้าง

ฉันควรใช้ SDK การโทรสำหรับ React หรือ UI Kit

วิดีโอคอลด้วย React ในเบราว์เซอร์ต้องใช้อะไรบ้าง

ฉันจะยืนยันตัวตนผู้ใช้ของ UI Kit การโทรผ่านวิดีโอสำหรับ React ได้อย่างไร

UI Kit วิดีโอคอลสำหรับ React ใช้งานฟรีหรือไม่

จะผสานรวม UI Kit การโทรวิดีโอ React กับ React ได้อย่างไร?

จะทดสอบ UI Kit การโทรวิดีโอ React ก่อนเผยแพร่แอปได้อย่างไร?

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

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

คำถามเกี่ยวกับการผสานรวม

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

เพิ่มวิดีโอคอลให้กับแอป React ของคุณ