comms uikit react
v0.5.12
O Dolby.io Communications Uikit for React foi projetado para ajudar a reagir desenvolvedores a reduzir a complexidade da criação de aplicativos com base no Dolby.io Communications SDK para a Web.
O pacote consiste em quatro elementos básicos:
Providers : os principais componentes para inicializar a integração com as APIs de comunicação Dolby.io e gerenciamento de estado.Hooks : Funções responsáveis pela lógica de chamada de vídeo de aplicativos de chamada de vídeo.UI components : componentes que cobrem os padrões mais populares dos aplicativos de videoconferência.Conference components : componentes da interface do usuário com lógica integrada para os recursos de chamadas/eventos ao vivo mais amplamente utilizados.Se você preferir começar revisando uma amostra de código completa deste guia, consulte o exemplo aqui.
Para uma lista completa de componentes e seu uso, acesse a pasta de documentação.
Os seguintes projetos de amostra Dolby.io demonstram o Uikit em ação:
Este kit de interface do usuário é testado para funcionar melhor com as seguintes versões do navegador
Este guia demonstra como usar os componentes da interface do usuário para criar rapidamente os componentes essenciais de um aplicativo baseado em SDK do Dolby.io Communications. Certifique -se de concluir o aplicativo Connectar seu aplicativo à seção Dolby.io antes de passar para a seção Adicionar componentes.
Cada componente demonstrado dentro dos componentes de chamada de videochamada pode ser construído independentemente dos outros. Os blocos de código dentro de cada seção incluem apenas o código para esse componente individual e excluem os componentes de outras seções.
Se você preferir começar revisando uma amostra de código completa contendo todos os recursos deste guia, consulte o exemplo aqui.
NOTA: Este guia está escrito com o YARN em mente. Você pode trocar o fio por NPM ou um gerenciador de pacotes diferente, se quiser.
# 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 startPara configurar sua conta dolby.io, acesse o Dolby.io Dashboard e preencha o formulário. Depois de confirmar seu endereço de e -mail, você será conectado.
Você precisará gerar um token de acesso ao cliente para executar este aplicativo. Siga as etapas para obter um token.
Vá para o painel e encontre o item de menu de aplicativos ,
Na próxima tela, há um campo de token onde você pode copiar o token de acesso ao cliente para a sua área de transferência. O token gerado está ativo para a quantidade indicada de tempo.
Esta seção o guiará a se conectar às APIs do Dolby.io, que permitirão o uso de nossos recursos relacionados a comunicações.
A integração do Dolby.io é fornecida por um componente CommsProvider (para comunicação com nossas APIs), que deve ser importada e configurada na raiz do seu aplicativo da web, por exemplo. src/App.js . Substitua o valor do espaço reservado pelo token pelo token de acesso ao cliente no painel Dolby.io.
Para os fins desta demonstração, você só estará trabalhando no
src/App.js. Este arquivo segue a estrutura abaixo:
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 ;Essa abordagem é apenas para fins de demonstração. Para inicializar adequadamente seu aplicativo para produção, consulte API Autentication e Autenticação do Cliente.
Uma sessão é uma conexão entre o aplicativo cliente e as APIs de comunicações do Dolby.io.
Session de importação do kit da interface do usuário. import { Session } from '@dolbyio/comms-uikit-react' ;Session no componente Content . Você deve fornecer um nome usando um objeto participantInfo , por exemplo. o nome do participante que estabeleceu a sessão. const participantInfo = { name : 'John Doe' } ;Session dentro da instrução Return no componente Content . < Session participantInfo = { participantInfo } >
< InfoBar text = "Session has been created." style = { { margin : '0 auto' } } />
</ Session >Se você deseja criar uma sessão usando seu próprio componente, consulte o gancho de uso.
Depois que seu aplicativo fizer a conexão com o dolby.io, você pode acessar seus recursos.
Uma sessão conecta os participantes um ao outro, permitindo que eles se comuniquem usando áudio e/ou vídeo.
Conference de Importação, JoinConferenceButton e LeaveConferenceButton do kit de interface do usuário. Importar useState do React. import { Conference , JoinConferenceButton , LeaveConferenceButton } from '@dolbyio/comms-uikit-react' ;
import { useState } from 'react' ;JoinConferenceButton no componente Content . A propriedade joinOptions permite especificar se deve ingressar na conferência com áudio e/ou vídeo ativado, além de um nome de reunião e nome de usuário (geralmente o nome do usuário atual) que pode ser visível a todos os participantes. const joinOptions = {
constraints : {
audio : true ,
video : true ,
} ,
} ;JoinOrLeave com um estado para o ID da conferência. Insira a Conference , JoinConferenceButton e LeaveConferenceButton Components, juntamente com as joinOptions e meetingName . Queremos mostrar JoinConferenceButton quando não há identificação de conferência e Conference (que inclui o LeaveConferenceButton ) quando existe. Você pode personalizar a propriedade toolipText cada um dos botões de união/licença respectivos. Agora, insira o componente <JoinOrLeave> dentro da instrução Return no componente Content (ou seja, Session aninhadas dentro). Também passamos setConferenceId como um retorno de chamada para as propriedades onSuccess para ambos os botões, que definirão (ou não serem) o ID da conferência quando a ação for bem -sucedida.
IMPORTANTE: Renderizar um componente estabelecerá uma chamada usando Dolby.io, se você estiver usando seus minutos gratuitos para esta demonstração, lembre -se de deixar a conferência ou fechar a guia do navegador quando terminar!
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 >
) ;
} ;Se você deseja criar, ingressar ou deixar uma conferência usando seus próprios componentes, consulte o gancho de defesa de uso.
Presume -se que todos os componentes de chamadas de vídeo sejam envolvidos em um componente Conference que reside no componente Session . Os componentes são todos definidos e renderizados no componente Content . Veja abaixo o esqueleto:
// import { Session, Conference } from '@dolbyio/comms-uikit-react';
< Session participantInfo = { participantInfo } >
< Conference id = { conferenceId } > ... </ Conference >
</ Session >O componente
Conferencecontém outras propriedades opcionais, incluindoalias(string),audio(bool),video(bool),liveRecording(bool).
O componente ParticipantsList pode exibir uma lista de participantes na conferência atual e seu status, por exemplo. se o participante está falando atualmente.
ParticipantsList do kit de interface do usuário. import { ParticipantsList } from '@dolbyio/comms-uikit-react' ;ParticipantsList em qualquer lugar dentro da Conference . Você pode personalizar as propriedades de texto mostradas para cada participante e seu status. < ParticipantsList localText = "you" muteText = "mute" unmuteText = "unmute" soundOnText = "sound on" soundOffText = "sound off" />Se você deseja exibir os participantes usando seu próprio componente, consulte o gancho de uso do uso.
O componente ParticipantsGrid exibe os fluxos de vídeo dos participantes da conferência em um layout de ladrilhos de grade.
ParticipantsGrid do kit da interface do usuário. import { ParticipantsGrid } from '@dolbyio/comms-uikit-react' ;ParticipantsGrid em qualquer lugar da Conference . Você pode personalizar a propriedade localText , que é mostrada para o participante local. < ParticipantsGrid localText = "you" additionalContainerStyle = { { height : 400 } } /> Os componentes LocalToggleAudioButton e LocalToggleVideoButton permitem que o participante local atinja ou desative o microfone e a câmera.
LocalToggleAudioButton e LocalToggleVideoButton do kit de interface do usuário. import { LocalToggleAudioButton , LocalToggleVideoButton } from '@dolbyio/comms-uikit-react' ;LocalToggleAudioButton e LocalToggleVideoButton em qualquer lugar dentro da Conference . < div style = { buttonContainerStyle } >
< LocalToggleAudioButton />
< LocalToggleVideoButton />
</ div >Se você deseja controlar o áudio ou o vídeo usando seus próprios componentes, consulte os ganchos usaudio e usevideo.
O participante local pode alterar sua câmera preferida, microfone ou alto -falante de saída usando os componentes de CameraSelect , MicrophoneSelect e SpeakersSelect .
CameraSelect , MicrophoneSelect e SpeakersSelect do kit de interface do usuário. import { CameraSelect , MicrophoneSelect , SpeakersSelect } from '@dolbyio/comms-uikit-react' ;CameraSelect , MicrophoneSelect e SpeakersSelect , juntamente com as propriedades label e placeholder , em qualquer lugar da Conference . Você pode personalizar o texto mostrado para o suporte label (mostrado acima do componente) e um suporte placeholder (mostrado quando nenhuma opção é selecionada). < 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" />Se você deseja controlar os dispositivos de entrada usando seus próprios componentes, consulte os ganchos Usecamera, UsoMicrophone e USESPaker.
Você pode usar as APIs do VoxeEdsdk instaladas diretamente no aplicativo sem depender de nossos componentes do UIKIT. Vamos aprimorar nosso aplicativo de exemplo para observar o status dos participantes.
useEffect de importação do react. import VoxeetSDK from '@voxeet/voxeet-web-sdk' ;
import { useEffect } from 'react' ;Content . Este gancho assina o evento participantUpdated do Voxeet SDK. Defina o efeito do manipulador. Aqui, você observa o status do participante e o estado de seu áudio através do console. 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 ) ;
} ;
} , [ ] ) ;Você pode aprender mais sobre o Voxeet Websdk aqui
Faça o download do código -fonte da amostra aqui.
Consulte o Guia de Opções de Configuração adicional para saber mais sobre outros recursos, incluindo:
O Dolby.io Communications Uikit for React e seu repositório são licenciados sob a licença do MIT. Antes de usar o pacote @dolbyio/comms-uikit-react , revise e aceite o contrato de licença de software Dolby.
Licenças de terceiros podem ser encontradas aqui.
© Dolby, 2023
