이 페이지는 Cloud Translation API를 통해 번역되었습니다.

보조 이미지

캐스트 개발자는 오디오 및 동영상 애플리케이션용 UI에 정보 (보조) 이미지를 추가할 수 있습니다. 지원되는 이미지 형식의 호환성을 확인하세요.

보조 이미지는 디스플레이 오른쪽 상단에 표시되며 콘텐츠 형식, 라디오 채널 호출 기호, TV 프로그램 등급과 같이 현재 재생 중인 콘텐츠에 관한 추가 정보가 포함된 그래픽을 표시하는 데 사용할 수 있습니다. 보조 이미지는 현재 콘텐츠에 기능이 사용 설정되어 있고 플레이어가 유휴 상태가 아닌 이상 화면에 계속 표시됩니다.

표 1은 관련 기기 유형 및 컨트롤에서 이 기능이 사용 설정된 경우의 사용자 환경을 보여줍니다. 구현과 통합의 세부정보는 오디오 앱과 동영상 앱 간에 약간 다릅니다. Web Receiver 앱에 이 기능을 통합하는 방법은 아래 섹션을 참고하세요.

*표 1: 콘텐츠 및 기기 유형별 보조 이미지 UI*
기기 유형	오디오 콘텐츠	동영상 콘텐츠
Chromecast
Chromecast with Google TV
스마트 디스플레이
스마트 디스플레이 리모컨		참고: 동영상 콘텐츠의 리모컨에서는 보조 이미지가 지원되지 않습니다.

오디오

개요

오디오 콘텐츠의 보조 이미지는 로드된 콘텐츠의 메타데이터에 의해 구동됩니다. 미디어 항목이 로드되면 메타데이터의 모든 secondaryImage 속성 변경사항이 UI에 반영됩니다.

스마트 디스플레이를 오디오 리모컨으로 사용하는 경우 보조 이미지가 설정되었을 때 스마트 디스플레이 UI에도 표시됩니다.

구현

보조 이미지를 설정, 삭제 또는 업데이트하려면 MusicTrackMediaMetadata의 secondaryImage 속성을 수정해야 합니다. 이 속성은 보조 이미지가 호스팅되는 위치를 설명하는 URL로 채워진 Image 객체를 사용합니다.

아래 샘플에서 보조 이미지는 load 인터셉터에 설정되어 있습니다. 플레이어가 콘텐츠 로드를 완료하면 보조 이미지가 표시됩니다.

const context = cast.framework.CastReceiverContext.getInstance();
const playerManager = context.getPlayerManager();
playerManager.setMessageInterceptor(
    cast.framework.messages.MessageType.LOAD, loadRequestData => {
      loadRequestData.media.metadata =
          new cast.framework.messages.MusicTrackMediaMetadata();

      // Set image on secondaryImage field of metadata object
      loadRequestData.media.metadata.secondaryImage =
          new cast.framework.messages.Image('https://www.image.png');

      return loadRequestData;
    });

재생 중에 보조 이미지를 업데이트하려면 애플리케이션이 getMediaInformation를 호출하여 PlayerManager를 사용하여 MediaInformation를 얻어야 합니다. 그런 다음 애플리케이션은 secondaryImage 속성을 원하는 값으로 업데이트하여 metadata를 수정해야 합니다. 마지막으로 새로운 정보로 setMediaInformation를 호출하면 UI가 업데이트됩니다. 이 메서드는 재생 중에 제공되는 EMSG 또는 ID3 이벤트와 같은 업데이트를 통해 제공되는 메타데이터의 변경사항을 처리하는 데 사용할 수 있습니다.

const context = cast.framework.CastReceiverContext.getInstance();
const playerManager = context.getPlayerManager();
playerManager.addEventListener(cast.framework.events.EventType.EMSG, () => {
  let mediaInformation = playerManager.getMediaInformation();
  mediaInformation.metadata.secondaryImage =
      new cast.framework.messages.Image('http://anotherimage.png');
  playerManager.setMediaInformation(mediaInformation);
});

보조 이미지를 설정 해제하려면 메타데이터 객체에서 secondaryImage 속성을 null로 설정합니다.

// To unset the secondary image, set secondaryImage to null.
let mediaInformation = playerManager.getMediaInformation();
mediaInformation.metadata.secondaryImage = null;
playerManager.setMediaInformation(mediaInformation);

동영상

개요

동영상 콘텐츠의 경우 UiManager를 사용하여 보조 이미지를 설정하고 삭제합니다. 보조 이미지는 동영상 컨트롤 오버레이와 함께 표시됩니다.

구현

보조 이미지를 설정하려면 애플리케이션이 UiManager 인스턴스를 가져오고 setSecondaryImage를 호출해야 합니다. 두 매개변수(SecondaryImagePosition 및 이미지 URL)를 사용합니다. 보조 이미지 설정은 언제든지 수행할 수 있지만 사용자가 오버레이를 포그라운드로 트리거할 때만 표시됩니다.

/**
 * Sets the image url for the secondary image overlay. Replaces any image that
 * was previously set.
 */
castUiManager.setSecondaryImage(
    cast.framework.ui.SecondaryImagePosition.TOP_RIGHT_VIDEO_OVERLAY,
    'http://www.image.png');

이미지 URL을 null 또는 빈 문자열로 설정하면 보조 이미지를 삭제할 수 있습니다.

// To  clear out the image, set the url to null or an empty string.
const castUiManager = cast.framework.ui.UiManager.getInstance();
castUiManager.setSecondaryImage(
    cast.framework.ui.SecondaryImagePosition.TOP_RIGHT_VIDEO_OVERLAY, null);

다음 단계

이로써 웹 수신기에 추가할 수 있는 기능이 완성되었습니다. 이제 iOS, Android 또는 웹에서 발신자 앱을 빌드할 수 있습니다.

게시됨

Cast 디버그 로거