보조 이미지

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

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

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

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

오디오

개요

오디오 콘텐츠의 보조 이미지는 로드된 콘텐츠의 메타데이터에 의해 구동됩니다. 미디어 항목이 로드되면 메타데이터의 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;
    });

재생 중에 보조 이미지를 업데이트하려면 애플리케이션에서 PlayerManager를 사용하여 getMediaInformation를 호출하여 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이라는 2개의 매개변수를 사용합니다. 보조 이미지 설정은 언제든지 실행할 수 있지만 사용자가 오버레이를 포그라운드로 트리거한 경우에만 표시됩니다.

/**
 * 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);

다음 단계

이것으로 Web Receiver에 추가할 수 있는 기능을 완료했습니다. 이제 iOS, Android 또는 웹에서 발신기 앱을 빌드할 수 있습니다.

이전
게시됨
다음
Cast 디버그 로거