comms uikit react
v0.5.12
Dolby.io Communications Uikit for REACT는 RACT 개발자가 Web 용 Dolby.io Communications SDK를 기반으로 앱 빌딩의 복잡성을 줄이는 데 도움이되도록 설계되었습니다.
패키지는 네 가지 기본 요소로 구성됩니다.
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 startDolby.io 계정을 설정하려면 Dolby.io 대시 보드로 이동하여 양식을 작성하십시오. 이메일 주소를 확인하면 로그인됩니다.
이 앱을 실행하려면 클라이언트 액세스 토큰을 생성해야합니다. 단계를 따라 토큰을 얻으십시오.
대시 보드로 이동하여 응용 프로그램 메뉴 항목을 찾으십시오. 
다음 화면에는 클라이언트 액세스 토큰을 클립 보드에 복사 할 수있는 토큰 필드가 있습니다. 생성 된 토큰은 표시된 시간 동안 활성화됩니다.
이 섹션에서는 Dolby.io APIS에 연결하여 커뮤니케이션 관련 기능을 사용할 수 있습니다.
Dolby.io 통합은 CommsProvider 구성 요소 (API와의 통신)에서 제공하며 웹 앱의 루트에서 가져 와서 구성해야합니다. src/App.js . Dolby.io Dashboard의 클라이언트 액세스 토큰으로 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 Communications APIS 간의 연결입니다.
Session . import { Session } from '@dolbyio/comms-uikit-react' ;Content 구성 요소에서 Session 구성을 정의하십시오. participantInfo 객체를 사용하여 이름을 제공해야합니다. 세션을 설립 한 참가자의 이름. const participantInfo = { name : 'John Doe' } ;Content 구성 요소의 return 문 안에 Session 구성 요소를 삽입하십시오. < Session participantInfo = { participantInfo } >
< InfoBar text = "Session has been created." style = { { margin : '0 auto' } } />
</ Session >자신의 구성 요소를 사용하여 세션을 만들려면 useession hook를 참조하십시오.
앱이 Dolby.io에 연결하면 기능에 액세스 할 수 있습니다.
세션은 참가자를 서로 연결하여 오디오 및/또는 비디오를 사용하여 통신 할 수 있습니다.
Conference , 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가 없을 때 JoinconferenceButton과 Conference ( LeaveConferenceButton 포함)가 없을 때 JoinConferenceButton 보여주고 싶습니다. 각각의 조인/방지 버튼 각각의 toolipText 속성을 사용자 정의 할 수 있습니다. 이제 Content 구성 요소 (예 : 내부 Session 중첩)의 return 문 안에 <JoinOrLeave> 구성 요소를 삽입하십시오. 우리는 또한 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 >
) ;
} ;자신의 구성 요소를 사용하여 작성, 가입 또는 회의를 원하시면 useconference 후크를 참조하십시오.
아래의 모든 화상 통화 구성 요소는 Session 구성 요소 내에있는 Conference 구성 요소 내에 포장 된 것으로 가정합니다. 구성 요소는 모두 Content 구성 요소 내에서 정의되고 렌더링됩니다. 골격은 아래를 참조하십시오.
// import { Session, Conference } from '@dolbyio/comms-uikit-react';
< Session participantInfo = { participantInfo } >
< Conference id = { conferenceId } > ... </ Conference >
</ Session >
Conference구성 요소에는alias(문자열),audio(BOOL),video(BOOL),liveRecording(BOOL)을 포함한 다른 선택적 특성이 포함되어 있습니다.
ParticipantsList 목록 구성 요소는 현재 회의에서 참가자 목록과 해당 상태 (예 :)를 표시 할 수 있습니다. 참가자가 현재 말하는지 여부.
ParticipantsList 가져 오십시오. import { ParticipantsList } from '@dolbyio/comms-uikit-react' ;Conference 내부의 어느 곳에서나 ParticipantsList 구성 요소를 삽입하십시오. 각 참가자와 해당 상태에 대해 표시된 텍스트 속성을 사용자 정의 할 수 있습니다. < ParticipantsList localText = "you" muteText = "mute" unmuteText = "unmute" soundOnText = "sound on" soundOffText = "sound off" />자신의 구성 요소를 사용하여 참가자를 표시하려면 UseParticipts 후크를 참조하십시오.
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 내 어디에서나 label 및 placeholder 속성과 함께 CameraSelect , MicrophoneSelect 및 SpeakersSelect 구성 요소를 삽입하십시오. 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, USEMICROPHONE 및 USESPEAKER HOOKS를 참조하십시오.
Uikit 구성 요소에 의존하지 않고도 응용 프로그램에서 설치된 Voxeedsdk의 API를 사용할 수 있습니다. 참가자의 상태를 관찰하기 위해 예제 앱을 향상합시다.
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 WebSDK에 대해 자세히 알아볼 수 있습니다
여기에서 샘플 소스 코드를 다운로드하십시오.
다음을 포함한 다른 기능에 대한 자세한 내용은 추가 구성 옵션 안내서를 참조하십시오.
Dolby.io Communications uikit for React 및 그 저장소는 MIT 라이센스에 따라 라이센스가 부여됩니다. @dolbyio/comms-uikit-react 패키지를 사용하기 전에 Dolby 소프트웨어 라이센스 계약을 검토하고 수락하십시오.
타사 라이센스는 여기에서 찾을 수 있습니다.
© Dolby, 2023
