comms uikit react
v0.5.12
Dolby.io Communications UIKIT for React dirancang untuk membantu reaksi pengembang mengurangi kompleksitas pembangunan aplikasi berdasarkan dolby.io Communications SDK untuk Web.
Paket ini terdiri dari empat elemen dasar:
Providers : Komponen utama untuk menginisialisasi integrasi dengan API komunikasi Dolby.io dan manajemen negara.Hooks : Fungsi yang bertanggung jawab untuk logika panggilan video aplikasi panggilan video.UI components : Komponen yang mencakup pola paling populer dari aplikasi konferensi video.Conference components : Komponen UI dengan logika bawaan untuk fitur video panggilan/acara langsung yang paling banyak digunakan.Jika Anda lebih suka memulai dengan meninjau sampel kode lengkap dari panduan ini, lihat contohnya di sini.
Untuk daftar lengkap komponen dan penggunaannya, buka folder dokumentasi.
Proyek sampel Dolby.io berikut menunjukkan UIKIT dalam tindakan:
Kit UI ini diuji untuk bekerja paling baik dengan versi browser berikut
Panduan ini menunjukkan cara menggunakan komponen UI untuk dengan cepat membangun komponen penting dari aplikasi berbasis SDK Dolby.io Communications. Pastikan untuk menyelesaikan bagian Connect Anda ke Dolby.io sebelum pindah ke bagian Tambahan Komponen.
Setiap komponen yang ditunjukkan dalam komponen Tambah Panggilan Video dapat dibangun terlepas dari yang lain. Blok kode dalam setiap bagian hanya menyertakan kode untuk komponen individual tersebut, dan mengecualikan komponen dari bagian lain.
Jika Anda lebih suka memulai dengan meninjau sampel kode lengkap yang berisi semua fitur dalam panduan ini, lihat contohnya di sini.
Catatan: Panduan ini ditulis dengan benang dalam pikiran. Anda dapat menukar benang dengan NPM atau manajer paket yang berbeda jika Anda suka.
# 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 startUntuk mengatur akun dolby.io Anda, buka dasbor dolby.io dan lengkapi formulir. Setelah mengonfirmasi alamat email Anda, Anda akan masuk.
Anda perlu membuat token akses klien untuk menjalankan aplikasi ini. Ikuti langkah -langkah untuk mendapatkan token.
Pergi ke dasbor, dan temukan item menu aplikasi ,
Di layar berikutnya, ada bidang token di mana Anda dapat menyalin token akses klien ke clipboard Anda. Token yang dihasilkan aktif untuk jumlah waktu yang ditunjukkan.
Bagian ini akan memandu Anda untuk menghubungkan ke API Dolby.io, yang akan memungkinkan penggunaan fitur terkait komunikasi kami.
Integrasi Dolby.io disediakan oleh komponen CommsProvider (untuk komunikasi dengan API kami), yang harus diimpor dan dikonfigurasi pada akar aplikasi web Anda, misalnya. src/App.js . Ganti nilai placeholder untuk token dengan token akses klien Anda dari dasbor dolby.io.
Untuk tujuan demo ini, Anda hanya akan bekerja di
src/App.js. File ini mengikuti struktur di bawah ini:
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 ;Pendekatan ini hanya untuk tujuan demo. Untuk menginisialisasi aplikasi Anda untuk produksi dengan benar, lihat otentikasi API dan otentikasi klien.
Sesi adalah koneksi antara aplikasi klien dan API komunikasi Dolby.io.
Session impor dari kit UI. import { Session } from '@dolbyio/comms-uikit-react' ;Session di komponen Content . Anda harus memberikan nama menggunakan objek participantInfo , misalnya. Nama peserta yang mendirikan sesi tersebut. const participantInfo = { name : 'John Doe' } ;Session di dalam pernyataan pengembalian dalam komponen Content . < Session participantInfo = { participantInfo } >
< InfoBar text = "Session has been created." style = { { margin : '0 auto' } } />
</ Session >Jika Anda ingin membuat sesi menggunakan komponen Anda sendiri, lihat Hook Penggunaan.
Setelah aplikasi Anda membuat koneksi ke dolby.io, Anda dapat mengakses fitur -fiturnya.
Sesi menghubungkan peserta satu sama lain, memungkinkan mereka untuk berkomunikasi menggunakan audio dan/atau video.
Conference Impor, JoinConferenceButton dan LeaveConferenceButton dari kit UI. Impor useState dari React. import { Conference , JoinConferenceButton , LeaveConferenceButton } from '@dolbyio/comms-uikit-react' ;
import { useState } from 'react' ;JoinConferenceButton di komponen Content . Properti joinOptions memungkinkan Anda untuk menentukan apakah akan bergabung dengan konferensi dengan audio dan/atau video diaktifkan, di samping nama rapat dan nama pengguna (biasanya nama pengguna saat ini) yang dapat dibuat terlihat oleh semua peserta. const joinOptions = {
constraints : {
audio : true ,
video : true ,
} ,
} ;JoinOrLeave dengan negara bagian untuk ID konferensi. Masukkan Conference , komponen JoinConferenceButton dan LeaveConferenceButton , bersama dengan joinOptions dan meetingName . Kami ingin menunjukkan JoinConferenceButton ketika tidak ada ID konferensi, dan Conference (yang termasuk LeaveConferenceButton ) ketika ada. Anda dapat menyesuaikan properti toolipText masing -masing tombol bergabung/meninggalkan masing -masing. Sekarang, masukkan komponen <JoinOrLeave> di dalam pernyataan return dalam komponen Content (mis. Session Nested Inside). Kami juga meneruskan setConferenceId sebagai panggilan balik ke properti onSuccess untuk kedua tombol yang akan mengatur (atau tidak ada) ID konferensi ketika tindakan berhasil.
Penting: Merender komponen akan membuat panggilan menggunakan dolby.io, jika Anda menggunakan menit gratis untuk demo ini, ingatlah untuk meninggalkan konferensi atau menutup tab browser setelah selesai!
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 >
) ;
} ;Jika Anda ingin membuat, bergabung atau meninggalkan konferensi menggunakan komponen Anda sendiri, lihat hook useconference.
Semua komponen panggilan video di bawah ini diasumsikan dibungkus dalam komponen Conference yang berada dalam komponen Session . Semua komponen didefinisikan dan diterjemahkan dalam komponen Content . Lihat di bawah untuk kerangka:
// import { Session, Conference } from '@dolbyio/comms-uikit-react';
< Session participantInfo = { participantInfo } >
< Conference id = { conferenceId } > ... </ Conference >
</ Session >Komponen
Conferenceberisi properti opsional lainnya termasukalias(string),audio(bool),video(bool),liveRecording(bool).
Komponen ParticipantsList dapat menampilkan daftar peserta dalam konferensi saat ini dan status mereka, misalnya. Apakah peserta saat ini berbicara.
ParticipantsList dari kit UI. import { ParticipantsList } from '@dolbyio/comms-uikit-react' ;ParticipantsList di mana saja di dalam Conference . Anda dapat menyesuaikan properti teks yang ditampilkan untuk setiap peserta dan statusnya. < ParticipantsList localText = "you" muteText = "mute" unmuteText = "unmute" soundOnText = "sound on" soundOffText = "sound off" />Jika Anda ingin menampilkan peserta menggunakan komponen Anda sendiri, lihat Hook UseParticents.
Komponen ParticipantsGrid menampilkan aliran video peserta konferensi dalam tata letak ubin grid.
ParticipantsGrid dari kit UI. import { ParticipantsGrid } from '@dolbyio/comms-uikit-react' ;ParticipantsGrid di mana saja di dalam Conference . Anda dapat menyesuaikan properti localText , yang ditampilkan untuk peserta lokal. < ParticipantsGrid localText = "you" additionalContainerStyle = { { height : 400 } } /> Komponen LocalToggleAudioButton dan LocalToggleVideoButton memungkinkan peserta lokal untuk menghidupkan mikrofon dan kamera mereka.
LocalToggleAudioButton dan LocalToggleVideoButton dari kit UI. import { LocalToggleAudioButton , LocalToggleVideoButton } from '@dolbyio/comms-uikit-react' ;LocalToggleAudioButton dan LocalToggleVideoButton di mana saja di dalam Conference . < div style = { buttonContainerStyle } >
< LocalToggleAudioButton />
< LocalToggleVideoButton />
</ div >Jika Anda ingin mengontrol audio atau video menggunakan komponen Anda sendiri, lihat kait UseaAudio dan Usevideo.
Peserta lokal dapat mengubah kamera, mikrofon, atau speaker output yang mereka sukai menggunakan komponen CameraSelect , MicrophoneSelect , dan SpeakersSelect .
CameraSelect , MicrophoneSelect dan SpeakersSelect dari kit UI. import { CameraSelect , MicrophoneSelect , SpeakersSelect } from '@dolbyio/comms-uikit-react' ;CameraSelect , MicrophoneSelect dan SpeakersSelect , bersama dengan label dan properti placeholder , di mana saja di dalam Conference . Anda dapat menyesuaikan teks yang ditampilkan untuk label prop (ditunjukkan di atas komponen) dan prop placeholder (ditampilkan ketika tidak ada opsi yang dipilih). < 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" />Jika Anda ingin mengontrol perangkat input menggunakan komponen Anda sendiri, rujuk ke hook usecamera, usemicrophone, dan usespeaker.
Anda dapat menggunakan API VoxeedsDK yang terpasang di aplikasi secara langsung tanpa mengandalkan komponen UIKIT kami. Mari kita tingkatkan aplikasi contoh kita untuk mengamati status peserta.
useEffect dari Bereaksi. import VoxeetSDK from '@voxeet/voxeet-web-sdk' ;
import { useEffect } from 'react' ;Content . Pengait ini berlangganan acara participantUpdated dari Voxeet SDK. Tentukan efek pawang. Di sini, Anda mengamati status peserta dan keadaan audio mereka melalui konsol. 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 ) ;
} ;
} , [ ] ) ;Anda dapat mempelajari lebih lanjut tentang Voxeet WebsDK di sini
Unduh kode sumber sampel di sini.
Silakan lihat panduan opsi konfigurasi tambahan untuk mempelajari lebih lanjut tentang fitur lain termasuk:
Dolby.io Communications UIKIT untuk React dan repositorinya dilisensikan di bawah lisensi MIT. Sebelum menggunakan paket @dolbyio/comms-uikit-react , silakan tinjau dan terima Perjanjian Lisensi Perangkat Lunak Dolby.
Lisensi pihak ketiga dapat ditemukan di sini.
© Dolby, 2023
