comms uikit react
v0.5.12
Das Dolby.io Communications UIKIT für React soll React -Entwicklern helfen, die Komplexität des Aufbaus von Apps auf der Grundlage des Dolby.io Communications SDK für Web zu verringern.
Das Paket besteht aus vier Grundelementen:
Providers : Die Hauptkomponenten zur Initialisierung der Integration in Dolby.io Communications -APIs und des staatlichen Managements.Hooks : Funktionen für die Videoanruflogik von Videoanrufanwendungen.UI components : Komponenten, die die beliebtesten Muster von Videokonferenzanwendungen abdecken.Conference components : UI-Komponenten mit integrierter Logik für die am häufigsten verwendeten Funktionen für Videoanrufe/Live-Events.Wenn Sie es vorziehen, mit einem vollständigen Code -Beispiel dieses Handbuchs zu beginnen, siehe Beispiel hier.
Eine vollständige Liste der Komponenten und deren Verwendung finden Sie in den Dokumentationsordner.
Die folgenden Probenprojekte von Dolby.io zeigen den UIKIT in Aktion:
Dieses UI -Kit wird getestet, um mit den folgenden Browserversionen am besten zu arbeiten
Dieser Handbuch zeigt, wie Sie mit UI -Komponenten die wesentlichen Komponenten einer SDK -basierten App von Dolby.io Communications schnell erstellen. Stellen Sie sicher, dass Sie die Verbindung Ihrer App mit dem Abschnitt Dolby.io verbinden, bevor Sie in den Abschnitt "Addition -Komponenten" wechseln.
Jede Komponente, die in der Add -Video -Aufrufkomponenten demonstriert wurde, kann unabhängig von den anderen erstellt werden. Die Codeblöcke in jedem Abschnitt enthalten nur den Code für diese einzelne Komponente und schließen die Komponenten aus anderen Abschnitten aus.
Wenn Sie es vorziehen, mit einem vollständigen Code -Beispiel zu beginnen, der alle Funktionen in diesem Handbuch enthält, finden Sie im Beispiel hier.
Hinweis: Dieser Leitfaden ist mit Garn geschrieben. Sie können Garn gegen NPM oder einen anderen Paketmanager austauschen, wenn Sie möchten.
# 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 startUm Ihr Dolby.io -Konto einzurichten, gehen Sie zu Dolby.io Dashboard und füllen Sie das Formular aus. Nachdem Sie Ihre E -Mail -Adresse bestätigt haben, werden Sie angemeldet.
Sie müssen ein Client -Zugriffstoken generieren, um diese App auszuführen. Befolgen Sie die Schritte, um ein Token zu erhalten.
Gehen Sie zum Dashboard und suchen Sie den Menüpunkt der Anwendungen . 
Auf dem nächsten Bildschirm befindet sich ein Token -Feld, in dem Sie das Client -Zugriffs -Token in Ihre Zwischenablage kopieren können. Das erzeugte Token ist für die angegebene Zeit aktiv.
In diesem Abschnitt werden Sie mit der Verbindung mit der Dolby.io -APIs eine Verbindung hergestellt, die die Verwendung unserer Kommunikationsfunktionen ermöglicht.
Die Integration von Dolby.io wird von einer CommsProvider -Komponente (zur Kommunikation mit unseren APIs) bereitgestellt, die im Root Ihrer Web -App importiert und konfiguriert werden sollte, z. src/App.js . Ersetzen Sie den Platzhalterwert für token durch Ihr Kunden -Zugriffs -Token aus dem Dashboard dolby.io.
Für die Zwecke dieser Demo arbeiten Sie nur in
src/App.js. Diese Datei folgt der folgenden Struktur:
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 ;Dieser Ansatz dient nur für Demo -Zwecke. Um Ihre App für die Produktion ordnungsgemäß zu initialisieren, siehe API -Authentifizierung und Client -Authentifizierung.
Eine Sitzung ist eine Verbindung zwischen der Client -Anwendung und der Dolby.io Communications -APIs.
Session aus dem UI -Kit importieren. import { Session } from '@dolbyio/comms-uikit-react' ;Session in der Content . Sie sollten einen Namen unter Verwendung eines participantInfo angeben, z. Der Name des Teilnehmers, der die Sitzung eingerichtet hat. const participantInfo = { name : 'John Doe' } ;Session in die Rückgabeanweisung in Content ein. < Session participantInfo = { participantInfo } >
< InfoBar text = "Session has been created." style = { { margin : '0 auto' } } />
</ Session >Wenn Sie eine Sitzung mit Ihrer eigenen Komponente erstellen möchten, lesen Sie den UseSession -Hook.
Sobald Ihre App die Verbindung zu Dolby.io hergestellt hat, können Sie auf die Funktionen zugreifen.
Eine Sitzung verbindet die Teilnehmer miteinander, sodass sie mit Audio und/oder Video kommunizieren können.
Conference , JoinConferenceButton und LeaveConferenceButton aus dem UI -Kit. useState von reagieren. import { Conference , JoinConferenceButton , LeaveConferenceButton } from '@dolbyio/comms-uikit-react' ;
import { useState } from 'react' ;JoinConferenceButton -Konfiguration in der Content . Mit der Eigenschaft joinOptions können Sie angeben, ob Sie der Konferenz mit Audio- und/oder Video aktiviert werden sollen, zusätzlich zu einem MeetingNamen und einem Benutzernamen (normalerweise der Name des aktuellen Benutzers), der für alle Teilnehmer sichtbar gemacht werden kann. const joinOptions = {
constraints : {
audio : true ,
video : true ,
} ,
} ;JoinOrLeave mit einem Staat für die Konferenz -ID. Fügen Sie die Conference , die Komponenten JoinConferenceButton und LeaveConferenceButton zusammen mit den joinOptions und meetingName ein. Wir möchten JoinConferenceButton zeigen, wenn es keine Konferenz -ID und Conference (einschließlich der LeaveConferenceButton ), wenn es vorhanden ist. Sie können die toolipText -Eigenschaft jede jeweilige Verbindungs-/Leave -Schaltflächen anpassen. Fügen Sie nun <JoinOrLeave> -Komponente in die Return -Anweisung in Content (dh in Session ) ein. Wir geben setConferenceId auch als Rückruf an die onSuccess -Eigenschaften für beide Tasten, die die Konferenz -ID festlegen (oder nicht festgelegt) werden, wenn die Aktion erfolgreich ist.
Wichtig: Wenn Sie eine Komponente mit Dolby.io rendern, können Sie die Konferenz verlassen oder die Registerkarte Browser schließen, wenn Sie fertig sind, wenn Sie Ihre freien Minuten für diese Demo verwenden!
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 >
) ;
} ;Wenn Sie eine Konferenz mit eigenen Komponenten erstellen, beitreten oder verlassen möchten, lesen Sie den UseConference -Hook.
Es wird angenommen, dass alle folgenden Videoanrufkomponenten in eine Conference eingewickelt werden, die sich innerhalb der Session befindet. Die Komponenten werden alle in der Content definiert und gerendert. Siehe unten für das Skelett:
// import { Session, Conference } from '@dolbyio/comms-uikit-react';
< Session participantInfo = { participantInfo } >
< Conference id = { conferenceId } > ... </ Conference >
</ Session >
Conferenceenthält andere optionale Eigenschaften, einschließlichalias(String),audio(BOOL),video(BOOL),liveRecording(BOOL).
Die ParticipantsList kann eine Liste der Teilnehmer an der aktuellen Konferenz und deren Status, z. ob der Teilnehmer derzeit spricht.
ParticipantsList aus dem UI -Kit importieren. import { ParticipantsList } from '@dolbyio/comms-uikit-react' ;ParticipantsList überall innerhalb der Conference ein. Sie können die für jeden Teilnehmer und seinen Status angegebenen Texteigenschaften anpassen. < ParticipantsList localText = "you" muteText = "mute" unmuteText = "unmute" soundOnText = "sound on" soundOffText = "sound off" />Wenn Sie Teilnehmer mit Ihrer eigenen Komponente anzeigen möchten, lesen Sie den Use -Teilants -Haken.
Die ParticipantsGrid -Komponente zeigt die Videoströme von Konferenzteilnehmern in einem Gitterfliesenlayout an.
ParticipantsGrid aus dem UI -Kit. import { ParticipantsGrid } from '@dolbyio/comms-uikit-react' ;ParticipantsGrid -Komponente überall innerhalb der Conference ein. Sie können die localText Eigenschaft anpassen, die für den lokalen Teilnehmer angezeigt wird. < ParticipantsGrid localText = "you" additionalContainerStyle = { { height : 400 } } /> Mit den Komponenten LocalToggleAudioButton und LocalToggleVideoButton können der lokale Teilnehmer sein Mikrofon und die Kamera ein- oder ausgeschaltet.
LocalToggleAudioButton und LocalToggleVideoButton aus dem UI -Kit. import { LocalToggleAudioButton , LocalToggleVideoButton } from '@dolbyio/comms-uikit-react' ;LocalToggleAudioButton und LocalToggleVideoButton überall innerhalb der Conference ein. < div style = { buttonContainerStyle } >
< LocalToggleAudioButton />
< LocalToggleVideoButton />
</ div >Wenn Sie Audio oder Videos mit Ihren eigenen Komponenten steuern möchten, lesen Sie das UseAdio und verwenden Sie VIDEO -Hooks.
Der lokale Teilnehmer kann seine bevorzugte Kamera, sein Mikrofon oder seine Ausgangslautsprecher unter Verwendung der Komponenten CameraSelect , MicrophoneSelect und SpeakersSelect ausSäher ändern.
CameraSelect , MicrophoneSelect und SpeakersSelect aus dem UI -Kit. import { CameraSelect , MicrophoneSelect , SpeakersSelect } from '@dolbyio/comms-uikit-react' ;CameraSelect , MicrophoneSelect und SpeakersSelect , zusammen mit den Eigenschaften label und placeholder überall in der Conference . Sie können den für die label (siehe oben gezeigten Komponente gezeigten) und eine placeholder -Requisite (angezeigt, wenn keine Option ausgewählt ist) anpassen. < 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" />Wenn Sie Eingabegeräte mithilfe Ihrer eigenen Komponenten steuern möchten, lesen Sie die Usecamera-, Usemicrophon- und UsePeaker -Hooks.
Sie können die installierten Voxeedsdk -APIs in der Anwendung direkt verwenden, ohne sich auf unsere UIKIT -Komponenten zu verlassen. Lassen Sie uns unsere Beispiel -App verbessern, um den Status der Teilnehmer zu beobachten.
useEffect von React. import VoxeetSDK from '@voxeet/voxeet-web-sdk' ;
import { useEffect } from 'react' ;Content ein. Dieser Haken zeichnet sich der participantUpdated -Veranstaltung aus dem Voxeet SDK ab. Definieren Sie die Wirkung des Handlers. Hier beobachten Sie den Status des Teilnehmers und den Zustand ihres Audios über die Konsole. 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 ) ;
} ;
} , [ ] ) ;Weitere Informationen zum Voxeet WebDK finden Sie hier
Laden Sie den Beispielquellcode hier herunter.
Weitere Informationen zu anderen Funktionen finden Sie im Handbuch für zusätzliche Konfigurationsoptionen, einschließlich:
Die Dolby.io Communications UIKIT für React und sein Repository sind im Rahmen der MIT -Lizenz lizenziert. Bevor Sie das Paket @dolbyio/comms-uikit-react verwenden, überprüfen Sie bitte die Dolby-Softwarelizenzvereinbarung.
Hier finden Sie Lizenzen von Drittanbietern.
© Dolby, 2023
