comms uikit react

ที่เก็บนี้ไม่ได้รับการดูแลอีกต่อไป

dolby.io Communications uikit สำหรับ React

ภาพรวม

Dolby.io Communications Uikit สำหรับ React ได้รับการออกแบบมาเพื่อช่วยให้นักพัฒนาตอบสนองลดความซับซ้อนของการสร้างแอพตาม Dolby.io Communications SDK สำหรับเว็บ

แพ็คเกจประกอบด้วยองค์ประกอบพื้นฐานสี่ประการ:

• Providers : องค์ประกอบหลักสำหรับการเริ่มต้นการรวมเข้ากับ API การสื่อสารของ Dolby.io และการจัดการรัฐ
• Hooks : ฟังก์ชั่นที่รับผิดชอบในการโทรทางวิดีโอของแอปพลิเคชันการโทรวิดีโอ
• UI components : ส่วนประกอบที่ครอบคลุมรูปแบบที่ได้รับความนิยมมากที่สุดของแอพพลิเคชั่นการประชุมทางวิดีโอ
• Conference components : ส่วนประกอบ UI ที่มีตรรกะในตัวสำหรับคุณสมบัติการโทรวิดีโอ/กิจกรรมสดที่ใช้กันอย่างแพร่หลาย

หากคุณต้องการเริ่มต้นโดยการตรวจสอบตัวอย่างรหัสที่สมบูรณ์ของคู่มือนี้ดูตัวอย่างที่นี่

สำหรับรายการส่วนประกอบที่สมบูรณ์และการใช้งานให้ไปที่โฟลเดอร์เอกสาร

ตัวอย่างโครงการ

โครงการตัวอย่าง dolby.io ต่อไปนี้แสดงให้เห็นถึง UIKIT ในการดำเนินการ:

• แอพโทรวิดีโอ
  • สร้างและฝังแอพการประชุมวิดีโอสดแบบหนึ่งต่อหนึ่งหรือกลุ่มเล็ก ๆ ที่มีคุณสมบัติเช่นการบันทึกการแชร์หน้าจอพื้นหลังเบลอและอื่น ๆ
• แอพกิจกรรม
  • พัฒนาและปรับแต่งแอปพลิเคชันเหตุการณ์เสมือนจริงด้วยเสียง/วิดีโอคุณภาพ Dolby และเวลาแฝงต่ำเป็นพิเศษ

เริ่มต้น

• dolby.io Communications uikit สำหรับ React
  • ภาพรวม
  • ตัวอย่างโครงการ
  • เริ่มต้น
  • ข้อกำหนดเบื้องต้น
    • เบราว์เซอร์ที่รองรับ
  • วิธีใช้คู่มือนี้
  • การตั้งค่า
    • วิธีรับบัญชี dolby.io
    • วิธีการรับโทเค็นการเข้าถึง
  • ขั้นตอน
    • เชื่อมต่อแอปของคุณกับ dolby.io
      • เริ่มต้น SDK
      • เปิดเซสชัน
    • เพิ่มส่วนประกอบ
      • เข้าร่วมหรือออกจากเซสชัน
      • แสดงผู้เข้าร่วม
      • แสดงวิดีโอ
      • แสดงการควบคุมผู้ใช้
      • เปลี่ยนอุปกรณ์อินพุตหรือเอาต์พุต
      • สังเกตสถานะของผู้เข้าร่วม
    • การกำหนดค่าเพิ่มเติม
  • ใบอนุญาต

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

• บัญชี dolby.io
• โทเค็นการเข้าถึงไคลเอนต์ dolby.io
• Voxeet Web SDK> = 3.8.0 หรือใหม่กว่า
• node.js 16.x หรือใหม่กว่า
• ติดตั้งเส้นด้าย V1.22.19
• เว็บแคมและไมโครโฟนที่ใช้งานได้

เบราว์เซอร์ที่รองรับ

ชุด UI นี้ได้รับการทดสอบให้ทำงานได้ดีที่สุดกับเบราว์เซอร์ต่อไปนี้

• Chrome 100+
• Safari 15+
• Firefox 100+
• ขอบ 100+

วิธีใช้คู่มือนี้

คู่มือนี้แสดงให้เห็นถึงวิธีการใช้ส่วนประกอบ UI เพื่อสร้างส่วนประกอบที่สำคัญของแอป Dolby.io Communications SDK อย่างรวดเร็ว ตรวจสอบให้แน่ใจว่าได้ทำการเชื่อมต่อแอปของคุณไปยังส่วน dolby.io ก่อนที่จะย้ายไปยังส่วนส่วนประกอบที่เพิ่ม

แต่ละส่วนประกอบที่แสดงภายในส่วนประกอบการโทรเพิ่มวิดีโอสามารถสร้างขึ้นได้โดยไม่ขึ้นกับส่วนประกอบอื่น ๆ บล็อกรหัสภายในแต่ละส่วนจะรวมรหัสสำหรับส่วนประกอบแต่ละตัวเท่านั้นและไม่รวมส่วนประกอบจากส่วนอื่น ๆ

หากคุณต้องการเริ่มต้นโดยการตรวจสอบตัวอย่างรหัสที่สมบูรณ์ที่มีคุณสมบัติทั้งหมดในคู่มือนี้ดูตัวอย่างที่นี่

การตั้งค่า

หมายเหตุ: คู่มือนี้เขียนโดยคำนึงถึงเส้นด้าย คุณสามารถสลับเส้นด้ายสำหรับ NPM หรือตัวจัดการแพ็คเกจอื่นได้หากต้องการ

 # Create a new React application
npx create-react-app my-app

# Change into the app directory
cd my-app

# Install UI kit
yarn add @voxeet/voxeet-web-sdk @dolbyio/comms-uikit-react

# Start the dev server
yarn run start

วิธีรับบัญชี dolby.io

หากต้องการตั้งค่าบัญชี Dolby.io ของคุณไปที่ Dolby.io Dashboard และกรอกแบบฟอร์ม หลังจากยืนยันที่อยู่อีเมลของคุณคุณจะเข้าสู่ระบบ

วิธีการรับโทเค็นการเข้าถึง

คุณจะต้องสร้างโทเค็นการเข้าถึงไคลเอนต์เพื่อเรียกใช้แอพนี้ ทำตามขั้นตอนเพื่อรับโทเค็น

1. ไปที่แผงควบคุมและค้นหารายการเมนู แอปพลิเคชัน

2. ในหน้าจอถัดไปมีฟิลด์โทเค็นที่คุณสามารถคัดลอกโทเค็นการเข้าถึงไคลเอนต์ไปยังคลิปบอร์ดของคุณ โทเค็นที่สร้างขึ้นนั้นใช้งานได้ตามระยะเวลาที่ระบุ

   

ขั้นตอน

เชื่อมต่อแอปของคุณกับ dolby.io

ส่วนนี้จะแนะนำคุณเกี่ยวกับการเชื่อมต่อกับ Dolby.io API ซึ่งจะช่วยให้การใช้คุณสมบัติที่เกี่ยวข้องกับการสื่อสารของเรา

เริ่มต้น SDK

การรวม Dolby.io จัดทำโดย CommsProvider Component (สำหรับการสื่อสารกับ API ของเรา) ซึ่งควรนำเข้าและกำหนดค่าที่รูทของเว็บแอปของคุณเช่น src/App.js แทนที่ค่าตัวยึดสำหรับ token ด้วยโทเค็นการเข้าถึงไคลเอนต์ของคุณจาก Dolby.io Dashboard

เพื่อจุดประสงค์ของการสาธิตนี้คุณจะทำงานใน src/App.js เท่านั้น ไฟล์นี้เป็นไปตามโครงสร้างด้านล่าง:

1. Import statements
2. Global variables
3. AppBase Component
4. Content Component
5. App

 // src/App.js

// 1. Import `CommsProvider` and `ThemeProvider` from the UI kit.
import { CommsProvider , InfoBar } from '@dolbyio/comms-uikit-react' ;

// 2. Define the `CommsProvider` configuration. We need two properties, a `token` and an async function that refreshes it.
const token = 'YOUR_CLIENT_ACCESS_TOKEN_HERE' ;
const refreshToken = async ( ) => token ;

// 3. Create wrapper with `CommsProvider` for entire app. Pass the `token` and `refreshToken` properties.

const AppBase = ( { children } ) => {
  return (
    < CommsProvider token = { token } refreshToken = { refreshToken } >
      { children }
    </ CommsProvider >
  ) ;
} ;

// 4. Create `Content` component. It will be main component of our app. Wrap it with previously created `AppBase`. We'll also add a fixed height to the content as we'll need this later in the guide.

function Content ( ) {
  // 5. Define styles for the main content and button containers
  const contentContainerStyle = {
    minHeight : '100vh' ,
    gap : '10px' ,
    display : 'flex' ,
    flexDirection : 'column' ,
    alignItems : 'stretch' ,
    justifyContent : 'center' ,
    backgroundColor : '#14141A' ,
    padding : '20px 0' ,
    boxSizing : 'border-box' ,
  } ;
  const buttonContainerStyle = {
    display : 'flex' ,
    alignItems : 'center' ,
    justifyContent : 'center' ,
  } ;

  return (
    < div className = "App" style = { contentContainerStyle } >
      < InfoBar text = "Voxeet Web SDK has been initialized." style = { { margin : '0 auto' } } />
      ...
    </ div >
  ) ;
}

// 6. Connect `BaseApp` with `Content` component.

const App = ( ) => {
  return (
    < AppBase >
      < Content />
    </ AppBase >
  ) ;
} ;

export default App ;

วิธีการนี้มีไว้เพื่อวัตถุประสงค์ในการสาธิตเท่านั้น หากต้องการเริ่มต้นแอปของคุณอย่างถูกต้องสำหรับการผลิตให้ดู API Authentication และการรับรองความถูกต้องของไคลเอนต์

เปิดเซสชัน

เซสชันคือการเชื่อมต่อระหว่างแอปพลิเคชันไคลเอนต์และ API การสื่อสารของ Dolby.io

1. นำเข้า Session จากชุด UI

 import { Session } from '@dolbyio/comms-uikit-react' ;

2. กำหนดการกำหนดค่า Session ในส่วนประกอบ Content คุณควรระบุชื่อโดยใช้วัตถุ participantInfo เช่น ชื่อของผู้เข้าร่วมที่จัดตั้งเซสชัน

 const participantInfo = { name : 'John Doe' } ;

3. แทรกองค์ประกอบ Session ภายในคำสั่ง Return ในส่วนประกอบ Content

 < Session participantInfo = { participantInfo } >
  < InfoBar text = "Session has been created." style = { { margin : '0 auto' } } />
</ Session >

หากคุณต้องการสร้างเซสชันโดยใช้ส่วนประกอบของคุณเองโปรดดูที่ Hook Usession

เพิ่มส่วนประกอบ

เมื่อแอปของคุณทำการเชื่อมต่อกับ Dolby.io คุณสามารถเข้าถึงคุณสมบัติของมันได้

เข้าร่วมหรือออกจากเซสชัน

เซสชันเชื่อมต่อผู้เข้าร่วมซึ่งกันและกันทำให้พวกเขาสามารถสื่อสารโดยใช้เสียงและ/หรือวิดีโอ

1. Conference นำเข้า JoinConferenceButton และ LeaveConferenceButton จากชุด UI นำเข้า useState จาก React

 import { Conference , JoinConferenceButton , LeaveConferenceButton } from '@dolbyio/comms-uikit-react' ;
import { useState } from 'react' ;

2. กำหนดการกำหนดค่า JoinConferenceButton ในส่วนประกอบ Content คุณสมบัติ joinOptions อนุญาตให้คุณระบุว่าจะเข้าร่วมการประชุมกับการเปิดใช้งานเสียงและ/หรือวิดีโอนอกเหนือจากชื่อการประชุมและชื่อผู้ใช้ (โดยปกติคือชื่อของผู้ใช้ปัจจุบัน) ซึ่งสามารถมองเห็นได้สำหรับผู้เข้าร่วมทั้งหมด

 const joinOptions = {
  constraints : {
    audio : true ,
    video : true ,
  } ,
} ;

3. กำหนดส่วนประกอบที่ใช้งาน JoinOrLeave กับสถานะสำหรับ ID การประชุม แทรก Conference JoinConferenceButton และ LeaveConferenceButton ส่วนประกอบพร้อมกับ joinOptions และ meetingName เราต้องการแสดง JoinConferenceButton เมื่อไม่มีรหัสการประชุมและ Conference (ซึ่งรวมถึง LeaveConferenceButton ) เมื่อมี คุณสามารถปรับแต่งคุณสมบัติ toolipText แต่ละปุ่มเข้าร่วม/ปล่อยให้ตามลำดับ ตอนนี้แทรก <JoinOrLeave> ส่วนประกอบภายในคำสั่ง RETURN ในส่วนประกอบ Content (เช่นซ้อนกันภายใน Session )

นอกจากนี้เรายังส่ง setConferenceId เป็นการโทรกลับไปยังคุณสมบัติ onSuccess สำหรับปุ่มทั้งสองซึ่งจะตั้งค่า (หรือ UNSET) รหัสการประชุมเมื่อการกระทำสำเร็จ

สำคัญ: การแสดงผลส่วนประกอบจะสร้างการโทรโดยใช้ dolby.io หากคุณใช้นาทีฟรีสำหรับการสาธิตนี้อย่าลืมออกจากการประชุมหรือปิดแท็บเบราว์เซอร์เมื่อคุณทำเสร็จแล้ว!

 const JoinOrLeave = ( ) => {
  const [ conferenceId , setConferenceId ] = useState ( ) ;

  return ! conferenceId ? (
    < div style = { buttonContainerStyle } >
      < JoinConferenceButton
        joinOptions = { joinOptions }
        meetingName = "My Meeting"
        username = { participantInfo . name }
        tooltipText = "Join Meeting"
        onSuccess = { ( id ) => setConferenceId ( id ) }
      >
        Join Video Call
      </ JoinConferenceButton >
    </ div >
  ) : (
    < Conference id = { conferenceId } >
      < div style = { buttonContainerStyle } >
        < LeaveConferenceButton tooltipText = "Leave Meeting" onSuccess = { ( ) => setConferenceId ( null ) } />
      </ div >
    </ Conference >
  ) ;
} ;

หากคุณต้องการสร้างเข้าร่วมหรือออกจากการประชุมโดยใช้ส่วนประกอบของคุณเองโปรดดูที่ hook useconference

ส่วนประกอบการโทรทั้งหมดด้านล่างจะถือว่าถูกห่อหุ้มภายในองค์ประกอบ Conference ที่อยู่ภายในองค์ประกอบ Session ส่วนประกอบทั้งหมดถูกกำหนดและแสดงผลภายในส่วนประกอบ Content ดูด้านล่างสำหรับโครงกระดูก:

 // import { Session, Conference } from '@dolbyio/comms-uikit-react';
< Session participantInfo = { participantInfo } >
  < Conference id = { conferenceId } > ... </ Conference >
</ Session >

ส่วนประกอบ Conference มีคุณสมบัติทางเลือกอื่น ๆ รวมถึง alias (สตริง), audio (บูล), video (บูล), liveRecording (BOOL)

แสดงผู้เข้าร่วม

องค์ประกอบ ParticipantsList สามารถแสดงรายการของผู้เข้าร่วมในการประชุมปัจจุบันและสถานะของพวกเขาเช่น ไม่ว่าผู้เข้าร่วมกำลังพูดอยู่หรือไม่

1. นำเข้ารายการ ParticipantsList จากชุด UI

 import { ParticipantsList } from '@dolbyio/comms-uikit-react' ;

2. แทรกองค์ประกอบ ParticipantsList ทุกที่ใน Conference คุณสามารถปรับแต่งคุณสมบัติข้อความที่แสดงสำหรับผู้เข้าร่วมแต่ละคนและสถานะของพวกเขา

 < ParticipantsList localText = "you" muteText = "mute" unmuteText = "unmute" soundOnText = "sound on" soundOffText = "sound off" />

หากคุณต้องการแสดงผู้เข้าร่วมโดยใช้ส่วนประกอบของคุณเองโปรดดูที่ Hook ของ USEPARTICPANTS

แสดงวิดีโอ

ส่วนประกอบของ ParticipantsGrid แสดงแสดงสตรีมวิดีโอของผู้เข้าร่วมการประชุมในรูปแบบกระเบื้องกริด

1. นำเข้า ParticipantsGrid จากชุด UI

 import { ParticipantsGrid } from '@dolbyio/comms-uikit-react' ;

3. แทรกส่วนประกอบ ParticipantsGrid ทุกที่ใน Conference คุณสามารถปรับแต่งคุณสมบัติ localText ซึ่งจะแสดงสำหรับผู้เข้าร่วมท้องถิ่น

 < ParticipantsGrid localText = "you" additionalContainerStyle = { { height : 400 } } /> 

แสดงการควบคุมผู้ใช้

ส่วนประกอบ LocalToggleAudioButton และ LocalToggleVideoButton ช่วยให้ผู้เข้าร่วมในท้องถิ่นสามารถสลับไมโครโฟนและกล้องเปิดหรือปิด

1. นำเข้า LocalToggleAudioButton และ LocalToggleVideoButton จากชุด UI

 import { LocalToggleAudioButton , LocalToggleVideoButton } from '@dolbyio/comms-uikit-react' ;

2. แทรกส่วนประกอบ LocalToggleAudioButton และ LocalToggleVideoButton ทุกที่ใน Conference

 < div style = { buttonContainerStyle } >
  < LocalToggleAudioButton />
  < LocalToggleVideoButton />
</ div >

หากคุณต้องการควบคุมเสียงหรือวิดีโอโดยใช้ส่วนประกอบของคุณเองโปรดดูที่ USEAUDIO และ USEVIDEO Hooks

เปลี่ยนอุปกรณ์อินพุตหรือเอาต์พุต

ผู้เข้าร่วมในท้องถิ่นสามารถเปลี่ยนกล้องไมโครโฟนหรือลำโพงเอาท์พุทที่ต้องการโดยใช้ส่วนประกอบ CameraSelect MicrophoneSelect และ SpeakersSelect

1. นำเข้า CameraSelect MicrophoneSelect และ SpeakersSelect จากชุด UI

 import { CameraSelect , MicrophoneSelect , SpeakersSelect } from '@dolbyio/comms-uikit-react' ;

2. แทรก CameraSelect MicrophoneSelect และ SpeakersSelect ส่วนประกอบพร้อมกับคุณสมบัติ label และตัว placeholder ทุกที่ใน Conference คุณสามารถปรับแต่งข้อความที่แสดงสำหรับ Prop label (แสดงด้านบนส่วนประกอบ) และ prop placeholder (แสดงเมื่อไม่มีตัวเลือกถูกเลือก)

 < CameraSelect label = "Camera" placeholder = "Choose a camera" labelColor = "white" />
< MicrophoneSelect label = "Microphone" placeholder = "Choose a microphone" labelColor = "white" / >
< SpeakersSelect label = "Speaker" placeholder = "Choose a speaker" labelColor = "white" />

หากคุณต้องการควบคุมอุปกรณ์อินพุตโดยใช้ส่วนประกอบของคุณเองโปรดดูที่ usecamera, usemicrophone และ hooks usespeaker

สังเกตสถานะของผู้เข้าร่วม

คุณสามารถใช้ APIs ของ Voxeedsdk ที่ติดตั้งในแอปพลิเคชันโดยตรงโดยไม่ต้องพึ่งพาส่วนประกอบ UIKIT ของเรา เรามาปรับปรุงแอพตัวอย่างของเราเพื่อสังเกตสถานะของผู้เข้าร่วม

1. นำเข้า Voxeet SDK นำเข้า useEffect จาก React

 import VoxeetSDK from '@voxeet/voxeet-web-sdk' ;
import { useEffect } from 'react' ;

2. ใส่เบ็ด useeffect ที่นี่ไปยังส่วนประกอบ Content ตะขอนี้สมัครสมาชิกกับเหตุการณ์ participantUpdated จาก Voxeet SDK กำหนดผลกระทบของตัวจัดการ ที่นี่คุณสังเกตสถานะของผู้เข้าร่วมและสถานะของเสียงผ่านคอนโซล

 useEffect ( ( ) => {
  // define the event handler here
  const handler = ( participant ) => {
    console . log ( participant . info . name , 'status:' , participant . status ) ;
    console . log ( participant . info . name , 'has audio enabled:' , participant . audioTransmitting ) ;
  } ;
  // register the handler for 'participantUpdated' event
  VoxeetSDK . conference . on ( 'participantUpdated' , handler ) ;
  return ( ) => {
    // unregister the handler
    VoxeetSDK . conference . removeListener ( 'participantUpdated' , handler ) ;
  } ;
} , [ ] ) ;

คุณสามารถเรียนรู้เพิ่มเติมเกี่ยวกับ voxeet webdk ได้ที่นี่

ดาวน์โหลดซอร์สโค้ดตัวอย่างที่นี่

การกำหนดค่าเพิ่มเติม

โปรดดูคู่มือตัวเลือกการกำหนดค่าเพิ่มเติมเพื่อเรียนรู้เพิ่มเติมเกี่ยวกับคุณสมบัติอื่น ๆ รวมถึง:

• การสร้างธีม
• การแบ่งปันหน้าจอ
• การบันทึก
• การตัดไม้
• ตะขอ

ใบอนุญาต

Dolby.io Communications Uikit สำหรับ React และที่เก็บได้รับใบอนุญาตภายใต้ใบอนุญาต MIT ก่อนที่จะใช้แพ็คเกจ @dolbyio/comms-uikit-react โปรดตรวจสอบและยอมรับข้อตกลงสิทธิ์การใช้งานซอฟต์แวร์ Dolby

ใบอนุญาตของบุคคลที่สามสามารถพบได้ที่นี่

© Dolby, 2023