comms uikit react
v0.5.12
Dolby.io Communications Uikit для React предназначена для того, чтобы помочь разработчикам React уменьшить сложность строительных приложений на основе Dolby.io Communications SDK для Интернета.
Пакет состоит из четырех основных элементов:
Providers : основные компоненты для инициализации интеграции с API Dolby.io Communications и управлением государством.Hooks : Функции, ответственные за логику видеозвонков приложений видеозвонок.UI components : компоненты, которые охватывают самые популярные шаблоны приложений для видеоконференций.Conference components : компоненты пользовательского интерфейса со встроенной логикой для наиболее широко используемых функций видеозвонок/живых событий.Если вы предпочитаете начать, просмотрев полный пример кода этого руководства, см. Пример здесь.
Для полного списка компонентов и их использования перейдите в папку документации.
Следующие образцы проектов Dolby.io демонстрируют uikit в действии:
Этот набор пользовательского интерфейса протестирован, чтобы лучше всего работать со следующими версиями браузера
Это руководство демонстрирует, как использовать компоненты пользовательского интерфейса для быстрого создания основных компонентов приложения Dolby.io Communications SDK. Обязательно заполните подключение вашего приложения к разделу dolby.io, прежде чем перейти в раздел «Добавить компоненты».
Каждый компонент, продемонстрированный в Add Video Call Components, может быть построен независимо от других. Код блокирует в каждом разделе только код для этого отдельного компонента и исключает компоненты из других разделов.
Если вы предпочитаете начать, просмотрев полный образец кода, содержащий все функции в этом руководстве, см. Пример здесь.
Примечание: это руководство написано с учетом пряжи. Вы можете поменять пряжу на 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 и заполните форму. После подтверждения вашего адреса электронной почты вы войдете в систему.
Вам нужно будет сгенерировать токен для клиента для запуска этого приложения. Следуйте шагам, чтобы получить токен.
Перейдите на приборную панель и найдите пункт меню приложений , 
На следующем экране есть поле токена, где вы можете скопировать токен доступа к клиенту в ваш буфер обмена. Сгенерированный токен активен в течение указанного количества времени.
В этом разделе вам будет направлено подключение к API Dolby.io, которое позволит использовать наши функции, связанные с коммуникациями.
Интеграция Dolby.io обеспечивается компонентом CommsProvider (для связи с нашими API), который должен быть импортирован и настроен в корне вашего веб -приложения, например. src/App.js . Замените значение заполнителя для token вашим клиентским токеном доступа от Dolby.io Dashboard.
Для этой демонстрации вы будете работать только в
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 и аутентификацию клиента.
Сеанс - это соединение между клиентским приложением и API Dolby.io Communications.
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 Каждую соответствующую кнопки соединения/оставить. Теперь вставьте компонент <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 >
) ;
} ;Если вы хотите создать, присоединиться или оставить конференцию, используя свои собственные компоненты, обратитесь к Hook UseConference.
Предполагается, что все приведенные ниже компоненты видео вызовов оказались в компоненте Conference , которая находится в пределах компонента Session . Все компоненты определены и отображаются в компоненте Content . Смотрите ниже скелет:
// import { Session, Conference } from '@dolbyio/comms-uikit-react';
< Session participantInfo = { participantInfo } >
< Conference id = { conferenceId } > ... </ Conference >
</ Session >Компонент
Conferenceсодержит другие дополнительные свойства, включаяalias(String),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" />Если вы хотите отобразить участников, используя свой собственный компонент, см.
Компонент 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 . Вы можете настроить текст, показанный для Prop label (показан над компонентом) и placeholder Prop (показан, когда не будет выбран опции). < 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, USEMAROPHONE и USESPEAKER.
Вы можете использовать установленные API Voxeedsdk в приложении непосредственно, не полагаясь на наши компоненты uikit. Давайте усилим наше пример приложения для наблюдения за статусом участников.
useEffect из React. import VoxeetSDK from '@voxeet/voxeet-web-sdk' ;
import { useEffect } from 'react' ;Content . Этот крюк подписывается на мероприятие participantUpdated из Voxet 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 и его репозитория лицензированы по лицензии MIT. Перед использованием пакета @dolbyio/comms-uikit-react , пожалуйста, просмотрите и примите лицензионное соглашение о программном обеспечении Dolby.
Сторонние лицензии можно найти здесь.
© Dolby, 2023
