amazon chime sdk js
Release amazon-chime-sdk-3.25.0
Dewan Proyek Amazon Chime SDK
Komponen Reaksi SDK Amazon Chime
Amazon Chime SDK adalah seperangkat komponen komunikasi waktu nyata yang dapat digunakan pengembang untuk menambahkan kemampuan perpesanan, audio, video, dan berbagi layar dengan cepat ke aplikasi web atau seluler mereka.
Pengembang dapat membangun infrastruktur komunikasi global AWS untuk memberikan pengalaman menarik dalam aplikasi mereka. Misalnya, mereka dapat menambahkan video ke aplikasi kesehatan sehingga pasien dapat berkonsultasi dengan dokter dari jarak jauh mengenai masalah kesehatan, atau membuat perintah audio yang disesuaikan untuk integrasi dengan jaringan telepon umum.
Amazon Chime SDK for JavaScript bekerja dengan menghubungkan ke sumber daya sesi pertemuan yang Anda buat di akun AWS Anda. SDK memiliki semua yang Anda perlukan untuk membangun pengalaman panggilan dan kolaborasi khusus di aplikasi web Anda, termasuk metode untuk mengonfigurasi sesi rapat, membuat daftar dan memilih perangkat audio dan video, memulai dan menghentikan berbagi layar dan tampilan berbagi layar, menerima panggilan balik saat acara media seperti terjadi perubahan volume, dan mengontrol fitur rapat seperti audio mute dan pengikatan ubin video.
Jika Anda membangun aplikasi React, pertimbangkan untuk menggunakan Perpustakaan Komponen React SDK Amazon Chime yang menyediakan manajemen status sisi klien dan komponen UI yang dapat digunakan kembali untuk antarmuka web umum yang digunakan dalam aplikasi konferensi audio dan video. Amazon Chime juga menawarkan Amazon Chime SDK untuk iOS dan Amazon Chime SDK untuk Android untuk pengembangan aplikasi seluler asli.
Dewan Proyek Amazon Chime SDK menangkap status permintaan fitur komunitas di seluruh repositori kami. Deskripsi kolom di papan tercakup dalam panduan ini.
Selain di bawah ini, berikut adalah daftar semua postingan blog tentang Amazon Chime SDK.
Panduan pengembang berikut mencakup topik spesifik untuk audiens teknis.
Panduan pengembang berikut mencakup Amazon Chime SDK secara lebih luas.
.jsTinjau sumber daya yang diberikan dalam README dan gunakan dokumentasi klien kami untuk panduan tentang cara mengembangkan Chime SDK untuk JavaScript. Selain itu, telusuri database masalah dan FAQ kami untuk melihat apakah masalah Anda telah diatasi. Jika tidak, harap selesaikan masalah kami menggunakan templat yang disediakan.
Posting blog Pemantauan dan Pemecahan Masalah Dengan Acara Pertemuan SDK Amazon Chime menjelaskan secara rinci tentang cara menggunakan acara pertemuan untuk memecahkan masalah aplikasi Anda dengan masuk ke Amazon CloudWatch.
Jika Anda memiliki pertanyaan lebih lanjut, atau memerlukan dukungan untuk bisnis Anda, Anda dapat menghubungi dukungan Pelanggan AWS. Anda dapat meninjau rencana dukungan kami di sini.
Amazon Chime SDK untuk JavaScript menggunakan WebRTC, API komunikasi real-time yang didukung di sebagian besar browser modern. Berikut beberapa sumber umum di WebRTC.
Pastikan Anda memiliki Node.js versi 18 atau lebih tinggi. Node 20 direkomendasikan dan didukung.
Untuk menambahkan Amazon Chime SDK for JavaScript ke dalam aplikasi yang sudah ada, instal paket langsung dari npm:
npm install amazon-chime-sdk-js --save
Perhatikan bahwa Amazon Chime SDK untuk JavaScript menargetkan ES2015, yang sepenuhnya kompatibel dengan semua browser yang didukung.
Buat sesi pertemuan di aplikasi klien Anda.
import {
ConsoleLogger ,
DefaultDeviceController ,
DefaultMeetingSession ,
LogLevel ,
MeetingSessionConfiguration
} from 'amazon-chime-sdk-js' ;
const logger = new ConsoleLogger ( 'MyLogger' , LogLevel . INFO ) ;
const deviceController = new DefaultDeviceController ( logger ) ;
// You need responses from server-side Chime API. See below for details.
const meetingResponse = /* The response from the CreateMeeting API action */ ;
const attendeeResponse = /* The response from the CreateAttendee or BatchCreateAttendee API action */ ;
const configuration = new MeetingSessionConfiguration ( meetingResponse , attendeeResponse ) ;
// In the usage examples below, you will use this meetingSession object.
const meetingSession = new DefaultMeetingSession (
configuration ,
logger ,
deviceController
) ; Anda dapat menggunakan AWS SDK, AWS Command Line Interface (AWS CLI), atau REST API untuk melakukan panggilan API. Di bagian ini, Anda akan menggunakan AWS SDK for JavaScript di aplikasi server Anda, misalnya Node.js. Lihat Referensi API Amazon Chime SDK untuk informasi lebih lanjut.
️ Aplikasi server tidak memerlukan Amazon Chime SDK untuk JavaScript.
const AWS = require ( 'aws-sdk' ) ;
const { v4 : uuid } = require ( 'uuid' ) ;
// You must use "us-east-1" as the region for Chime API and set the endpoint.
const chime = new AWS . ChimeSDKMeetings ( { region : 'us-east-1' } ) ;
const meetingResponse = await chime
. createMeeting ( {
ClientRequestToken : uuid ( ) ,
MediaRegion : 'us-west-2' , // Specify the region in which to create the meeting.
} )
. promise ( ) ;
const attendeeResponse = await chime
. createAttendee ( {
MeetingId : meetingResponse . Meeting . MeetingId ,
ExternalUserId : uuid ( ) , // Link the attendee to an identity managed by your application.
} )
. promise ( ) ; Sekarang transfer objek meetingResponse dan attendeeResponse dengan aman ke aplikasi klien Anda. Objek ini berisi semua informasi yang diperlukan untuk aplikasi klien menggunakan Amazon Chime SDK for JavaScript untuk bergabung dalam rapat.
Nilai parameter MediaRegion di createMeeting() idealnya diatur ke salah satu wilayah media yang paling dekat dengan pengguna yang membuat rapat. Implementasinya dapat ditemukan pada topik 'Memilih Wilayah media terdekat' dalam dokumentasi Wilayah Media SDK Amazon Chime.
Buat sesi perpesanan di aplikasi klien Anda untuk menerima pesan dari Amazon Chime SDK for Messaging.
import { ChimeSDKMessagingClient } from '@aws-sdk/client-chime-sdk-messaging' ;
import {
ConsoleLogger ,
DefaultMessagingSession ,
LogLevel ,
MessagingSessionConfiguration ,
} from 'amazon-chime-sdk-js' ;
const logger = new ConsoleLogger ( 'SDK' , LogLevel . INFO ) ;
// You will need AWS credentials configured before calling AWS or Amazon Chime APIs.
const chime = new ChimeSDKMessagingClient ( { region : 'us-east-1' } ) ;
const userArn = /* The userArn */ ;
const sessionId = /* The sessionId */ ;
const configuration = new MessagingSessionConfiguration ( userArn , sessionId , undefined , chime ) ;
const messagingSession = new DefaultMessagingSession ( configuration , logger ) ; Jika Anda ingin mengaktifkan fitur pengambilan awal saat menyambung ke sesi perpesanan, Anda dapat mengikuti kode di bawah ini. Fitur prefetch akan mengirimkan acara CHANNEL_DETAILS pada koneksi websocket, yang mencakup informasi tentang saluran, pesan saluran, keanggotaan saluran, dll. Urutan prefetch dapat disesuaikan dengan prefetchSortBy , menyetelnya ke unread (nilai default jika tidak disetel) atau lastMessageTimestamp
configuration . prefetchOn = Prefetch . Connect ;
configuration . prefetchSortBy = PrefetchSortBy . Unread ; git fetch --tags https://github.com/aws/amazon-chime-sdk-js
npm run build
npm run test
Setelah menjalankan npm run test pertama kali, Anda dapat menggunakan npm run test:fast untuk mempercepat rangkaian pengujian.
Tag diambil untuk menghasilkan metadata versi dengan benar.
Untuk melihat hasil cakupan kode, buka coverage/index.html di browser Anda setelah menjalankan npm run test .
Jika Anda menjalankan npm run test dan pengujian berjalan tetapi laporan cakupan tidak dibuat, maka Anda mungkin mengalami masalah pembersihan sumber daya. Di Mocha v4.0.0 atau yang lebih baru, implementasinya diubah sehingga proses Mocha tidak akan keluar secara paksa saat uji coba selesai.
Misalnya, jika Anda memiliki DefaultVideoTransformDevice di pengujian unit Anda, maka Anda harus memanggil await device.stop(); untuk membersihkan sumber daya dan tidak mengalami masalah ini. Anda juga dapat melihat penggunaan done(); dalam dokumentasi Mocha.
Untuk menghasilkan dokumentasi referensi JavaScript API, jalankan:
npm run build
npm run doc
Kemudian buka docs/index.html di browser Anda.
Jika Anda menemukan potensi masalah keamanan dalam proyek ini, kami meminta Anda memberi tahu AWS/Keamanan Amazon melalui halaman pelaporan kerentanan kami. Harap jangan membuat masalah GitHub publik.
Catatan: Sebelum memulai sesi, Anda harus memilih mikrofon, speaker, dan kamera.
Kasus penggunaan 1. Daftar perangkat input audio, output audio, dan input video. Browser akan meminta izin mikrofon dan kamera.
Dengan parameter forceUpdate disetel ke true, informasi perangkat yang di-cache akan dibuang dan diperbarui setelah pemicu label perangkat dipanggil. Dalam beberapa kasus, pembangun perlu menunda pemicuan dialog izin, misalnya, saat bergabung dalam rapat dalam mode hanya lihat, dan kemudian dapat memicu permintaan izin untuk menampilkan label perangkat; menentukan forceUpdate memungkinkan hal ini terjadi.
const audioInputDevices = await meetingSession . audioVideo . listAudioInputDevices ( ) ;
const audioOutputDevices = await meetingSession . audioVideo . listAudioOutputDevices ( ) ;
const videoInputDevices = await meetingSession . audioVideo . listVideoInputDevices ( ) ;
// An array of MediaDeviceInfo objects
audioInputDevices . forEach ( mediaDeviceInfo => {
console . log ( `Device ID: ${ mediaDeviceInfo . deviceId } Microphone: ${ mediaDeviceInfo . label } ` ) ;
} ) ; Kasus penggunaan 2. Pilih perangkat input audio dan output audio dengan meneruskan deviceId dari objek MediaDeviceInfo . Perhatikan bahwa Anda perlu memanggil listAudioInputDevices dan listAudioOutputDevices terlebih dahulu.
const audioInputDeviceInfo = /* An array item from meetingSession.audioVideo.listAudioInputDevices */ ;
await meetingSession . audioVideo . startAudioInput ( audioInputDeviceInfo . deviceId ) ;
const audioOutputDeviceInfo = /* An array item from meetingSession.audioVideo.listAudioOutputDevices */ ;
await meetingSession . audioVideo . chooseAudioOutput ( audioOutputDeviceInfo . deviceId ) ; Kasus penggunaan 3. Pilih perangkat input video dengan meneruskan deviceId dari objek MediaDeviceInfo . Perhatikan bahwa Anda perlu memanggil listVideoInputDevices terlebih dahulu.
Jika terdapat lampu LED di sebelah kamera peserta, lampu tersebut akan menyala yang menunjukkan bahwa ia sedang mengambil gambar dari kamera. Anda mungkin ingin memilih perangkat input video saat mulai berbagi video.
const videoInputDeviceInfo = /* An array item from meetingSession.audioVideo.listVideoInputDevices */ ;
await meetingSession . audioVideo . startVideoInput ( videoInputDeviceInfo . deviceId ) ;
// Stop video input. If the previously chosen camera has an LED light on,
// it will turn off indicating the camera is no longer capturing.
await meetingSession . audioVideo . stopVideoInput ( ) ; Kasus penggunaan 4. Tambahkan pengamat perubahan perangkat untuk menerima daftar perangkat yang diperbarui. Misalnya, saat Anda memasangkan headset Bluetooth dengan komputer Anda, audioInputsChanged dan audioOutputsChanged dipanggil dengan daftar perangkat termasuk headset.
Anda dapat menggunakan panggilan balik audioInputMuteStateChanged untuk melacak status bisu perangkat keras yang mendasarinya pada browser dan sistem operasi yang mendukungnya.
const observer = {
audioInputsChanged : freshAudioInputDeviceList => {
// An array of MediaDeviceInfo objects
freshAudioInputDeviceList . forEach ( mediaDeviceInfo => {
console . log ( `Device ID: ${ mediaDeviceInfo . deviceId } Microphone: ${ mediaDeviceInfo . label } ` ) ;
} ) ;
} ,
audioOutputsChanged : freshAudioOutputDeviceList => {
console . log ( 'Audio outputs updated: ' , freshAudioOutputDeviceList ) ;
} ,
videoInputsChanged : freshVideoInputDeviceList => {
console . log ( 'Video inputs updated: ' , freshVideoInputDeviceList ) ;
} ,
audioInputMuteStateChanged : ( device , muted ) => {
console . log ( 'Device' , device , muted ? 'is muted in hardware' : 'is not muted' ) ;
} ,
} ;
meetingSession . audioVideo . addDeviceChangeObserver ( observer ) ; Kasus penggunaan 5. Memulai sesi. Untuk mendengarkan audio, Anda perlu mengikat perangkat dan melakukan streaming ke elemen <audio> . Setelah sesi dimulai, Anda dapat berbicara dan mendengarkan peserta. Pastikan Anda telah memilih mikrofon dan speaker Anda (Lihat bagian "Perangkat"), dan setidaknya satu peserta lain telah bergabung dalam sesi tersebut.
const audioElement = /* HTMLAudioElement object e.g. document.getElementById('audio-element-id') */ ;
meetingSession . audioVideo . bindAudioElement ( audioElement ) ;
const observer = {
audioVideoDidStart : ( ) => {
console . log ( 'Started' ) ;
}
} ;
meetingSession . audioVideo . addObserver ( observer ) ;
meetingSession . audioVideo . start ( ) ;Kasus penggunaan 6. Tambahkan pengamat untuk menerima peristiwa siklus hidup sesi: menghubungkan, memulai, dan menghentikan.
Catatan: Anda dapat menghapus pengamat dengan menelepon
meetingSession.audioVideo.removeObserver(observer). Dalam arsitektur berbasis komponen (seperti React, Vue, dan Angular), Anda mungkin perlu menambahkan pengamat saat komponen dipasang, dan menghapusnya saat dilepas.
const observer = {
audioVideoDidStart : ( ) => {
console . log ( 'Started' ) ;
} ,
audioVideoDidStop : sessionStatus => {
// See the "Stopping a session" section for details.
console . log ( 'Stopped with a session status code: ' , sessionStatus . statusCode ( ) ) ;
} ,
audioVideoDidStartConnecting : reconnecting => {
if ( reconnecting ) {
// e.g. the WiFi connection is dropped.
console . log ( 'Attempting to reconnect' ) ;
}
} ,
} ;
meetingSession . audioVideo . addObserver ( observer ) ;Catatan: Sejauh ini, Anda telah menambahkan pengamat untuk menerima peristiwa siklus hidup perangkat dan sesi. Dalam kasus penggunaan berikut, Anda akan menggunakan metode API real-time untuk mengirim dan menerima indikator volume dan mengontrol status senyap.
Kasus penggunaan 7. Menonaktifkan dan mengaktifkan input audio.
// Mute
meetingSession . audioVideo . realtimeMuteLocalAudio ( ) ;
// Unmute
const unmuted = meetingSession . audioVideo . realtimeUnmuteLocalAudio ( ) ;
if ( unmuted ) {
console . log ( 'Other attendees can hear your audio' ) ;
} else {
// See the realtimeSetCanUnmuteLocalAudio use case below.
console . log ( 'You cannot unmute yourself' ) ;
}Kasus penggunaan 8. Untuk memeriksa apakah mikrofon lokal dibisukan, gunakan metode ini daripada mencatat status bisu Anda sendiri.
const muted = meetingSession . audioVideo . realtimeIsLocalAudioMuted ( ) ;
if ( muted ) {
console . log ( 'You are muted' ) ;
} else {
console . log ( 'Other attendees can hear your audio' ) ;
}Kasus penggunaan 9. Nonaktifkan suarakan. Jika Anda ingin mencegah pengguna membunyikan suara mereka sendiri (misalnya selama presentasi), gunakan metode ini daripada terus memantau status dapat membunyikan suara Anda sendiri.
meetingSession . audioVideo . realtimeSetCanUnmuteLocalAudio ( false ) ;
// Optional: Force mute.
meetingSession . audioVideo . realtimeMuteLocalAudio ( ) ;
const unmuted = meetingSession . audioVideo . realtimeUnmuteLocalAudio ( ) ;
console . log ( ` ${ unmuted } is false. You cannot unmute yourself` ) ;Kasus penggunaan 10. Berlangganan perubahan volume peserta tertentu. Anda dapat menggunakan ini untuk membuat UI indikator volume waktu nyata.
import { DefaultModality } from 'amazon-chime-sdk-js' ;
// This is your attendee ID. You can also subscribe to another attendee's ID.
// See the "Attendees" section for an example on how to retrieve other attendee IDs
// in a session.
const presentAttendeeId = meetingSession . configuration . credentials . attendeeId ;
meetingSession . audioVideo . realtimeSubscribeToVolumeIndicator (
presentAttendeeId ,
( attendeeId , volume , muted , signalStrength ) => {
const baseAttendeeId = new DefaultModality ( attendeeId ) . base ( ) ;
if ( baseAttendeeId !== attendeeId ) {
// See the "Screen and content share" section for details.
console . log ( `The volume of ${ baseAttendeeId } 's content changes` ) ;
}
// A null value for any field means that it has not changed.
console . log ( ` ${ attendeeId } 's volume data: ` , {
volume , // a fraction between 0 and 1
muted , // a boolean
signalStrength , // 0 (no signal), 0.5 (weak), 1 (strong)
} ) ;
}
) ;Kasus penggunaan 11. Berlangganan untuk membisukan atau memberi sinyal perubahan kekuatan pada peserta tertentu. Anda dapat menggunakan ini untuk membangun UI hanya untuk membisukan atau hanya mengubah kekuatan sinyal.
// This is your attendee ID. You can also subscribe to another attendee's ID.
// See the "Attendees" section for an example on how to retrieve other attendee IDs
// in a session.
const presentAttendeeId = meetingSession . configuration . credentials . attendeeId ;
// To track mute changes
meetingSession . audioVideo . realtimeSubscribeToVolumeIndicator (
presentAttendeeId ,
( attendeeId , volume , muted , signalStrength ) => {
// A null value for volume, muted and signalStrength field means that it has not changed.
if ( muted === null ) {
// muted state has not changed, ignore volume and signalStrength changes
return ;
}
// mute state changed
console . log ( ` ${ attendeeId } 's mute state changed: ` , {
muted , // a boolean
} ) ;
}
) ;
// To track signal strength changes
meetingSession . audioVideo . realtimeSubscribeToVolumeIndicator (
presentAttendeeId ,
( attendeeId , volume , muted , signalStrength ) => {
// A null value for volume, muted and signalStrength field means that it has not changed.
if ( signalStrength === null ) {
// signalStrength has not changed, ignore volume and muted changes
return ;
}
// signal strength changed
console . log ( ` ${ attendeeId } 's signal strength changed: ` , {
signalStrength , // 0 (no signal), 0.5 (weak), 1 (strong)
} ) ;
}
) ;Kasus penggunaan 12. Deteksi speaker paling aktif. Misalnya, Anda dapat memperbesar elemen video pembicara aktif jika tersedia.
import { DefaultActiveSpeakerPolicy } from 'amazon-chime-sdk-js' ;
const activeSpeakerCallback = attendeeIds => {
if ( attendeeIds . length ) {
console . log ( ` ${ attendeeIds [ 0 ] } is the most active speaker` ) ;
}
} ;
meetingSession . audioVideo . subscribeToActiveSpeakerDetector (
new DefaultActiveSpeakerPolicy ( ) ,
activeSpeakerCallback
) ;Catatan: Dalam istilah Chime SDK, ubin video adalah o
