애플리케이션용 UI 라이브러리에 사용자 지정 데이터 모델 삽입

아티클
02/27/2024

Azure Communication Services는 개발자가 자신의 ID를 가져올 수 있는 ID 기반이 아닌 모델을 사용합니다. 개발자는 데이터 모델을 가져와서 Azure Communication Services ID에 연결할 수 있습니다. 사용자 관련 데이터 모델에는 표시 이름, 프로필 사진 또는 아바타 및 기타 세부 정보와 같은 정보가 포함될 가능성이 높습니다. 개발자는 이 정보를 사용하여 애플리케이션과 플랫폼을 빌드합니다.

UI 라이브러리를 사용하면 사용자 데이터 모델을 UI 구성 요소에 간단하게 삽입할 수 있습니다. UI 구성 요소를 렌더링하면 사용자에게 Azure Communication Services의 일반 정보가 아닌 제공된 정보가 표시됩니다.

필수 조건

활성 구독이 있는 Azure 계정. 체험 계정을 만듭니다.
배포된 Communication Services 리소스. Communication Services 리소스 만들기
호출 클라이언트를 사용하도록 설정하는 사용자 액세스 토큰입니다. 사용자 액세스 토큰을 가져옵니다.
선택 사항: UI 라이브러리 복합 구성 요소 시작 빠른 시작을 완료합니다.

삽입 설정

웹 UI 라이브러리에 대한 자세한 설명서 및 빠른 시작은 웹 UI 라이브러리 스토리북을 참조하세요.

자세한 내용은 웹 UI 라이브러리의 사용자 지정 사용자 데이터 모델을 참조하세요.

자세한 내용은 오픈 소스 Android UI 라이브러리 및 샘플 애플리케이션 코드를 참조하세요.

로컬 참가자 보기 사용자 지정

UI 라이브러리는 개발자에게 참가자 정보와 관련하여 사용자 지정된 환경을 제공할 수 있습니다. 시작 시에 필요에 따라 로컬 참가자 데이터를 삽입할 수 있습니다. 이 로컬 데이터는 서버와 공유되지 않으며, 로컬 사용자의 표시 이름과 아바타를 사용자 지정하는 데 이 데이터를 사용할 수 있습니다.

로컬 옵션

CallCompositeLocalOptions는 CallCompositeParticipantViewData 및 CallCompositeSetupScreenViewData를 사용할 수 있는 데이터 모델입니다. 로컬 참가자를 나타냅니다.

기본적으로 원격 참가자의 경우 UI 라이브러리는 RemoteOptions에 삽입된 displayName 정보를 표시합니다. 이 정보는 Azure Communication Services 백 엔드 서버로 전송됩니다. CallCompositeParticipantViewData가 삽입되면 참가자 displayName 및 avatar 정보가 모든 아바타 구성 요소에 로컬로 표시됩니다.

마찬가지로 CallCompositeSetupScreenViewData의 경우 CallCompositeSetupScreenViewData의 title 및 subtitle은 각각 모임 전 화면에서 탐색 모음의 제목과 부제목을 각각 덮어씁니다. 기본적으로 UI 라이브러리는 설치 프로그램을 제목으로 표시하고 부제목으로 아무것도 표시하지 않습니다.

로컬 참가자 보기 데이터

CallCompositeParticipantViewData는 아바타 컨트롤에 대한 displayName, avatarBitmap, scaleType을 설정하는 클래스입니다. 이 클래스는 로컬 참가자 보기 정보를 사용자 지정하기 위해 CallCompositeLocalOptions에 전달됩니다. 이 클래스는 통화를 호출하는 디바이스에서 로컬로 사용되는 옵션을 나타내는 CallCompositeLocalOptions 개체에 보관됩니다.

이 displayName 인스턴스는 CallCompositeRemoteOptions를 통해 전달된 displayName 정보와 다릅니다.

displayName의 CallCompositeParticipantViewData 인스턴스는 재정의로 로컬로만 사용됩니다.
displayName의 CallCompositeRemoteOptions 인스턴스가 서버에 전달되어 다른 참가자와 공유됩니다.

displayName의 CallCompositeParticipantViewData 인스턴스를 제공하지 않으면 애플리케이션에서 displayName의 CallCompositeRemoteOptions 인스턴스를 사용합니다.

설정 화면 보기 데이터

CallCompositeSetupScreenViewData는 통화 설정 화면의 탐색 모음과 관련된 title과 subtitle을 설정하는 개체입니다. subtitle이 정의되지 않은 경우 부제목은 숨겨집니다. 여기서 title은 subtitle을 설정하는 데 필요하지만 title이 설정된 경우 subtitle은 선택 사항입니다. 이 클래스는 로컬로 저장되며 해당 정보는 서버에 보내지 않습니다.

사용

CallCompositeLocalOptions를 사용하려면 CallCompositeParticipantViewData 및/또는 CallCompositeSetupScreenViewData의 인스턴스를 전달하고 CallCompositeLocalOptions를 callComposite.launch에 삽입합니다.

Kotlin
Java

val participantViewData: CallCompositeParticipantViewData = CallCompositeParticipantViewData()
    .setAvatarBitmap((Bitmap) avatarBitmap)
    .setScaleType((ImageView.ScaleType) scaleType)
    .setDisplayName((String) displayName)

val setupScreenViewData: CallCompositeSetupScreenViewData = CallCompositeSetupScreenViewData()
    .setTitle((String) title)
    .setSubtitle((String) subTitle)

val localOptions: CallCompositeLocalOptions = CallCompositeLocalOptions()
    .setParticipantViewData(participantViewData)
    .setSetupScreenViewData(setupScreenViewData)

callComposite.launch(callLauncherActivity, remoteOptions, localOptions)

final CallCompositeParticipantViewData participantViewData = new CallCompositeParticipantViewData()
    .setAvatarBitmap((Bitmap) avatarBitmap)
    .setScaleType((ImageView.ScaleType) scaleType)
    .setDisplayName((String) displayName);

final CallCompositeSetupScreenViewData setupScreenViewData = new CallCompositeSetupScreenViewData()
    .setTitle((String) title)
    .setSubtitle((String) subTitle);

final CallCompositeLocalOptions localOptions = new CallCompositeLocalOptions()
    .setParticipantViewData(participantViewData)
    .setSetupScreenViewData(setupScreenViewData);

callComposite.launch(callLauncherActivity, remoteOptions, localOptions);

설정 보기	통화 환경 보기

원격 참가자 보기 사용자 지정

경우에 따라 원격 참가자가 사용자 지정 아바타 및 제목을 허용하도록 로컬 재정의를 제공할 수 있습니다.

이 프로세스는 로컬 참가자 프로세스와 비슷하지만, 데이터는 참가자가 통화에 참가할 때 설정됩니다. 개발자는 원격 참가자가 통화에 참가할 때 수신기를 추가한 다음, 해당 원격 사용자에 대한 CallCompositeParticipantViewData를 설정하는 메서드를 호출해야 합니다.

사용

원격 참가자 보기 데이터를 설정하려면 setOnRemoteParticipantJoinedHandler를 설정합니다. 원격 참가자가 참가할 때 callComposite에 setRemoteParticipantViewData를 사용하여 원격 참가자에 대한 보기 데이터를 삽입합니다. CommunicationIdentifier 참가자 식별자는 원격 참가자를 고유하게 식별하기 위한 것입니다.

setRemoteParticipantViewData에 대한 호출은 다음 값이 있는 CallCompositeSetParticipantViewDataResult의 결과를 반환합니다.

CallCompositeSetParticipantViewDataResult.SUCCESS
CallCompositeSetParticipantViewDataResult.PARTICIPANT_NOT_IN_CALL

Kotlin
Java

callComposite.addOnRemoteParticipantJoinedEventHandler { remoteParticipantJoinedEvent -> 
                remoteParticipantJoinedEvent.identifiers.forEach { identifier ->
                    // get displayName, bitmap for identifier
                    callComposite.setRemoteParticipantViewData(identifier,
                        CallCompositeParticipantViewData().setDisplayName("displayName")) // setAvatarBitmap for bitmap
                }
            }

    callComposite.addOnRemoteParticipantJoinedEventHandler( (remoteParticipantJoinedEvent) -> {
                for (CommunicationIdentifier identifier: remoteParticipantJoinedEvent.getIdentifiers()) {
                    // get displayName, bitmap for identifier
                    callComposite.setRemoteParticipantViewData(identifier,
                            new CallCompositeParticipantViewData().setDisplayName("displayName")); // setAvatarBitmap for bitmap
                }
            });

참가자 목록

자세한 내용은 오픈 소스 iOS UI 라이브러리 및 샘플 애플리케이션 코드를 참조하세요.

로컬 참가자 보기 데이터 삽입

UI 라이브러리는 개발자에게 사용자 지정된 환경을 제공할 수 있습니다. 시작 시 선택적 로컬 데이터 옵션을 삽입할 수 있습니다. 이 개체는 렌더링할 아바타를 나타내는 UI 이미지와 필요에 따라 대신 표시할 수 있는 표시 이름을 포함할 수 있습니다. 이 정보는 Azure Communication Services로 전송되지 않습니다. 이 정보는 UI 라이브러리에서 로컬로만 유지됩니다.

로컬 옵션

LocalOptions는 ParticipantViewData와 SetupScreenViewData로 구성된 데이터 모델입니다.

ParticipantViewData의 경우 기본적으로 UI 라이브러리는 RemoteOptions에 삽입된 displayName 정보를 표시합니다. 이 정보는 Azure Communication Services 백 엔드 서버로 전송됩니다. ParticipantViewData가 삽입되면 참가자 displayName 및 avatar 정보가 모든 아바타 구성 요소에 표시됩니다.

SetupScreenViewData의 경우, 기본적으로 UI 라이브러리는 설치 프로그램을 제목으로 표시하고 부제목으로 아무것도 표시하지 않습니다. SetupScreenViewData의 title 및 subtitle 정보는 각각 모임 전 화면에서 탐색 모음의 제목과 부제목을 각각 덮어씁니다.

로컬 참가자 보기 데이터

ParticipantViewData는 아바타 구성 요소에 대한 displayName 및 avatar UI 이미지를 설정하는 개체입니다. 이 클래스는 아바타 정보를 설정하기 위해 UI 라이브러리에 삽입됩니다. 로컬로 저장되고 서버로 전송되지 않습니다.

설정 화면 보기 데이터

SetupScreenViewData는 모임 전 화면(즉, 설정 보기)의 navigationBar에 대한 title 및 subtitle을 설정하는 개체입니다. SetupScreenViewData를 정의하는 경우 title은 필수 필드이기 때문에 제공해야 합니다. 그러나 subtitle은 필수가 아닙니다.

subtitle은 정의하지 않으면 숨겨집니다. 이 클래스는 로컬로 저장되며 해당 정보는 서버에 보내지 않습니다.

사용

// LocalOptions (data not sent to the server)
let localParticipantViewData = ParticipantViewData(avatar: <Some UIImage>,
                                                   displayName: "<DISPLAY_NAME>")
let localSetupScreenViewData = SetupScreenViewData(title: "<NAV_TITLE>",
                                                               subtitle: "<NAV_SUBTITLE>")
let localOptions = LocalOptions(participantViewData: localParticipantViewData, 
                                setupScreenViewData: localSetupScreenViewData)
// RemoteOptions (data sent to the server)
let remoteOptions = RemoteOptions(for: .groupCall(groupId: UUID()),
                                  credential: <Some CommunicationTokenCredential>,
                                  displayName: "<DISPLAY_NAME>")
// Launch
callComposite.launch(remoteOptions: remoteOptions, localOptions: localOptions)

설정 보기	통화 환경 보기

원격 참가자 보기 데이터 삽입

원격 참가자가 참가할 때는 원격 참가자 관련 보기 데이터를 삽입할 수 있습니다. 이 참가자 보기 데이터는 렌더링할 아바타를 나타내는 UI 이미지와 필요에 따라 대신 표시할 수 있는 표시 이름을 포함할 수 있습니다. 이 정보는 Azure Communication Services로 전송되지 않습니다. 이 정보는 UI 라이브러리에서 로컬로만 유지됩니다.

사용

원격 참가자 보기 데이터를 설정하려면 이벤트 처리기에 onRemoteParticipantJoined 완료를 설정합니다. 원격 참가자가 참가할 때 CallComposite에 set(remoteParticipantViewData:, for:, completionHandler:)를 사용하여 원격 참가자에 대한 보기 데이터를 삽입합니다. CommunicationIdentifier 참가자 식별자는 원격 참가자를 고유하게 식별하는 데 사용됩니다. 선택적 완료 처리기는 설정 작업의 결과를 반환하는 데 사용합니다.

callComposite.events.onRemoteParticipantJoined = { [weak callComposite] identifiers in
  for identifier in identifiers {
    // map identifier to displayName
    let participantViewData = ParticipantViewData(displayName: "<DISPLAY_NAME>")
    callComposite?.set(remoteParticipantViewData: participantViewData,
                       for: identifier) { result in
      switch result {
      case .success:
        print("Set participant view data succeeded")
      case .failure(let error):
        print("Set participant view data failed with \(error)")
      }
    }
  }
}

참가자 목록

다음 단계

UI 라이브러리에 대해 자세히 알아보기

다음을 통해 공유

애플리케이션용 UI 라이브러리에 사용자 지정 데이터 모델 삽입

필수 조건

삽입 설정

로컬 참가자 보기 사용자 지정

로컬 옵션

로컬 참가자 보기 데이터

설정 화면 보기 데이터

사용

원격 참가자 보기 사용자 지정

사용

로컬 참가자 보기 데이터 삽입

로컬 옵션

로컬 참가자 보기 데이터

설정 화면 보기 데이터

사용

원격 참가자 보기 데이터 삽입

사용

다음 단계

피드백

추가 리소스