amazon chime sdk js
Release amazon-chime-sdk-3.25.0
Amazon Chime SDK-Projektboard
Amazon Chime SDK React-Komponenten
Das Amazon Chime SDK besteht aus einer Reihe von Echtzeit-Kommunikationskomponenten, mit denen Entwickler ihren Web- oder Mobilanwendungen schnell Messaging-, Audio-, Video- und Bildschirmfreigabefunktionen hinzufügen können.
Entwickler können auf der globalen Kommunikationsinfrastruktur von AWS aufbauen, um ansprechende Erlebnisse in ihren Anwendungen bereitzustellen. Sie können beispielsweise einer Gesundheitsanwendung Videos hinzufügen, damit Patienten aus der Ferne Ärzte zu Gesundheitsfragen konsultieren können, oder individuelle Audioansagen für die Integration in das öffentliche Telefonnetz erstellen.
Das Amazon Chime SDK für JavaScript stellt eine Verbindung zu Besprechungssitzungsressourcen her, die Sie in Ihrem AWS-Konto erstellen. Das SDK verfügt über alles, was Sie zum Erstellen benutzerdefinierter Anruf- und Zusammenarbeitserlebnisse in Ihrer Webanwendung benötigen, einschließlich Methoden zum Konfigurieren von Besprechungssitzungen, zum Auflisten und Auswählen von Audio- und Videogeräten, zum Starten und Stoppen der Bildschirmfreigabe und der Bildschirmfreigabeanzeige sowie zum Empfangen von Rückrufen bei Medienereignissen wie z Lautstärkeänderungen auftreten und Besprechungsfunktionen wie Audio-Stummschaltung und Videokachelbindungen steuern.
Wenn Sie eine React-Anwendung erstellen, sollten Sie die Verwendung der Amazon Chime SDK React Component Library in Betracht ziehen, die clientseitige Statusverwaltung und wiederverwendbare UI-Komponenten für gängige Webschnittstellen bereitstellt, die in Audio- und Videokonferenzanwendungen verwendet werden. Amazon Chime bietet außerdem Amazon Chime SDK für iOS und Amazon Chime SDK für Android für die native Entwicklung mobiler Anwendungen.
Das Amazon Chime SDK-Projektboard erfasst den Status von Community-Funktionsanfragen in allen unseren Repositorys. Die Beschreibungen der Spalten auf der Tafel sind in diesem Leitfaden enthalten.
Zusätzlich zum Folgenden finden Sie hier eine Liste aller Blogbeiträge zum Amazon Chime SDK.
Die folgenden Entwicklerhandbücher behandeln spezifische Themen für ein technisches Publikum.
In den folgenden Entwicklerhandbüchern wird das Amazon Chime SDK umfassender behandelt.
.js DateiSehen Sie sich die in der README-Datei angegebenen Ressourcen an und nutzen Sie unsere Client-Dokumentation als Anleitung zur Entwicklung auf dem Chime SDK für JavaScript. Durchsuchen Sie außerdem unsere Problemdatenbank und unsere FAQs, um zu sehen, ob Ihr Problem bereits behoben wurde. Wenn nicht, erstellen Sie uns bitte ein Problem mithilfe der bereitgestellten Vorlagen.
Der Blog-Beitrag „Überwachung und Fehlerbehebung mit Amazon Chime SDK-Besprechungsereignissen“ geht ausführlich darauf ein, wie Sie Besprechungsereignisse zur Fehlerbehebung bei Ihrer Anwendung verwenden können, indem Sie sich bei Amazon CloudWatch anmelden.
Wenn Sie weitere Fragen haben oder Unterstützung für Ihr Unternehmen benötigen, können Sie sich an den AWS-Kundensupport wenden. Sie können unsere Support-Pläne hier einsehen.
Das Amazon Chime SDK für JavaScript verwendet WebRTC, die Echtzeit-Kommunikations-API, die in den meisten modernen Browsern unterstützt wird. Hier finden Sie einige allgemeine Ressourcen zu WebRTC.
Stellen Sie sicher, dass Sie über Node.js Version 18 oder höher verfügen. Knoten 20 wird empfohlen und unterstützt.
Um das Amazon Chime SDK für JavaScript zu einer vorhandenen Anwendung hinzuzufügen, installieren Sie das Paket direkt von npm:
npm install amazon-chime-sdk-js --save
Beachten Sie, dass das Amazon Chime SDK für JavaScript auf ES2015 abzielt, das mit allen unterstützten Browsern vollständig kompatibel ist.
Erstellen Sie eine Besprechungssitzung in Ihrer Clientanwendung.
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
) ; Sie können ein AWS SDK, das AWS Command Line Interface (AWS CLI) oder die REST-API verwenden, um API-Aufrufe durchzuführen. In diesem Abschnitt verwenden Sie das AWS SDK für JavaScript in Ihrer Serveranwendung, z. B. Node.js. Weitere Informationen finden Sie in der Amazon Chime SDK-API-Referenz.
️ Die Serveranwendung erfordert nicht das Amazon Chime SDK für 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 ( ) ; Übertragen Sie nun die meetingResponse und attendeeResponse -Objekte sicher an Ihre Clientanwendung. Diese Objekte enthalten alle Informationen, die eine Clientanwendung benötigt, um dem Meeting beizutreten, indem sie das Amazon Chime SDK für JavaScript verwendet.
Der Wert des MediaRegion-Parameters in createMeeting() sollte idealerweise auf den Medienbereich festgelegt werden, der dem Benutzer, der ein Meeting erstellt, am nächsten liegt. Eine Implementierung finden Sie unter dem Thema „Auswählen der nächstgelegenen Medienregion“ in der Dokumentation zu Amazon Chime SDK-Medienregionen.
Erstellen Sie in Ihrer Client-Anwendung eine Messaging-Sitzung, um Nachrichten vom Amazon Chime SDK für Messaging zu empfangen.
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 ) ; Wenn Sie die Prefetch-Funktion beim Herstellen einer Verbindung zu einer Messaging-Sitzung aktivieren möchten, können Sie dem folgenden Code folgen. Die Prefetch-Funktion sendet bei der Websocket-Verbindung das Ereignis CHANNEL_DETAILS, das Informationen über den Kanal, Kanalnachrichten, Kanalmitgliedschaften usw. enthält. Die Sortierreihenfolge des Prefetch kann mit prefetchSortBy angepasst werden, indem es entweder auf unread (Standardwert, wenn nicht festgelegt) oder lastMessageTimestamp gesetzt wird
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
Nachdem Sie npm run test zum ersten Mal ausgeführt haben, können Sie npm run test:fast verwenden, um die Testsuite zu beschleunigen.
Tags werden abgerufen, um Versionsmetadaten korrekt zu generieren.
Um die Ergebnisse der Codeabdeckung anzuzeigen, öffnen Sie coverage/index.html in Ihrem Browser, nachdem Sie npm run test ausgeführt haben.
Wenn Sie npm run test ausführen und die Tests ausgeführt werden, der Abdeckungsbericht jedoch nicht generiert wird, liegt möglicherweise ein Problem bei der Ressourcenbereinigung vor. In Mocha v4.0.0 oder neuer wurde die Implementierung geändert, sodass die Mocha-Prozesse nach Abschluss des Testlaufs kein Beenden erzwingen.
Wenn Ihr Komponententest beispielsweise ein DefaultVideoTransformDevice enthält, müssen Sie await device.stop(); um die Ressourcen zu bereinigen und nicht auf dieses Problem zu stoßen. Sie können sich auch die Verwendung von done(); ansehen. in der Mocha-Dokumentation.
Um eine JavaScript-API-Referenzdokumentation zu generieren, führen Sie Folgendes aus:
npm run build
npm run doc
Öffnen Sie dann docs/index.html in Ihrem Browser.
Wenn Sie in diesem Projekt ein potenzielles Sicherheitsproblem entdecken, bitten wir Sie, AWS/Amazon Security über unsere Schwachstellen-Meldeseite zu benachrichtigen. Bitte erstellen Sie kein öffentliches GitHub-Problem.
Hinweis: Bevor Sie eine Sitzung starten, müssen Sie Ihr Mikrofon, Ihren Lautsprecher und Ihre Kamera auswählen.
Anwendungsfall 1. Listen Sie Audioeingabe-, Audioausgabe- und Videoeingabegeräte auf. Der Browser fragt nach Mikrofon- und Kameraberechtigungen.
Wenn der Parameter forceUpdate auf „true“ gesetzt ist, werden zwischengespeicherte Geräteinformationen verworfen und aktualisiert, nachdem der Gerätebezeichnungsauslöser aufgerufen wurde. In manchen Fällen müssen Entwickler das Auslösen von Berechtigungsdialogen verzögern, z. B. wenn sie einem Meeting nur im Ansichtsmodus beitreten, und dann später in der Lage sein, eine Berechtigungsaufforderung auszulösen, um Gerätebezeichnungen anzuzeigen. Durch die Angabe von forceUpdate ist dies möglich.
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 } ` ) ;
} ) ; Anwendungsfall 2. Wählen Sie Audioeingabe- und Audioausgabegeräte aus, indem Sie die deviceId eines MediaDeviceInfo Objekts übergeben. Beachten Sie, dass Sie zuerst listAudioInputDevices und listAudioOutputDevices aufrufen müssen.
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 ) ; Anwendungsfall 3. Wählen Sie ein Videoeingabegerät aus, indem Sie die deviceId eines MediaDeviceInfo Objekts übergeben. Beachten Sie, dass Sie zuerst listVideoInputDevices aufrufen müssen.
Wenn sich neben der Kamera des Teilnehmers eine LED-Leuchte befindet, wird diese eingeschaltet, um anzuzeigen, dass sie jetzt von der Kamera aufnimmt. Sie möchten wahrscheinlich ein Videoeingabegerät auswählen, wenn Sie mit der Freigabe Ihres Videos beginnen.
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 ( ) ; Anwendungsfall 4. Fügen Sie einen Geräteänderungsbeobachter hinzu, um die aktualisierte Geräteliste zu erhalten. Wenn Sie beispielsweise Bluetooth-Headsets mit Ihrem Computer koppeln, werden audioInputsChanged und audioOutputsChanged mit der Geräteliste einschließlich Headsets aufgerufen.
Sie können den audioInputMuteStateChanged Rückruf verwenden, um den zugrunde liegenden Hardware-Stummschaltungsstatus in Browsern und Betriebssystemen zu verfolgen, die dies unterstützen.
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 ) ; Anwendungsfall 5. Starten Sie eine Sitzung. Um Audio zu hören, müssen Sie ein Gerät und einen Stream an ein <audio> -Element binden. Sobald die Sitzung begonnen hat, können Sie mit den Teilnehmern sprechen und ihnen zuhören. Stellen Sie sicher, dass Sie Ihr Mikrofon und Ihren Lautsprecher ausgewählt haben (siehe Abschnitt „Gerät“) und dass mindestens ein weiterer Teilnehmer der Sitzung beigetreten ist.
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 ( ) ;Anwendungsfall 6. Fügen Sie einen Beobachter hinzu, um Sitzungslebenszyklusereignisse zu empfangen: Verbinden, Starten und Stoppen.
Hinweis: Sie können einen Beobachter entfernen, indem Sie
meetingSession.audioVideo.removeObserver(observer)aufrufen. In einer komponentenbasierten Architektur (wie React, Vue und Angular) müssen Sie möglicherweise einen Beobachter hinzufügen, wenn eine Komponente gemountet wird, und ihn entfernen, wenn sie nicht gemountet wird.
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 ) ;Hinweis: Bisher haben Sie Beobachter hinzugefügt, um Geräte- und Sitzungslebenszyklusereignisse zu empfangen. In den folgenden Anwendungsfällen verwenden Sie die Echtzeit-API-Methoden, um Lautstärkeindikatoren zu senden und zu empfangen und den Stummschaltungsstatus zu steuern.
Anwendungsfall 7. Stummschalten und Aufheben der Stummschaltung eines Audioeingangs.
// 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' ) ;
}Anwendungsfall 8. Um zu überprüfen, ob das lokale Mikrofon stummgeschaltet ist, verwenden Sie diese Methode, anstatt Ihren eigenen Stummschaltungsstatus zu verfolgen.
const muted = meetingSession . audioVideo . realtimeIsLocalAudioMuted ( ) ;
if ( muted ) {
console . log ( 'You are muted' ) ;
} else {
console . log ( 'Other attendees can hear your audio' ) ;
}Anwendungsfall 9. Stummschaltung aufheben deaktivieren. Wenn Sie verhindern möchten, dass Benutzer die Stummschaltung selbst aufheben (z. B. während einer Präsentation), verwenden Sie diese Methoden, anstatt Ihren eigenen Status zum Aufheben der Stummschaltung zu verfolgen.
meetingSession . audioVideo . realtimeSetCanUnmuteLocalAudio ( false ) ;
// Optional: Force mute.
meetingSession . audioVideo . realtimeMuteLocalAudio ( ) ;
const unmuted = meetingSession . audioVideo . realtimeUnmuteLocalAudio ( ) ;
console . log ( ` ${ unmuted } is false. You cannot unmute yourself` ) ;Anwendungsfall 10. Abonnieren Sie Lautstärkeänderungen eines bestimmten Teilnehmers. Sie können damit eine Benutzeroberfläche für die Echtzeit-Volumenanzeige erstellen.
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)
} ) ;
}
) ;Anwendungsfall 11. Abonnieren Sie die Stummschaltung oder Änderung der Signalstärke eines bestimmten Teilnehmers. Sie können dies verwenden, um eine Benutzeroberfläche nur für die Stummschaltung oder nur für Änderungen der Signalstärke zu erstellen.
// 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)
} ) ;
}
) ;Anwendungsfall 12. Ermitteln Sie den aktivsten Sprecher. Sie können beispielsweise das Videoelement des aktiven Sprechers vergrößern, sofern verfügbar.
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
) ;Hinweis: Im Sinne des Chime SDK ist eine Videokachel ein o
