comms uikit react
v0.5.12
dolby.io communications for Reactは、React開発者がdolby.io Communications SDKに基づいてビルディングアプリの複雑さを減らすのに役立つように設計されています。
パッケージは、4つの基本要素で構成されています。
Providers ：dolby.io通信APIおよび州管理との統合を初期化するための主要なコンポーネント。Hooks ：ビデオ通話アプリケーションのビデオ通話ロジックを担当する関数。UI components ：ビデオ会議アプリケーションの最も人気のあるパターンをカバーするコンポーネント。Conference components ：最も広く使用されているビデオ通話/ライブイベント機能のためのロジックが組み込まれたUIコンポーネント。このガイドの完全なコードサンプルを確認して開始したい場合は、ここの例を参照してください。
コンポーネントとその使用状況の完全なリストについては、ドキュメントフォルダーに移動します。
次のdolby.ioのサンプルプロジェクトは、アクション中のuikitを示しています。
このUIキットは、次のブラウザバージョンで最適に機能するようにテストされています
このガイドは、UIコンポーネントを使用して、dolby.io Communications SDKベースのアプリの重要なコンポーネントをすばやく構築する方法を示しています。追加のコンポーネントセクションに移動する前に、アプリをdolby.ioセクションに接続してください。
Addビデオ通話コンポーネント内で実証された各コンポーネントは、他のコンポーネントから独立して構築できます。各セクション内のコードブロックには、個々のコンポーネントのコードのみが含まれ、他のセクションからコンポーネントを除外します。
このガイドのすべての機能を含む完全なコードサンプルを確認して開始したい場合は、こちらの例を参照してください。
注：このガイドは、糸を念頭に置いて書かれています。必要に応じて、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との通信用）によって提供されます。これは、Webアプリのルートでインポートおよび構成する必要があります。 src/App.js 。 tokenのプレースホルダー値を、dolby.ioダッシュボードからクライアントアクセストークンに置き換えます。
このデモの目的のために、
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' } ;Contentコンポーネントのreturnステートメント内にSessionコンポーネントを挿入します。 < Session participantInfo = { participantInfo } >
< InfoBar text = "Session has been created." style = { { margin : '0 auto' } } />
</ Session >独自のコンポーネントを使用してセッションを作成したい場合は、使用セッションフックを参照してください。
アプリが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を含む）があります。 toolipTextプロパティをそれぞれ各ボタンをカスタマイズできます。次に、 Contentコンポーネントのreturnステートメント内に<JoinOrLeave>コンポーネントを挿入します（すなわち、 Session内にネストされます）。また、アクションが成功したときに会議IDを設定（または設定）する両方のボタンのonSuccessプロパティへのコールバックとしてsetConferenceId渡します。
重要：コンポーネントをレンダリングすると、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（String）、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" />独自のコンポーネントを使用して参加者を表示したい場合は、USEPARTICTICANTS HOOKを参照してください。
ParticipantsGridコンポーネントは、グリッドタイルレイアウトに会議参加者のビデオストリームを表示します。
ParticipantsGridをインポートします。 import { ParticipantsGrid } from '@dolbyio/comms-uikit-react' ;ParticipantsGridコンポーネントをConference内に挿入します。ローカル参加者向けに表示されるlocalTextプロパティをカスタマイズできます。 < ParticipantsGrid localText = "you" additionalContainerStyle = { { height : 400 } } /> LocalToggleAudioButtonとLocalToggleVideoButtonコンポーネントにより、ローカル参加者はマイクとカメラをオンまたはオフに切り替えることができます。
LocalToggleAudioButtonとLocalToggleVideoButtonをインポートします。 import { LocalToggleAudioButton , LocalToggleVideoButton } from '@dolbyio/comms-uikit-react' ;Conference内のどこにでもLocalToggleAudioButtonとLocalToggleVideoButtonコンポーネントを挿入します。 < 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、Usemicrophone、およびUsespeakerフックを参照してください。
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 WebDKの詳細については、こちらをご覧ください
ここからサンプルソースコードをダウンロードしてください。
以下を含む他の機能の詳細については、追加の構成オプションガイドをご覧ください。
dolby.io Communications Uikit for Reactとそのリポジトリは、MITライセンスの下でライセンスされています。パッケージ@dolbyio/comms-uikit-reactを使用する前に、Dolby Softwareライセンス契約を確認して受け入れてください。
サードパーティのライセンスはここにあります。
©Dolby、2023
