comms uikit react
v0.5.12
Le Dolby.io Communications Uikit pour React est conçu pour aider les développeurs à réagir à réduire la complexité de la création d'applications en fonction du SDK Dolby.io Communications pour le Web.
Le package se compose de quatre éléments de base:
Providers : Les principaux composants pour initialiser l'intégration avec les API de communication Dolby.io et la gestion de l'État.Hooks : fonctions responsables de la logique des appels vidéo des applications d'appel vidéo.UI components : composants qui couvrent les modèles les plus populaires d'applications de vidéoconférence.Conference components : composants d'interface utilisateur avec logique intégrée pour les fonctionnalités d'appel vidéo / en direct les plus utilisées.Si vous préférez commencer par examiner un échantillon de code complet de ce guide, consultez l'exemple ici.
Pour une liste complète des composants et leur utilisation, accédez au dossier de documentation.
L'exemple de projets de Dolby.io suivants démontre l'Uikit en action:
Ce kit d'interface utilisateur est testé pour mieux fonctionner avec les versions de navigateur suivantes
Ce guide montre comment utiliser les composants de l'interface utilisateur pour construire rapidement les composants essentiels d'une application basée sur le sdk Dolby.io Communications. Assurez-vous de compléter la section Connectez votre application à Dolby.io avant de passer à la section des composants ajoutés.
Chaque composant démontré dans des composants d'appel vidéo ADD peut être construit indépendamment des autres. Les blocs de code dans chaque section incluent uniquement le code de ce composant individuel et excluent les composants d'autres sections.
Si vous préférez commencer par examiner un exemple de code complet contenant toutes les fonctionnalités de ce guide, consultez l'exemple ici.
Remarque: Ce guide est écrit avec le fil à l'esprit. Vous pouvez échanger du fil contre NPM ou un autre gestionnaire de packages si vous le souhaitez.
# 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 startPour configurer votre compte Dolby.io, accédez au tableau de bord Dolby.io et remplissez le formulaire. Après avoir confirmé votre adresse e-mail, vous serez connecté.
Vous devrez générer un jeton d'accès client pour exécuter cette application. Suivez les étapes pour obtenir un jeton.
Accédez au tableau de bord et trouvez l'élément de menu des applications ,
Sur l'écran suivant, il y a un champ de jeton où vous pouvez copier le jeton d'accès client dans votre presse-papiers. Le jeton généré est actif pour la durée indiquée.
Cette section vous guidera sur la connexion aux API Dolby.io, qui permettra l'utilisation de nos fonctionnalités liées aux communications.
L'intégration Dolby.io est fournie par un composant CommsProvider (pour la communication avec nos API), qui doit être importée et configurée à la racine de votre application Web, par exemple. src/App.js Remplacez la valeur d'espace réservé pour token par votre jeton d'accès client depuis le tableau de bord Dolby.io.
Aux fins de cette démo, vous ne travaillerez que dans
src/App.jsCe fichier suit la structure ci-dessous:
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 ;Cette approche est uniquement à des fins de démonstration. Pour initialiser correctement votre application pour la production, consultez l'authentification API et l'authentification du client.
Une session est une connexion entre l'application client et les API de communication Dolby.io.
Session d'importation à partir du kit d'interface utilisateur. import { Session } from '@dolbyio/comms-uikit-react' ;Session dans le composant Content . Vous devriez fournir un nom à l'aide d'un objet participantInfo , par exemple. Le nom du participant qui a établi la session. const participantInfo = { name : 'John Doe' } ;Session dans l'instruction RETOUR dans le composant Content . < Session participantInfo = { participantInfo } >
< InfoBar text = "Session has been created." style = { { margin : '0 auto' } } />
</ Session >Si vous souhaitez créer une session à l'aide de votre propre composant, reportez-vous au crochet USAYSESSION.
Une fois que votre application a établi la connexion à Dolby.io, vous pouvez accéder à ses fonctionnalités.
Une session relie les participants les uns aux autres, leur permettant de communiquer à l'aide de l'audio et / ou de la vidéo.
Conference d'importation, JoinConferenceButton et LeaveConferenceButton à partir du kit d'interface utilisateur. Importez useState de React. import { Conference , JoinConferenceButton , LeaveConferenceButton } from '@dolbyio/comms-uikit-react' ;
import { useState } from 'react' ;JoinConferenceButton dans le composant Content . La propriété joinOptions vous permet de spécifier si vous devez rejoindre la conférence avec l'audio et / ou la vidéo activée, en plus d'un nom de réunion et d'un nom d'utilisateur (généralement le nom de l'utilisateur actuel) qui peut être rendu visible pour tous les participants. const joinOptions = {
constraints : {
audio : true ,
video : true ,
} ,
} ;JoinOrLeave avec un état pour l'identifiant de conférence. Insérez la Conference , les composants de JoinConferenceButton et LeaveConferenceButton , ainsi que les joinOptions et meetingName . Nous voulons montrer JoinConferenceButton lorsqu'il n'y a pas de pièce d'identité de conférence et Conference (qui comprend le LeaveConferenceButton ) quand il y en a. Vous pouvez personnaliser la propriété toolipText à chaque boutons de jointure / laisser respectifs. Maintenant, insérez le composant <JoinOrLeave> dans l'instruction RETOUR dans le composant Content (c.-à-d. Nest à l'intérieur de Session ). Nous passons également setConferenceId en tant que rappel des propriétés onSuccess pour les deux boutons qui définiront (ou unset) l'ID de conférence lorsque l'action réussit.
IMPORTANT: Rendre un composant établira un appel en utilisant Dolby.io, si vous utilisez vos minutes gratuites pour cette démo, n'oubliez pas de quitter la conférence ou de fermer l'onglet Browser lorsque vous avez terminé!
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 vous souhaitez créer, rejoindre ou laisser une conférence en utilisant vos propres composants, reportez-vous au crochet UseConference.
Tous les composants d'appel vidéo ci-dessous sont supposés être enveloppés dans un composant Conference qui réside dans le composant Session . Les composants sont tous définis et rendus dans le composant Content . Voir ci-dessous pour le squelette:
// import { Session, Conference } from '@dolbyio/comms-uikit-react';
< Session participantInfo = { participantInfo } >
< Conference id = { conferenceId } > ... </ Conference >
</ Session >Le composant
Conferencecontient d'autres propriétés facultatives, notammentalias(String),audio(Bool),video(Bool),liveRecording(bool).
Le composant ParticipantsList peut afficher une liste des participants à la conférence en cours et leur statut, par exemple. si le participant parle actuellement.
ParticipantsList depuis le kit d'interface utilisateur. import { ParticipantsList } from '@dolbyio/comms-uikit-react' ;ParticipantsList à l'intérieur de Conference . Vous pouvez personnaliser les propriétés du texte indiquées pour chaque participant et leur statut. < ParticipantsList localText = "you" muteText = "mute" unmuteText = "unmute" soundOnText = "sound on" soundOffText = "sound off" />Si vous souhaitez afficher les participants en utilisant votre propre composant, reportez-vous au crochet UseParticipants.
Le composant ParticipantsGrid affiche les flux vidéo des participants à la conférence dans une disposition de carreaux de grille.
ParticipantsGrid du kit d'interface utilisateur. import { ParticipantsGrid } from '@dolbyio/comms-uikit-react' ;ParticipantsGrid à Conference . Vous pouvez personnaliser la propriété localText , qui est montrée pour le participant local. < ParticipantsGrid localText = "you" additionalContainerStyle = { { height : 400 } } /> Les composants locaux LocalToggleAudioButton et LocalToggleVideoButton permettent au participant local de basculer ou de désactiver leur microphone et leur caméra.
LocalToggleAudioButton et LocalToggleVideoButton à partir du kit d'interface utilisateur. import { LocalToggleAudioButton , LocalToggleVideoButton } from '@dolbyio/comms-uikit-react' ;LocalToggleAudioButton et LocalToggleVideoButton partout dans Conference . < div style = { buttonContainerStyle } >
< LocalToggleAudioButton />
< LocalToggleVideoButton />
</ div >Si vous souhaitez contrôler l'audio ou la vidéo à l'aide de vos propres composants, reportez-vous aux crochets UseAudio et UseVideo.
Le participant local peut modifier sa caméra, le microphone ou le haut-parleur de sortie préféré à l'aide des composants CameraSelect , MicrophoneSelect et SpeakersSelect .
CameraSelect , MicrophoneSelect et SpeakersSelect à partir du kit d'interface utilisateur. import { CameraSelect , MicrophoneSelect , SpeakersSelect } from '@dolbyio/comms-uikit-react' ;CameraSelect , MicrophoneSelect et SpeakersSelect , ainsi que les propriétés label et placeholder , n'importe où à l'intérieur de Conference . Vous pouvez personnaliser le texte affiché pour l' label (illustré ci-dessus du composant) et une placeholder (illustré lorsqu'aucune option n'est sélectionnée). < 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 vous souhaitez contrôler les périphériques d'entrée à l'aide de vos propres composants, reportez-vous aux crochets Usecamera, Usemicrophone et UseSpeaker.
Vous pouvez utiliser directement les API de Voxeedsdk installées dans l'application sans compter sur nos composants UIKIT. Amélilons notre exemple d'application pour observer le statut des participants.
useEffect de React. import VoxeetSDK from '@voxeet/voxeet-web-sdk' ;
import { useEffect } from 'react' ;Content . Ce crochet s'abonne à l'événement participantUpdated à partir du SDK Voxeet. Définissez l'effet du gestionnaire. Ici, vous observez le statut du participant et l'état de leur audio via la 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 ) ;
} ;
} , [ ] ) ;Vous pouvez en savoir plus sur le voxeet websDK ici
Téléchargez l'exemple de code source ici.
Veuillez consulter le guide des options de configuration supplémentaire pour en savoir plus sur les autres fonctionnalités, notamment:
Le Dolby.io Communications Uikit pour React et son référentiel sont concédés sous licence MIT. Avant d'utiliser le package @dolbyio/comms-uikit-react , veuillez consulter et accepter le contrat de licence de logiciel Dolby.
Des licences tierces peuvent être trouvées ici.
© Dolby, 2023
