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

아티클
11/07/2024

Teams 상호 운용성 채팅("Interop 채팅")을 사용하면 Azure Communication Services 사용자가 Teams 사용자가 보낸 인라인 이미지를 받을 수 있습니다. 서식 있는 텍스트 편집기를 사용하도록 설정하면 Azure Communication Services 사용자가 Teams 사용자에게 인라인 이미지를 보낼 수 있습니다. 자세한 내용은 UI 라이브러리 사용 사례를 참조 하세요.

인라인 이미지를 수신하기 위한 Azure Communication Services의 기능은 추가 설정 없이 복합과 함께 CallWithChat 제공됩니다. 인라인 이미지를 보내기 위해 Azure Communication Services에서 기능을 사용하도록 설정하려면 다음CallWithChatCompositeOptions으로 true 설정합니다richTextEditor.

Important

인라인 이미지를 보내기 위한 Azure Communication Services의 기능은 현재 미리 보기로 제공됩니다.

미리 보기 API 및 SDK는 서비스 수준 계약 없이 제공됩니다. 프로덕션 워크로드에는 사용하지 않는 것이 좋습니다. 일부 기능은 지원되지 않거나 기능이 제한될 수 있습니다.

자세한 내용은 Microsoft Azure 미리 보기에 대한 보충 사용 약관을 검토하세요.

코드 다운로드

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

필수 조건

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

배경

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

Azure Communication Services 사용자가 통화에 입장하면 통화에서 다른 참가자와 채팅을 시작할 수 있습니다. 이 자습서에서는 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;
};

인라인 이미지 수신을 사용하도록 설정하려면 특정 설정이 필요하지 않습니다. 그러나 인라인 이미지를 보내려면 함수를 richTextEditor 통해 CallWithChatExampleProps사용하도록 설정해야 합니다. 사용하도록 설정하는 방법에 대한 코드 조각은 다음과 같습니다.

<CallWithChatExperience
  // ...any other call with chat props
  compositeOptions={{ richTextEditor: true }}
/>

모임 채팅에 대한 복합 항목을 시작하려면 다음과 같이 전달 TeamsMeetingLinkLocator해야 합니다.

{ "meetingLink": "<TEAMS_MEETING_LINK>" }

다른 설정은 필요하지 않습니다.

코드 실행

를 실행 npm run start해 보겠습니다. 그런 다음 , 을 통해 localhost:3000샘플 앱에 액세스할 수 있습니다.

Azure Communication Services UI 라이브러리를 보여 주는 스크린샷

창 아래쪽에 있는 채팅 단추를 선택하여 채팅 창을 엽니다. 이제 Teams 사용자가 이미지를 보내면 다음 스크린샷과 같은 내용이 표시됩니다.

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

인라인 이미지를 보내는 기능을 사용하도록 설정하면 다음 스크린샷과 같은 내용이 표시됩니다.

두 개의 인라인 이미지를 보내고 메시지를 편집하는 Azure Communication Services UI 라이브러리를 보여 주는 스크린샷

알려진 문제

UI 라이브러리는 현재 특정 GIF 이미지를 지원하지 않을 수 있습니다. 대신 사용자가 정적 이미지를 받을 수 있습니다.
웹 UI 라이브러리는 현재 Teams 사용자가 보낸 클립(짧은 비디오)을 지원하지 않습니다.
특정 Android 디바이스의 경우 서식 있는 텍스트 편집기를 누른 상태에서 붙여넣기를 선택하는 경우에만 단일 이미지 붙여넣기가 지원됩니다. 키보드를 사용하여 클립보드 보기에서 선택하는 것은 지원되지 않을 수 있습니다.

다음 단계

나머지 UI 라이브러리 확인

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

다음을 통해 공유