comms uikit react
v0.5.12
El Dolby.io Communications Uikit para React está diseñado para ayudar a React a los desarrolladores a reducir la complejidad de la creación de aplicaciones basadas en el SDK de Dolby.io Communications para Web.
El paquete consta de cuatro elementos básicos:
Providers : los componentes principales para inicializar la integración con las API de comunicaciones Dolby.io y la gestión estatal.Hooks : Funciones responsables de la lógica de videollamadas de aplicaciones de videollamadas.UI components : componentes que cubren los patrones más populares de aplicaciones de videoconferencia.Conference components : componentes de la interfaz de usuario con lógica incorporada para las características de videollamadas/eventos en vivo más utilizadas.Si prefiere comenzar revisando una muestra de código completa de esta guía, consulte el ejemplo aquí.
Para obtener una lista completa de componentes y su uso, vaya a la carpeta de documentación.
Los siguientes proyectos de muestra Dolby.io demuestran el UIKIT en acción:
Este kit de interfaz de usuario se prueba para funcionar mejor con las siguientes versiones del navegador
Esta guía demuestra cómo usar componentes de UI para construir rápidamente los componentes esenciales de una aplicación basada en Dolby.io Communications SDK. Asegúrese de completar la sección Conectar su aplicación a Dolby.io antes de pasar a la sección Agregar componentes.
Cada componente demostrado dentro de los componentes de videollamados Agregar se puede construir independientemente de los demás. Los bloqueos de código dentro de cada sección solo incluyen el código para ese componente individual y excluyen los componentes de otras secciones.
Si prefiere comenzar revisando una muestra de código completa que contiene todas las características de esta guía, consulte el ejemplo aquí.
Nota: Esta guía está escrita con hilo en mente. Puede cambiar el hilo por NPM o un administrador de paquetes diferente si lo desea.
# 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 su cuenta Dolby.io, vaya al tablero Dolby.io y complete el formulario. Después de confirmar su dirección de correo electrónico, se registrará.
Deberá generar un token de acceso al cliente para ejecutar esta aplicación. Siga los pasos para obtener un token.
Vaya al tablero y busque el elemento del menú de aplicaciones , 
En la siguiente pantalla, hay un campo de token donde puede copiar el token de acceso al cliente a su portapapeles. El token generado está activo durante la cantidad de tiempo indicada.
Esta sección lo guiará para conectarse a las API Dolby.io, que permitirá el uso de nuestras características relacionadas con las comunicaciones.
La integración Dolby.io es proporcionada por un componente CommsProvider (para comunicación con nuestras API), que debe importarse y configurarse en la raíz de su aplicación web, por ejemplo. src/App.js . Reemplace el valor del marcador de posición para token con el token de acceso de su cliente desde el tablero Dolby.io.
Para el propósito de esta demostración, solo trabajará en
src/App.js. Este archivo sigue la estructura a continuación:
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 ;Este enfoque es solo para fines de demostración. Para inicializar correctamente su aplicación para la producción, consulte la autenticación de la API y la autenticación del cliente.
Una sesión es una conexión entre la aplicación del cliente y las API de comunicaciones Dolby.io.
Session de importación del kit de interfaz de usuario. import { Session } from '@dolbyio/comms-uikit-react' ;Session en el componente Content . Debe proporcionar un nombre utilizando un objeto participantInfo , por ejemplo. El nombre del participante que estableció la sesión. const participantInfo = { name : 'John Doe' } ;Session dentro de la declaración de retorno en el componente Content . < Session participantInfo = { participantInfo } >
< InfoBar text = "Session has been created." style = { { margin : '0 auto' } } />
</ Session >Si desea crear una sesión utilizando su propio componente, consulte el gancho de usossession.
Una vez que su aplicación ha hecho la conexión con Dolby.io, puede acceder a sus características.
Una sesión conecta a los participantes entre sí, lo que les permite comunicarse usando audio y/o video.
Conference de importación, JoinConferenceButton y LeaveConferenceButton del kit UI. Importar useState de React. import { Conference , JoinConferenceButton , LeaveConferenceButton } from '@dolbyio/comms-uikit-react' ;
import { useState } from 'react' ;JoinConferenceButton en el componente Content . La propiedad joinOptions le permite especificar si se une a la conferencia con audio y/o video habilitado, además de un nombre de reunión y nombre de usuario (generalmente el nombre del usuario actual) que se puede hacer visible para todos los participantes. const joinOptions = {
constraints : {
audio : true ,
video : true ,
} ,
} ;JoinOrLeave con un estado para la identificación de la conferencia. Inserte la Conference , JoinConferenceButton y los componentes LeaveConferenceButton , junto con los joinOptions y meetingName . Queremos mostrar JoinConferenceButton cuando no hay una identificación de la conferencia y Conference (que incluye el LeaveConferenceButton ) cuando hay. Puede personalizar la propiedad toolipText cada botones de unión/licencia respectivos. Ahora, inserte el componente <JoinOrLeave> dentro de la declaración de retorno en el componente Content (es decir, Session interna anidada). También pasamos setConferenceId como una devolución de llamada a las propiedades onSuccess para ambos botones que establecerán (o no) la ID de conferencia cuando la acción sea exitosa.
IMPORTANTE: Renderizar un componente establecerá una llamada usando Dolby.io, si está utilizando sus minutos gratuitos para esta demostración, ¡recuerde dejar la conferencia o cerrar la pestaña del navegador cuando haya terminado!
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 >
) ;
} ;Si desea crear, unirse o dejar una conferencia utilizando sus propios componentes, consulte el gancho USEConference.
Se supone que todos los componentes de videollamadas a continuación están envueltos dentro de un componente Conference que reside dentro del componente Session . Todos los componentes están definidos y renderizados dentro del componente Content . Vea a continuación el esqueleto:
// import { Session, Conference } from '@dolbyio/comms-uikit-react';
< Session participantInfo = { participantInfo } >
< Conference id = { conferenceId } > ... </ Conference >
</ Session >El componente
Conferencecontiene otras propiedades opcionales que incluyenalias(String),audio(BOOL),video(BOOL),liveRecording(BOOL).
El componente ParticipantsList puede mostrar una lista de participantes en la conferencia actual y su estado, por ejemplo. Si el participante está hablando actualmente.
ParticipantsList del kit de interfaz de usuario. import { ParticipantsList } from '@dolbyio/comms-uikit-react' ;ParticipantsList en cualquier lugar dentro de Conference . Puede personalizar las propiedades de texto que se muestran para cada participante y su estado. < ParticipantsList localText = "you" muteText = "mute" unmuteText = "unmute" soundOnText = "sound on" soundOffText = "sound off" />Si desea mostrar a los participantes utilizando su propio componente, consulte el gancho UseParticipants.
El componente ParticipantsGrid muestra las transmisiones de video de los participantes de la conferencia en un diseño de baldosas de cuadrícula.
ParticipantsGrid de la UI Kit. import { ParticipantsGrid } from '@dolbyio/comms-uikit-react' ;ParticipantsGrid en cualquier lugar dentro de Conference . Puede personalizar la propiedad localText , que se muestra para el participante local. < ParticipantsGrid localText = "you" additionalContainerStyle = { { height : 400 } } /> Los componentes LocalToggleAudioButton y LocalToggleVideoButton permiten al participante local activar o desactivar su micrófono y cámara.
LocalToggleAudioButton y LocalToggleVideoButton del kit de interfaz de usuario. import { LocalToggleAudioButton , LocalToggleVideoButton } from '@dolbyio/comms-uikit-react' ;LocalToggleAudioButton y LocalToggleVideoButton en cualquier lugar dentro de Conference . < div style = { buttonContainerStyle } >
< LocalToggleAudioButton />
< LocalToggleVideoButton />
</ div >Si desea controlar el audio o el video utilizando sus propios componentes, consulte el USEAUDIO y USE Video Hooks.
El participante local puede cambiar su cámara preferida, micrófono o altavoz de salida utilizando CameraSelect , MicrophoneSelect y SpeakersSelect COMPONENTES.
CameraSelect , MicrophoneSelect y SpeakersSelect desde el kit de interfaz de usuario. import { CameraSelect , MicrophoneSelect , SpeakersSelect } from '@dolbyio/comms-uikit-react' ;CameraSelect , MicrophoneSelect y SpeakersSelect , junto con la label y las propiedades placeholder , en cualquier lugar dentro de Conference . Puede personalizar el texto que se muestra para el accesorio label (que se muestra arriba del componente) y un accesorio placeholder (que se muestra cuando no se selecciona ninguna opción). < 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" />Si desea controlar los dispositivos de entrada utilizando sus propios componentes, consulte los ganchos USECamera, USEMicrophone y Usespeaker.
Puede usar las API de VoxeedSDK instaladas en la aplicación directamente sin confiar en nuestros componentes UIKIT. Mejoremos nuestra aplicación de ejemplo para observar el estado de los participantes.
useEffect de React. import VoxeetSDK from '@voxeet/voxeet-web-sdk' ;
import { useEffect } from 'react' ;Content . Este gancho se suscribe al evento participantUpdated del Voxeet SDK. Defina el efecto del controlador. Aquí, observa el estado del participante y el estado de su audio a través de la consola. 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 ) ;
} ;
} , [ ] ) ;Puede obtener más información sobre el Voxeet WebSDK aquí
Descargue el código fuente de muestra aquí.
Consulte la Guía de opciones de configuración adicionales para obtener más información sobre otras características que incluyen:
El Dolby.io Communications Uikit para React y su repositorio tienen licencia bajo la licencia MIT. Antes de usar el paquete @dolbyio/comms-uikit-react , revise y acepte el acuerdo de licencia de software Dolby.
Las licencias de terceros se pueden encontrar aquí.
© Dolby, 2023
