amazon chime sdk js
Release amazon-chime-sdk-3.25.0
Amazon Chime SDK 프로젝트 보드
Amazon Chime SDK React 구성 요소
Amazon Chime SDK는 개발자가 웹 또는 모바일 애플리케이션에 메시징, 오디오, 비디오 및 화면 공유 기능을 빠르게 추가하는 데 사용할 수 있는 실시간 통신 구성 요소 세트입니다.
개발자는 AWS의 글로벌 통신 인프라를 구축하여 애플리케이션에서 매력적인 경험을 제공할 수 있습니다. 예를 들어, 환자가 건강 문제에 대해 의사와 원격으로 상담할 수 있도록 건강 애플리케이션에 비디오를 추가하거나 공중 전화 네트워크와의 통합을 위한 맞춤형 오디오 프롬프트를 만들 수 있습니다.
JavaScript용 Amazon Chime SDK는 AWS 계정에서 생성한 회의 세션 리소스에 연결하여 작동합니다. SDK에는 회의 세션 구성, 오디오 및 비디오 장치 나열 및 선택, 화면 공유 및 화면 공유 보기 시작 및 중지, 다음과 같은 미디어 이벤트 시 콜백 수신 등 웹 애플리케이션에서 사용자 정의 통화 및 협업 환경을 구축하는 데 필요한 모든 것이 포함되어 있습니다. 볼륨 변경이 발생하고 오디오 음소거 및 비디오 타일 바인딩과 같은 회의 기능을 제어합니다.
React 애플리케이션을 구축하는 경우 오디오 및 비디오 회의 애플리케이션에 사용되는 일반 웹 인터페이스에 대한 재사용 가능한 UI 구성 요소와 클라이언트 측 상태 관리를 제공하는 Amazon Chime SDK React 구성 요소 라이브러리를 사용하는 것이 좋습니다. Amazon Chime은 기본 모바일 애플리케이션 개발을 위해 iOS용 Amazon Chime SDK와 Android용 Amazon Chime SDK도 제공합니다.
Amazon Chime SDK 프로젝트 보드는 모든 리포지토리의 커뮤니티 기능 요청 상태를 캡처합니다. 보드의 열에 대한 설명은 이 가이드에 캡처되어 있습니다.
아래 내용 외에도 Amazon Chime SDK에 대한 모든 블로그 게시물 목록이 있습니다.
다음 개발자 가이드에서는 기술적인 독자를 위한 특정 주제를 다룹니다.
다음 개발자 안내서에서는 Amazon Chime SDK를 더 광범위하게 다룹니다.
.js 파일로 묶는 스크립트README에 제공된 리소스를 검토하고 클라이언트 문서를 사용하여 JavaScript용 Chime SDK를 개발하는 방법에 대한 지침을 확인하세요. 또한 문제 데이터베이스와 FAQ를 검색하여 문제가 이미 해결되었는지 확인하세요. 그렇지 않은 경우 제공된 템플릿을 사용하여 문제를 해결해 주세요.
Amazon Chime SDK 회의 이벤트를 사용한 모니터링 및 문제 해결 블로그 게시물에서는 회의 이벤트를 사용하여 Amazon CloudWatch에 로그인하여 애플리케이션 문제를 해결하는 방법에 대해 자세히 설명합니다.
더 많은 질문이 있거나 비즈니스에 대한 지원이 필요한 경우 AWS 고객 지원에 문의할 수 있습니다. 여기에서 지원 계획을 검토할 수 있습니다.
JavaScript용 Amazon Chime SDK는 대부분의 최신 브라우저에서 지원되는 실시간 통신 API인 WebRTC를 사용합니다. 다음은 WebRTC에 대한 몇 가지 일반적인 리소스입니다.
Node.js 버전 18 이상이 있는지 확인하세요. 노드 20이 권장되고 지원됩니다.
JavaScript용 Amazon Chime SDK를 기존 애플리케이션에 추가하려면 npm에서 직접 패키지를 설치하십시오.
npm install amazon-chime-sdk-js --save
JavaScript용 Amazon Chime SDK는 지원되는 모든 브라우저와 완벽하게 호환되는 ES2015를 대상으로 합니다.
클라이언트 응용 프로그램에서 회의 세션을 만듭니다.
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
) ; AWS SDK, AWS 명령줄 인터페이스(AWS CLI) 또는 REST API를 사용하여 API를 호출할 수 있습니다. 이 섹션에서는 서버 애플리케이션(예: Node.js)에서 JavaScript용 AWS SDK를 사용합니다. 자세한 내용은 Amazon Chime SDK API 참조를 참조하십시오.
️ 서버 애플리케이션에는 JavaScript용 Amazon Chime SDK가 필요하지 않습니다.
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 ( ) ; 이제 meetingResponse 및 attendeeResponse 개체를 클라이언트 애플리케이션으로 안전하게 전송하세요. 이러한 객체에는 JavaScript용 Amazon Chime SDK를 사용하여 회의에 참여하는 클라이언트 애플리케이션에 필요한 모든 정보가 포함되어 있습니다.
createMeeting()의 MediaRegion 매개변수 값은 회의를 생성하는 사용자에게 가장 가까운 미디어 지역 중 하나로 설정하는 것이 이상적입니다. 구현은 Amazon Chime SDK 미디어 지역 설명서의 '가장 가까운 미디어 지역 선택' 주제에서 찾을 수 있습니다.
메시징용 Amazon Chime SDK에서 메시지를 수신하려면 클라이언트 애플리케이션에서 메시징 세션을 생성합니다.
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 ) ; 메시징 세션에 연결할 때 프리패치 기능을 활성화하려면 아래 코드를 따르세요. 프리페치 기능은 웹소켓 연결 시 채널, 채널 메시지, 채널 멤버십 등에 대한 정보가 포함된 CHANNEL_DETAILS 이벤트를 전송합니다. 프리페치 정렬 순서는 prefetchSortBy 사용하여 unread (설정되지 않은 경우 기본값) 또는 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
npm run test 처음 실행한 후 npm run test:fast 사용하여 테스트 스위트 속도를 높일 수 있습니다.
버전 관리 메타데이터를 올바르게 생성하기 위해 태그를 가져옵니다.
코드 적용 범위 결과를 보려면 npm run test 실행한 후 브라우저에서 coverage/index.html 엽니다.
npm run test 실행하고 테스트가 실행 중이지만 적용 범위 보고서가 생성되지 않는 경우 리소스 정리 문제가 있을 수 있습니다. Mocha v4.0.0 이상에서는 테스트 실행이 완료될 때 Mocha 프로세스가 강제로 종료되지 않도록 구현이 변경되었습니다.
예를 들어 단위 테스트에 DefaultVideoTransformDevice 가 있는 경우 await device.stop(); 리소스를 정리하고 이 문제가 발생하지 않도록 하세요. done(); Mocha 문서에 있습니다.
JavaScript API 참조 문서를 생성하려면 다음을 실행하세요.
npm run build
npm run doc
그런 다음 브라우저에서 docs/index.html 엽니다.
이 프로젝트에서 잠재적인 보안 문제를 발견한 경우 취약성 보고 페이지를 통해 AWS/Amazon 보안에 알려 주시기 바랍니다. 공개 GitHub 문제를 생성 하지 마세요.
참고: 세션을 시작하기 전에 마이크, 스피커 및 카메라를 선택해야 합니다.
사용 사례 1. 오디오 입력, 오디오 출력 및 비디오 입력 장치를 나열합니다. 브라우저는 마이크 및 카메라 권한을 요청합니다.
forceUpdate 매개변수를 true로 설정하면 캐시된 장치 정보가 삭제되고 장치 레이블 트리거가 호출된 후 업데이트됩니다. 경우에 따라 빌더는 보기 전용 모드로 회의에 참여할 때와 같이 권한 대화 상자의 트리거링을 지연한 다음 나중에 장치 레이블을 표시하기 위해 권한 프롬프트를 트리거할 수 있어야 합니다. forceUpdate 지정하면 이러한 일이 발생합니다.
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 } ` ) ;
} ) ; 사용 사례 2. MediaDeviceInfo 개체의 deviceId 를 전달하여 오디오 입력 및 오디오 출력 장치를 선택합니다. listAudioInputDevices 및 listAudioOutputDevices 먼저 호출해야 합니다.
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 ) ; 사용 사례 3. MediaDeviceInfo 개체의 deviceId 전달하여 비디오 입력 장치를 선택합니다. 먼저 listVideoInputDevices 호출해야 합니다.
참석자의 카메라 옆에 LED 조명이 있으면 켜져서 현재 카메라에서 캡처 중임을 나타냅니다. 비디오 공유를 시작할 때 비디오 입력 장치를 선택하고 싶을 수도 있습니다.
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 ( ) ; 사용 사례 4. 업데이트된 장치 목록을 수신하려면 장치 변경 관찰자를 추가합니다. 예를 들어, Bluetooth 헤드셋을 컴퓨터와 페어링하면 audioInputsChanged 및 audioOutputsChanged 헤드셋을 포함한 장치 목록과 함께 호출됩니다.
audioInputMuteStateChanged 콜백을 사용하여 이를 지원하는 브라우저 및 운영 체제에서 기본 하드웨어 음소거 상태를 추적할 수 있습니다.
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 ) ; 사용 사례 5. 세션을 시작합니다. 오디오를 들으려면 장치와 스트리밍을 <audio> 요소에 바인딩해야 합니다. 세션이 시작되면 참석자들과 대화하고 들을 수 있습니다. 마이크와 스피커를 선택했는지("장치" 섹션 참조), 최소 한 명의 다른 참석자가 세션에 참여했는지 확인하세요.
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 ( ) ;사용 사례 6. 세션 수명 주기 이벤트(연결, 시작, 중지)를 수신할 관찰자를 추가합니다.
참고:
meetingSession.audioVideo.removeObserver(observer)호출하여 관찰자를 제거할 수 있습니다. 구성 요소 기반 아키텍처(예: React, Vue 및 Angular)에서는 구성 요소가 마운트될 때 관찰자를 추가하고 마운트 해제할 때 제거해야 할 수 있습니다.
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 ) ;참고: 지금까지 장치 및 세션 수명 주기 이벤트를 수신하기 위해 관찰자를 추가했습니다. 다음 사용 사례에서는 실시간 API 메서드를 사용하여 볼륨 표시기를 보내고 받고 음소거 상태를 제어합니다.
사용 사례 7. 오디오 입력을 음소거 및 음소거 해제합니다.
// 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' ) ;
}사용 사례 8. 로컬 마이크가 음소거되었는지 확인하려면 자신의 음소거 상태를 추적하는 대신 이 방법을 사용하십시오.
const muted = meetingSession . audioVideo . realtimeIsLocalAudioMuted ( ) ;
if ( muted ) {
console . log ( 'You are muted' ) ;
} else {
console . log ( 'Other attendees can hear your audio' ) ;
}사용 사례 9. 음소거 해제를 비활성화합니다. 사용자가 스스로 음소거를 해제하는 것을 방지하려면(예: 프레젠테이션 중에) 자신의 음소거 해제 가능 상태를 추적하는 대신 이러한 방법을 사용하십시오.
meetingSession . audioVideo . realtimeSetCanUnmuteLocalAudio ( false ) ;
// Optional: Force mute.
meetingSession . audioVideo . realtimeMuteLocalAudio ( ) ;
const unmuted = meetingSession . audioVideo . realtimeUnmuteLocalAudio ( ) ;
console . log ( ` ${ unmuted } is false. You cannot unmute yourself` ) ;사용 사례 10. 특정 참석자의 볼륨 변경 사항을 구독합니다. 이를 사용하여 실시간 볼륨 표시기 UI를 구축할 수 있습니다.
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)
} ) ;
}
) ;사용 사례 11. 특정 참석자의 음소거 또는 신호 강도 변경을 구독합니다. 이를 사용하여 음소거 또는 신호 강도 변경만 위한 UI를 구축할 수 있습니다.
// 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)
} ) ;
}
) ;사용 사례 12. 가장 활동적인 화자를 감지합니다. 예를 들어, 가능한 경우 현재 발언자의 비디오 요소를 확대할 수 있습니다.
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
) ;참고: Chime SDK 용어에서 비디오 타일은 o입니다.
