comms uikit react
v0.5.12
dolby.io通信Uikit for React旨在帮助React开发人员根据Dolby.io Communications SDK的Web构建应用程序的复杂性。
该软件包由四个基本元素组成：
Providers ：与Dolby.io Communications API和州管理初始化集成的主要组成部分。Hooks ：负责视频通话应用程序视频呼叫逻辑的功能。UI components ：涵盖视频会议应用程序最受欢迎模式的组件。Conference components ：具有内置逻辑的UI组件，用于最广泛使用的视频通话/实时事件功能。如果您希望通过查看本指南的完整代码示例开始，请参见此处的示例。
有关组件及其使用的完整列表，请转到文档文件夹。
以下dolby.io示例项目展示了UIKIT的行动：
该UI套件经过测试，可与以下浏览器版本最佳合作
本指南演示了如何使用UI组件快速构建基于Dolby.io Communications SDK应用程序的基本组件。在移至“添加组件”部分之前，请确保将您的应用程序连接到dolby.io部分。
添加视频呼叫组件中所示的每个组件可以独立于其他组件构建。每个部分中的代码块仅包含该单个组件的代码，并将组件从其他部分排除。
如果您希望通过查看包含本指南中所有功能的完整代码样本来开始，请参见此处的示例。
注意：本指南的记忆是记住的。如果愿意，您可以将纱线交换为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仪表板并填写表格。确认您的电子邮件地址后，您将被登录。
您将需要生成客户端访问令牌才能运行此应用。按照步骤获取令牌。
转到仪表板，找到应用程序菜单项， 
在下一个屏幕上，有一个令牌字段，您可以将客户端访问令牌复制到剪贴板。生成的令牌在指示的时间内是有效的。
本节将指导您连接到dolby.io API，这将使我们的通信相关功能使用。
dolby.io集成由CommsProvider组件（用于与我们的API进行通信）提供，该组件应在您的Web应用程序的根部导入和配置，例如。 src/App.js 。用dolby.io仪表板替换令牌访问token的占位符价值。
出于此演示的目的，您将仅在
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身份验证和客户端身份验证。
会话是客户端应用程序与dolby.io通信API之间的连接。
Session 。 import { Session } from '@dolbyio/comms-uikit-react' ;Content组件中定义Session配置。您应该使用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 ，UI套件的JoinConferenceButton和LeaveConferenceButton 。从React导入useState 。 import { Conference , JoinConferenceButton , LeaveConferenceButton } from '@dolbyio/comms-uikit-react' ;
import { useState } from 'react' ;Content组件中定义JoinConferenceButton配置。 joinOptions属性允许您指定是否可以使用音频和/或启用视频加入会议，除了会议名称和用户名（通常是当前用户的名称），所有参与者都可以看到。 const joinOptions = {
constraints : {
audio : true ,
video : true ,
} ,
} ;JoinOrLeave 。插入Conference ， JoinConferenceButton和LeaveConferenceButton组件，以及joinOptions和meetingName名称。当没有会议ID和Conference （包括LeaveConferenceButton ）时，我们想向JoinConferenceButton展示。您可以自定义每个相应的连接/离开按钮的toolipText属性。现在，在Content组件中的返回语句中插入<JoinOrLeave>组件（即嵌套在Session中）。我们还将setConferenceId作为回调，以回到两个按钮的onSuccess属性，这些按钮将在操作成功时设置（或未设置）会议ID。
重要的是：渲染组件将使用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 >
) ;
} ;如果您想使用自己的组件创建，加入或离开会议，请参阅USECERFERY挂钩。
假定下面的所有视频调用组件都包裹在驻留在Session组件中的Conference组件中。这些组件都在Content组件中定义和渲染。请参阅下面的骨骼：
// import { Session, Conference } from '@dolbyio/comms-uikit-react';
< Session participantInfo = { participantInfo } >
< Conference id = { conferenceId } > ... </ Conference >
</ Session >
Conference组件包含其他可选属性，包括alias（字符串），audio（布尔），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" />如果您想使用自己的组件展示参与者，请参阅USE -Particant钩子。
ParticipantsGrid Grid组件在网格瓷砖布局中显示会议参与者的视频流。
ParticipantsGrid 。 import { ParticipantsGrid } from '@dolbyio/comms-uikit-react' ;Conference内部任何地方的ParticipantsGrid 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' ;Conference内的任何地方，插入CameraSelect ， MicrophoneSelect和SpeakersSelect的组件，以及label和placeholder属性。您可以自定义label道具显示的文本（组件上方显示的）和placeholder符道具（当未选择选项时显示）。 < 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，USEMECTROPHONE和USESPEAKER挂钩。
您可以直接在应用程序中使用已安装的VoxeedSDK API，而无需依赖我们的Uikit组件。让我们增强我们的示例应用程序，以观察参与者的状态。
useEffect 。 import VoxeetSDK from '@voxeet/voxeet-web-sdk' ;
import { useEffect } from 'react' ;Content组件。此挂钩订阅了Voxeet SDK的participantUpdated事件。定义处理程序的效果。在这里，您可以通过控制台观察参与者的状态和音频状态。 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 WebDK的更多信息
在此处下载示例源代码。
请参阅其他配置选项指南，以了解更多有关其他功能的信息，包括：
Dolby.io通信Uikit for React及其存储库是根据MIT许可证的。在使用@dolbyio/comms-uikit-react软件包之前，请查看并接受杜比软件许可协议。
第三方许可证可以在这里找到。
©Dolby，2023年
