comms uikit react
v0.5.12
تم تصميم Dolby.io Communications Uikit for React للمساعدة في رد فعل المطورين على تقليل تعقيد تطبيقات البناء استنادًا إلى Dolby.io Communications SDK للويب.
تتكون الحزمة من أربعة عناصر أساسية:
Providers : المكونات الرئيسية لتهيئة التكامل مع Dolby.io Communications APIs وإدارة الدولة.Hooks : وظائف مسؤولة عن منطق مكالمة الفيديو لتطبيقات مكالمات الفيديو.UI components : المكونات التي تغطي الأنماط الأكثر شعبية لتطبيقات مؤتمرات الفيديو.Conference components : مكونات واجهة المستخدم مع منطق مدمج لميزات مكالمة الفيديو/الأحداث المباشرة على نطاق واسع.إذا كنت تفضل البدء من خلال مراجعة عينة رمز كاملة لهذا الدليل ، راجع المثال هنا.
للحصول على قائمة كاملة بالمكونات واستخدامها ، انتقل إلى مجلد التوثيق.
تُظهر مشاريع عينة Dolby.io التالية Uikit في العمل:
تم اختبار مجموعة واجهة المستخدم هذه للعمل بشكل أفضل مع إصدارات المتصفح التالية
يوضح هذا الدليل كيفية استخدام مكونات واجهة المستخدم لإنشاء المكونات الأساسية بسرعة لتطبيق 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 Dashboard وأكمل النموذج. بعد تأكيد عنوان بريدك الإلكتروني ، سيتم تسجيل الدخول.
ستحتاج إلى إنشاء رمز وصول للعميل لتشغيل هذا التطبيق. اتبع الخطوات للحصول على رمز.
انتقل إلى لوحة القيادة ، وابحث عن عنصر قائمة التطبيقات ، 
على الشاشة التالية ، يوجد حقل رمزي حيث يمكنك نسخ رمز الوصول إلى العميل إلى الحافظة الخاصة بك. الرمز المميز النشط نشط للمبلغ المشار إليه من الوقت.
سوف يرشدك هذا القسم على الاتصال بـ Dolby.io APIs ، والتي ستمكن من استخدام ميزات الاتصالات الخاصة بنا.
يتم توفير تكامل dolby.io بواسطة مكون CommsProvider (للتواصل مع واجهات برمجة التطبيقات لدينا) ، والذي ينبغي استيراده وتكوينه في جذر تطبيق الويب الخاص بك ، على سبيل المثال. src/App.js . استبدل قيمة العنصر النائب token برمز وصول العميل الخاص بك من لوحة معلومات Dolby.io.
لغرض هذا العرض التوضيحي ، ستعمل فقط في
src/App.js. يتبع هذا الملف الهيكل أدناه:
Import statementsGlobal variablesAppBase ComponentContent ComponentApp
// 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 ومصادقة العميل.
الجلسة هي اتصال بين تطبيق العميل وواجهة برمجة تطبيقات Communications Dolby.io.
Session من مجموعة واجهة المستخدم. import { Session } from '@dolbyio/comms-uikit-react' ;Session في مكون Content . يجب عليك تقديم اسم باستخدام كائن participantInfo ، على سبيل المثال. اسم المشارك الذي أنشأ الجلسة. const participantInfo = { name : 'John Doe' } ;Session داخل عبارة الإرجاع في مكون Content . < Session participantInfo = { participantInfo } >
< InfoBar text = "Session has been created." style = { { margin : '0 auto' } } />
</ Session >إذا كنت ترغب في إنشاء جلسة باستخدام المكون الخاص بك ، راجع خطاف الاستخدامات.
بمجرد قيام تطبيقك بالاتصال بـ Dolby.io ، يمكنك الوصول إلى ميزاته.
تربط الجلسة المشاركين ببعضهم البعض ، مما يتيح لهم التواصل باستخدام الصوت و/أو الفيديو.
Conference الاستيراد ، JoinConferenceButton و LeaveConferenceButton من مجموعة واجهة المستخدم. استيراد useState من React. import { Conference , JoinConferenceButton , LeaveConferenceButton } from '@dolbyio/comms-uikit-react' ;
import { useState } from 'react' ;JoinConferenceButton في مكون Content . تتيح لك خاصية joinOptions تحديد ما إذا كنت تريد الانضمام إلى المؤتمر مع تمكين الصوت و/أو الفيديو ، بالإضافة إلى اسم الاجتماع واسم المستخدم (عادةً اسم المستخدم الحالي) الذي يمكن أن يكون مرئيًا لجميع المشاركين. const joinOptions = {
constraints : {
audio : true ,
video : true ,
} ,
} ;JoinOrLeave مكون وظيفي مع حالة معرف المؤتمر. أدخل Conference ومكونات JoinConferenceButton و LeaveConferenceButton ، إلى جانب joinOptions و meetingName . نريد أن نعرض JoinConferenceButton عندما لا يكون هناك معرف مؤتمر ، Conference (الذي يتضمن LeaveConferenceButton ) عندما يكون هناك. يمكنك تخصيص خاصية toolipText لكل أزرار صلة/إجازة. الآن ، insert <JoinOrLeave> مكون داخل بيان الإرجاع في مكون Content (أي Session المتداخلة). نقوم أيضًا بتمرير setConferenceId كاستدعاء إلى خصائص onSuccess لكلا الزرين اللذين سيعينون (أو إلغاء تعيين) معرف المؤتمر عندما يكون الإجراء ناجحًا.
هام: تقديم مكون سيقوم بإنشاء مكالمة باستخدام 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 >
) ;
} ;إذا كنت ترغب في إنشاء مؤتمر أو تنضم إليه أو تركه باستخدام مكوناتك الخاصة ، راجع خطاف Useconference.
من المفترض أن يتم لف جميع مكونات مكالمة الفيديو أدناه ضمن مكون Conference موجود داخل مكون Session . يتم تعريف جميع المكونات وتقديمها داخل مكون Content . انظر أدناه للهيكل العظمي:
// import { Session, Conference } from '@dolbyio/comms-uikit-react';
< Session participantInfo = { participantInfo } >
< Conference id = { conferenceId } > ... </ Conference >
</ Session >يحتوي مكون
Conferenceعلى خصائص اختيارية أخرى بما في ذلكalias(السلسلة) ،audio(BOOL) ،video(BOOL) ،liveRecording(BOOL).
يمكن لمكون ParticipantsList عرض قائمة بالمشاركين في المؤتمر الحالي وحالتهم ، على سبيل المثال. ما إذا كان المشارك يتحدث حاليا.
ParticipantsList من مجموعة واجهة المستخدم. import { ParticipantsList } from '@dolbyio/comms-uikit-react' ;ParticipantsList في أي مكان داخل Conference . يمكنك تخصيص خصائص النص الموضحة لكل مشارك وحالته. < ParticipantsList localText = "you" muteText = "mute" unmuteText = "unmute" soundOnText = "sound on" soundOffText = "sound off" />إذا كنت ترغب في عرض المشاركين باستخدام المكون الخاص بك ، راجع خطاف USEPartireSants.
يعرض مكون ParticipantsGrid تدفقات الفيديو للمشاركين في المؤتمر في تصميم بلاط الشبكة.
ParticipantsGrid من مجموعة واجهة المستخدم. import { ParticipantsGrid } from '@dolbyio/comms-uikit-react' ;ParticipantsGrid في أي مكان داخل Conference . يمكنك تخصيص خاصية localText ، والتي تظهر للمشارك المحلي. < ParticipantsGrid localText = "you" additionalContainerStyle = { { height : 400 } } /> تتيح مكونات LocalToggleAudioButton ومكونات LocalToggleVideoButton المشارك المحلي من تبديل الميكروفون والكاميرا أو إيقاف تشغيله.
LocalToggleAudioButton و LocalToggleVideoButton من مجموعة واجهة المستخدم. import { LocalToggleAudioButton , LocalToggleVideoButton } from '@dolbyio/comms-uikit-react' ;LocalToggleAudioButton ومكونات LocalToggleVideoButton في أي مكان داخل Conference . < div style = { buttonContainerStyle } >
< LocalToggleAudioButton />
< LocalToggleVideoButton />
</ div >إذا كنت ترغب في التحكم في الصوت أو الفيديو باستخدام مكوناتك الخاصة ، راجع خطافات useaudio و usevideo.
يمكن للمشارك المحلي تغيير الكاميرا المفضلة أو ميكروفون أو مكبر صوت الإخراج باستخدام مكونات CameraSelect MicrophoneSelect SpeakersSelect .
CameraSelect MicrophoneSelect SpeakersSelect من مجموعة واجهة المستخدم. import { CameraSelect , MicrophoneSelect , SpeakersSelect } from '@dolbyio/comms-uikit-react' ;CameraSelect و MicrophoneSelect SpeakersSelect ، إلى جانب خصائص label وخصائص placeholder ، في أي مكان داخل Conference . يمكنك تخصيص النص المعروض label (الموضحة فوق المكون) ودعامة 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 و USEPEAKER.
يمكنك استخدام واجهات برمجة تطبيقات Voxeedsdk المثبتة في التطبيق مباشرة دون الاعتماد على مكونات Uikit الخاصة بنا. دعنا نعزز تطبيق المثال الخاص بنا لمراقبة حالة المشاركين.
useEffect من React. import VoxeetSDK from '@voxeet/voxeet-web-sdk' ;
import { useEffect } from 'react' ;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 Websdk هنا
قم بتنزيل رمز المصدر هنا.
يرجى الاطلاع على دليل خيارات التكوين الإضافية لمعرفة المزيد حول الميزات الأخرى بما في ذلك:
يتم ترخيص Dolby.io Communications Uikit لـ React ومستودعها بموجب ترخيص معهد ماساتشوستس للتكنولوجيا. قبل استخدام الحزمة @dolbyio/comms-uikit-react ، يرجى مراجعة اتفاقية ترخيص برنامج Dolby وقبولها.
يمكن العثور على تراخيص الطرف الثالث هنا.
© Dolby ، 2023
