videosdk rtc react sdk example

SDK วิดีโอสำหรับ React JS

ที่ Video SDK เรากำลังสร้างเครื่องมือเพื่อช่วยให้บริษัทต่างๆ สร้างผลิตภัณฑ์การทำงานร่วมกันระดับโลกที่มีความสามารถสำหรับเสียง/วิดีโอสด การบันทึกบนคลาวด์ การสตรีม RTMP/HLS และ API การโต้ตอบ

- รับ ฟรี 10,000 นาที ทุกเดือน! ลองตอนนี้!

⚡️ตั้งแต่ Clone ถึง Launch - เริ่มต้นด้วยตัวอย่างใน 5 นาที!

สารบัญ

• แอพสาธิต
• ⚡ ติดตั้งด่วน
• - ข้อกำหนดเบื้องต้น
• - เรียกใช้แอปตัวอย่าง
• คุณสมบัติการประชุม
• - แนวคิดหลัก
• - การสร้างโทเค็น
• - ภาพรวมโครงการ
• ตัวอย่าง
• เอกสารประกอบของ VideoSDK
• เข้าร่วมชุมชนของเรา

แอพสาธิต

อยากรู้ว่ามันใช้งานจริงไหม? ตรวจสอบการสาธิตสดของเราที่นี่

⚡ ติดตั้งด่วน

1. ลงทะเบียนบน VideoSDK เพื่อรับคีย์ API และความลับของคุณ
2. ทำความรู้จักกับโทเค็น

- ข้อกำหนดเบื้องต้น

• ตอบสนอง v16 หรือใหม่กว่า
• โหนด v10 หรือใหม่กว่า
• บัญชี Video SDK ที่ถูกต้อง

- เรียกใช้แอปตัวอย่าง

ทำตามขั้นตอนเหล่านี้เพื่อเริ่มการทำงานของแอปตัวอย่าง:

ขั้นตอนที่ 1: โคลนพื้นที่เก็บข้อมูล

git clone https://github.com/videosdk-live/videosdk-rtc-react-sdk-example.git

ขั้นตอนที่ 2: ตั้งค่าตัวแปรสภาพแวดล้อม

เปิดตัวแก้ไขโค้ดที่คุณชื่นชอบและคัดลอกไฟล์สภาพแวดล้อมตัวอย่าง:

cp .env.example .env

ขั้นตอนที่ 3: กำหนดค่าไฟล์ .env ของคุณ

สร้างโทเค็นชั่วคราวจาก บัญชี Video SDK ของคุณและอัปเดตไฟล์ . .env :

 REACT_APP_VIDEOSDK_TOKEN = " YOUR_TEMPORARY_TOKEN "

ขั้นตอนที่ 4: ติดตั้งการพึ่งพา

ติดตั้งแพ็คเกจที่จำเป็น:

npm install

ขั้นตอนที่ 5: เปิดแอป

บิงโกถึงเวลากดปุ่มเปิดตัวแล้ว

npm run start

คุณสมบัติการประชุม

ปลดล็อกชุดฟีเจอร์อันทรงพลังเพื่อปรับปรุงการประชุมของคุณ:

คุณสมบัติ	เอกสารประกอบ	คำอธิบาย
- การตั้งค่าการโทรล่วงหน้า	ตั้งค่าพรีคอล	กำหนดค่าอุปกรณ์เสียง วิดีโอ และการตั้งค่าอื่นๆ ก่อนเข้าร่วมการประชุม
⏳ ล็อบบี้รอ	ล็อบบี้รอ	พื้นที่เสมือนจริงให้ผู้เข้าร่วมรอก่อนเข้าร่วมการประชุม
- เข้าร่วมการประชุม	เข้าร่วมการประชุม	อนุญาตให้ผู้เข้าร่วมเข้าร่วมการประชุมได้
- ออกจากการประชุม	ออกจากการประชุม	อนุญาตให้ผู้เข้าร่วมออกจากการประชุม
- สลับไมค์	การควบคุมไมค์	สลับเปิดหรือปิดไมโครโฟนระหว่างการประชุม
- สลับกล้อง	การควบคุมกล้อง	เปิดหรือปิดกล้องวิดีโอในระหว่างการประชุม
แชร์หน้าจอ	แชร์หน้าจอ	แชร์หน้าจอของคุณกับผู้เข้าร่วมคนอื่นๆ ในระหว่างการโทร
- จับภาพ	โปรแกรมจับภาพ	จับภาพของผู้เข้าร่วมรายอื่นจากสตรีมวิดีโอของพวกเขา ซึ่งมีประโยชน์อย่างยิ่งสำหรับวิดีโอ KYC และสถานการณ์การยืนยันตัวตน
- เปลี่ยนอุปกรณ์อินพุต	สลับอุปกรณ์อินพุต	สลับระหว่างอุปกรณ์อินพุตเสียงและวิดีโอต่างๆ
- เปลี่ยนเอาต์พุตเสียง	สลับเอาต์พุตเสียง	เลือกอุปกรณ์เอาท์พุตสำหรับเสียงระหว่างการประชุม
เพิ่มประสิทธิภาพแทร็ก	ติดตามการเพิ่มประสิทธิภาพ	ปรับปรุงคุณภาพและประสิทธิภาพของแทร็กสื่อ
แชท	การแชทในการประชุม	แลกเปลี่ยนข้อความกับผู้เข้าร่วมผ่านกลไกการเผยแพร่และสมัครสมาชิก
ไวท์บอร์ด	ไวท์บอร์ด	ทำงานร่วมกันด้วยภาพโดยการวาดและใส่คำอธิบายประกอบบนไวท์บอร์ดที่แชร์
- การแชร์ไฟล์	การแชร์ไฟล์	แชร์ไฟล์กับผู้เข้าร่วมระหว่างการประชุม
- การบันทึก	การบันทึก	บันทึกการประชุมเพื่อใช้อ้างอิงในอนาคต
- RTMP ถ่ายทอดสด	RTMP ถ่ายทอดสด	สตรีมการประชุมแบบสดไปยังแพลตฟอร์ม เช่น YouTube หรือ Facebook
การถอดเสียงแบบเรียลไทม์	การถอดเสียงแบบเรียลไทม์	สร้างการถอดเสียงการประชุมแบบเรียลไทม์
- สลับสื่อระยะไกล	การควบคุมสื่อระยะไกล	ควบคุมไมโครโฟนหรือกล้องของผู้เข้าร่วมระยะไกล
ปิดเสียงผู้เข้าร่วมทั้งหมด	ปิดเสียงทั้งหมด	ปิดเสียงผู้เข้าร่วมทั้งหมดพร้อมกันระหว่างการโทร
️ ลบผู้เข้าร่วมออก	ลบผู้เข้าร่วม	ดีดผู้เข้าร่วมออกจากการประชุม

- แนวคิดหลัก

ทำความเข้าใจองค์ประกอบหลักของ SDK ของเรา:

• Meeting - การประชุมแสดงถึงการสื่อสารด้วยเสียงและวิดีโอแบบเรียลไทม์

  Note: Don't confuse the terms Room and Meeting; both mean the same thing ?

• Sessions - ระยะเวลาเฉพาะที่คุณใช้ในการประชุมที่กำหนดเรียกว่าเซสชัน คุณสามารถมีได้หลายเซสชันของรหัสการประชุมเฉพาะ

• Participant - ผู้เข้าร่วมหมายถึงใครก็ตามที่เข้าร่วมเซสชันการประชุม local participant เป็นตัวแทนของตัวคุณเอง (คุณ) ในขณะที่ผู้เข้าร่วมคนอื่นๆ ทั้งหมดจะถือว่า remote participants

• Stream - สตรีมหมายถึงเนื้อหาสื่อวิดีโอหรือเสียงที่เผยแพร่โดย local participant หรือ remote participants

- การสร้างโทเค็น

โทเค็นใช้เพื่อสร้างและตรวจสอบการประชุมโดยใช้ API และยังเริ่มต้นการประชุมอีกด้วย

Development Environment :

• คุณสามารถใช้โทเค็นชั่วคราวเพื่อการพัฒนาได้ หากต้องการสร้างโทเค็นชั่วคราว ให้ไปที่แดชบอร์ดของ VideoSDK

Production Environment :

• คุณต้องตั้งค่าเซิร์ฟเวอร์การตรวจสอบสิทธิ์เพื่ออนุญาตผู้ใช้สำหรับการผลิต หากต้องการตั้งค่าเซิร์ฟเวอร์การตรวจสอบความถูกต้อง โปรดดูตัวอย่างที่เก็บข้อมูลอย่างเป็นทางการของเรา ตัวอย่าง videosdk-rtc-api-server

- ภาพรวมโครงการ

1. การตั้งค่าการโทรล่วงหน้าบนหน้าจอเข้าร่วม

• ส่วนประกอบ/DropDown.js : ส่วนประกอบแบบเลื่อนลงสำหรับการเลือกอุปกรณ์อินพุตเสียง (ไมโครโฟน) การตรวจสอบเสียงผ่าน Web Audio API และการจัดการการตั้งค่าไมโครโฟน

• ส่วนประกอบ/DropDownCam.js : ส่วนประกอบแบบเลื่อนลงสำหรับการเลือกอุปกรณ์กล้องและจัดการสิทธิ์ของกล้อง

• ส่วนประกอบ/DropDownSpeaker.js : อนุญาตให้ผู้ใช้เลือกลำโพง ทดสอบด้วยเสียงตัวอย่าง และติดตามความคืบหน้าในการเล่นเพื่อยืนยัน

• ส่วนประกอบ/NetworkStats.js : แสดงสถิติเครือข่ายแบบเรียลไทม์ เช่น ความเร็วในการอัพโหลดและดาวน์โหลด

2. สร้างหรือเข้าร่วมการประชุม

• components/screens/JoiningScreen.js : ให้ตัวเลือกแก่ผู้ใช้ในการสร้างหรือเข้าร่วมการประชุม จัดการสถานะเว็บแคมและไมโครโฟน เลือกอุปกรณ์ (ไมโครโฟน กล้อง ลำโพง) ตรวจสอบสิทธิ์ ดูตัวอย่างวิดีโอ และตรวจสอบสถิติเครือข่ายเพื่อให้แน่ใจว่ามีการตั้งค่าที่เหมาะสมก่อน เข้าสู่การประชุม

• api.js : รวมการเรียก API ทั้งหมดสำหรับการสร้างและตรวจสอบการประชุม

• components/MeetingDetailsScreen.js : แสดงตัวเลือกสำหรับการสร้างหรือการเข้าร่วมการประชุม

3. หน้าจอรอ

• components/screens/WaitingToJoin.js : แสดงภาพเคลื่อนไหว Lottie พร้อมข้อความขณะรอเข้าร่วมการประชุม หน้าจอนี้จะแสดงจนกว่าแฟล็ก isMeetingJoined เป็นจริง ซึ่งได้รับจาก meeting ที่เริ่มต้นโดยใช้ useMeeting() จาก @videosdk.live/react-sdk

4. มุมมองผู้เข้าร่วม

• components/ParticipantView.js : แสดงวิดีโอของผู้เข้าร่วมรายเดียวพร้อมการแสดงมุมสำหรับชื่อของผู้เข้าร่วม

• components/ParticipantGrid.js : แสดงตารางของผู้เข้าร่วมที่แสดงบนหน้าจอหลัก

• meeting/components/ParticipantView.js : จัดการจำนวนผู้เข้าร่วมที่จะแสดงในตารางผู้เข้าร่วม

5. ประชุมแถบด้านล่าง

• meeting/components/BottomBar.js
  ประกอบด้วยปุ่มที่แสดงที่ด้านล่างของหน้าจอ:
  • แสดงรหัสการประชุมด้วยปุ่มไอคอนคัดลอกทางด้านซ้าย
  • แสดงสัญลักษณ์การบันทึก ปุ่มยกมือ ปุ่มไมโครโฟน (พร้อมรายการไมโครโฟนที่ใช้งานได้) ปุ่มเว็บแคม (พร้อมรายการเว็บแคมที่ใช้งานได้) ปุ่มแชร์หน้าจอ และปุ่มออกจากการประชุมตรงกลาง
  • มุมขวาสุดมีปุ่มแชทและปุ่มนับผู้เข้าร่วม
  • บนหน้าจอมือถือ แท็บเล็ต หรือหน้าจอขนาดเล็ก แถบด้านล่างจะเรียงลำดับใหม่เพื่อแสดงปุ่มออก ปุ่มบันทึก ปุ่มไมโครโฟน/เว็บแคม และปุ่ม more actions ปุ่ม more actions จะเปิดลิ้นชักที่มีตัวเลือกที่เหลือ

6. มุมมองผู้นำเสนอ

• components/PresenterView.js : แสดงมุมมองเมื่อผู้เข้าร่วมแชร์หน้าจอของตน

7. แชท

• sidebar/ChatPanel.js : ประกอบด้วยแผงด้านข้างของแชท พร้อมด้วยช่องป้อนข้อมูลแชทและรายการข้อความแชท

8. รายชื่อผู้เข้าร่วม

• sidebar/ParticipantPanel.js : แสดงรายชื่อผู้เข้าร่วมที่อยู่ในการประชุม

9. ออกจากหน้าจอ

• components/screens/LeaveScreen.js : แสดงหน้าจอลาเมื่อผู้เข้าร่วมออกจากการประชุม

ตัวอย่าง

• ตัวอย่างที่สร้างไว้ล่วงหน้า
• ตัวอย่าง JavaScript SDK
• ตอบสนองตัวอย่าง Native SDK
• ตัวอย่าง Flutter SDK
• ตัวอย่าง Android Java SDK
• ตัวอย่าง Kotlin SDK ของ Android
• ตัวอย่าง SDK ของ iOS

เอกสารประกอบ

สำรวจเพิ่มเติมและเริ่มสร้างด้วย เอกสารประกอบ ของเรา

- เข้าร่วมชุมชนของเรา

• Discord : มีส่วนร่วมกับชุมชน Video SDK ถามคำถาม และแบ่งปันข้อมูลเชิงลึก
• X : ติดตามข่าวสาร อัปเดต และเคล็ดลับล่าสุดจาก Video SDK