Teams 상호 운용성 채팅에서 UI 라이브러리를 사용하여 인라인 이미지 사용

아티클
04/23/2024

Teams 상호 운용성 채팅("Interop 채팅")에서 Azure Communication Service 최종 사용자가 Teams 사용자가 보낸 인라인 이미지를 받을 수 있습니다. 현재 Azure Communication Service 최종 사용자는 Teams 사용자로부터 인라인 이미지만 받을 수 있습니다. 자세한 내용은 UI 라이브러리 사용 사례를 참조하세요.

Important

인라인 이미지 기능은 추가 설정 없이 CallWithChat 복합과 함께 제공됩니다.

코드 다운로드

GitHub에서 이 자습서의 코드에 액세스합니다.

필수 조건

활성 구독이 있는 Azure 계정. 자세한 내용은 체험 계정 만들기를 참조하세요.
지원되는 플랫폼 중 하나인 Visual Studio Code.
Node.js, 활성 LTS 및 유지 관리 LTS 버전. node --version 명령을 사용하여 버전을 확인합니다.
활성 Communication Services 리소스 및 연결 문자열 Communication Services 리소스 만들기
UI 라이브러리 버전 1.15.0 또는 최신 버전을 사용합니다.
Teams 모임을 만들고 모임 링크를 준비합니다.
ChatWithChat 복합의 작동 방식을 숙지하세요.

배경

우선 Teams Interop 채팅이 현재 Teams 모임에 참여해야 한다는 것을 이해해야 합니다. Teams 사용자가 온라인 모임을 만들면 채팅 스레드가 만들어지고 모임과 연결됩니다. Azure Communication Service 최종 사용자가 채팅에 참가하고 메시지 보내기/받기를 시작하도록 하려면 모임 참가자(Teams 사용자)가 먼저 통화를 수락해야 합니다. 그렇지 않으면 채팅에 액세스할 수 없습니다.

Azure Communication Service 최종 사용자가 통화에 허용되면 통화 중인 다른 참가자와 채팅을 시작할 수 있습니다. 이 자습서에서는 Interop 채팅에서 인라인 이미지가 작동하는 방식을 확인합니다.

개요

앞에서 설명한 것처럼 Teams 모임에 먼저 참가해야 하므로 UI 라이브러리에서 ChatWithChat 복합을 사용해야 합니다.

스토리북 페이지에서 기본 예제를 따라 ChatWithChat 복합을 만들어 보겠습니다.

샘플 코드에는 다음 코드 조각으로 정의된 CallWithChatExampleProps가 필요합니다.

export type CallWithChatExampleProps = {
  // Props needed for the construction of the CallWithChatAdapter
  userId: CommunicationUserIdentifier;
  token: string;
  displayName: string;
  endpointUrl: string;
  locator: TeamsMeetingLinkLocator | CallAndChatLocator;

  // Props to customize the CallWithChatComposite experience
  fluentTheme?: PartialTheme | Theme;
  compositeOptions?: CallWithChatCompositeOptions;
  callInvitationURL?: string;
};

모임 채팅을 위해 복합을 시작하려면 다음과 같은 TeamsMeetingLinkLocator를 전달해야 합니다.

{ "meetingLink": "<TEAMS_MEETING_LINK>" }

더 이상 필요한 사항은 없습니다. 특히 인라인 이미지를 사용하도록 설정하는 데 필요한 다른 설정은 없습니다.

코드 실행

npm run start를 실행하면 다음 스크린샷처럼 localhost:3000을 통해 샘플 앱에 액세스할 수 있습니다.

Azure Communication Services UI 라이브러리의 스크린샷.

아래쪽에 있는 채팅 단추를 클릭하면 채팅 패널이 표시됩니다. Teams 사용자가 이미지를 보내면 다음 스크린샷과 같은 내용이 표시됩니다.

두 개의 인라인 이미지를 수신하는 Azure Communication Services UI 라이브러리의 스크린샷.

Teams Interop 채팅에서는 현재 Teams 사용자가 보낸 인라인 이미지를 수신하는 Azure Communication Service 최종 사용자만 지원합니다. 지원되는 기능에 대해 자세히 알아보려면 UI 라이브러리 사용 사례를 참조하세요.

알려진 문제

UI 라이브러리는 현재 특정 GIF 이미지를 지원하지 않을 수 있습니다. 대신 사용자가 정적 이미지를 받을 수 있습니다.
웹 UI 라이브러리는 현재 Teams 사용자가 보낸 클립(짧은 비디오)을 지원하지 않습니다.

다음 단계

UI 라이브러리의 나머지 부분 확인

다음을 수행할 수도 있습니다.

다음을 통해 공유