Web Receiver로 이전

이 가이드에서는 Cast 수신기 v2 앱을 최신 웹으로 이전하는 방법을 설명합니다. 수신기 앱

웹 수신기 v3로도 알려진 새로운 CAF (Cast Application Framework) SDK는 수신기 v2 SDK의 주요 업그레이드입니다. 웹 수신기 SDK는 미디어 웹 수신기 애플리케이션 개발을 위한 쉽고 간소화된 SDK입니다.

웹 수신기가 새 CAF 발신자와 더 일관된 API 제공 API에 액세스할 수 있습니다 플레이어 (MPL 및 Shaka)의 완전한 통합과 Cast 미디어 및 Google 어시스턴트 구현 및 지원 음성 명령입니다. CAF SDK는 스타일을 쉽게 지정할 수 있는 기본 UI도 제공합니다. UI 구현을 간소화하는 데이터 결합 서비스 사용

마이그레이션이 필요한 이유

Receiver v2 애플리케이션을 Web Receiver로 이전하면 제거될 수 있으므로, 문제를 해결하는 데 집중할 수 있도록 애플리케이션별 비즈니스 로직에 더 집중할 수 있습니다

CAF는 MPL 및 Shaka 플레이어를 원활하게 통합하여 HTTP 라이브 스트리밍 (TS 및 CMAF), MPEG-DASH, Smooth 등 미디어 요소 소스 속성 (MP3, MP4, Icecast 등). 전체 목록은 Google Cast에 지원되는 미디어를 참고하세요. 현재 CAF는 사용자 제공 플레이어를 지원하지 않습니다.

CAF로 이전하면 Google 어시스턴트를 통한 음성 제어 지원이 추가됩니다. 새로운 Google 어시스턴트 음성 명령은 확인할 수 있습니다

'언어별 트랙 변경'과 같은 새로운 미디어 명령어 지원 추가 '재생 속도 변경' 기능을 제공합니다. CAF에서는 기본 제공 광고 기능도 실시간 지원이 제공됩니다

무엇이 달라졌나요?

Web Receiver API는 CAF 발신자: Android 및 iOS, v2와 상당히 다릅니다.

웹 수신기가 새 네임스페이스를 사용 중입니다. cast.framework 드림 cast.receiver 네임스페이스 대신 사용합니다. 다수 v2에서 사용된 데이터 객체는 CAF에서 동일하고 cast.framework.messages 드림 네임스페이스 (대부분 cast.receiver.media 미만)

다음 v2 서비스는 상응하는 CAF 서비스로 대체됩니다.

  • CastReceiverManager 클래스가 다음으로 대체됨: CastReceiverContext 이 싱글톤은 캐스트 세션, 발신자, 커스텀 메시지 전송을 관리하고 메시지, 전역 시스템 이벤트를 지원합니다 이 CastReceiverOptions 드림 전역 애플리케이션 옵션을 제공하는 데 사용할 수 있습니다 (예: 대기열, 수신자 등). 버전, 재생 구성 등)을 컨텍스트에 추가합니다.
  • MediaManager 클래스가 다음으로 대체됨: PlayerManager 이는 CastReceiverContext 싱글톤이며 미디어 세션, 미디어 요청, Google 어시스턴트 음성 요청 (v2의 CommandAndControlManager), 미디어 이벤트를 시작합니다. 플레이어 구성 (MPL의 cast.player.api.Host) 제공: PlaybackConfig, 전역적으로 또는 로드 요청별로 제공될 수 있습니다.

PlayerManager는 새 하위 관리자 클래스도 노출합니다.

const context = cast.framework.CastReceiverContext.getInstance();
const playerManager = context.getPlayerManager();

// Set global options.
const options = new cast.framework.CastReceiverOptions();
options.versionCode = DEVELOPERS_APP_VERSION;

context.start(options);

수신기 비즈니스 로직

수신기 v2 노출 이벤트 핸들러 (예: CastReceiverManager.onReady 또는 MediaManager.onLoad)를 사용하여 비즈니스 로직을 추가합니다. CAF에서 이벤트 핸들러는 이벤트 리스너로 대체됨 (CastReceiverContext.addEventListener) 메시지 인터셉터가 있습니다. (PlayerManager.setMessageInterceptor) Web Receiver는 하나의 이벤트에 대해 여러 개의 이벤트 리스너를 가질 수 있습니다 (리스너는 이벤트에 영향을 미치지 않음) 그리고 메시지당 하나의 인터셉터가 있습니다. 인터셉터 요청을 업데이트하거나 처리할 수 있습니다 (수정된 요청을 반환하거나 메시지 또는 오류 메시지) 프라미스를 반환하는 비동기 핸들러일 수 있습니다.

로드 요청 인터셉터는 애플리케이션별 로직을 사용할 수 있습니다. 발신자의 로드 요청의 경우 인터셉터는 콘텐츠 ID를 콘텐츠 URL로 변환할 수 있습니다. 로드 인터셉터는 명시적 인터셉터가 없는 경우 미리 로드 및 사전 캐시 요청에 대해서도 호출됩니다. 사전 로드 또는 사전 캐시에 제공되었습니다

playerManager.setMessageInterceptor(
    cast.framework.messages.MessageType.LOAD,
    request => {
      // Resolve entity to content id
      if (request.media.entity && !request.media.contentId) {
        return getMediaByEntity(request.media.entity).then(
            media => {
              request.media.contentId = media.url;
              return request;
            });
      }
      return request;
    });

v2 맞춤설정된 미디어 상태 핸들러도 메시지로 대체됩니다. 미디어 상태 메시지의 인터셉터입니다. Google 네트워크 내 연결을 원하지 않는 웹 수신기 미디어 상태에 미디어 URL을 노출하여 URL 리졸버를 제공할 수 있고 (PlayerManager.setMediaUrlResolver), - 로드 요청을 위한 미디어 URL을 제공합니다. CAF에서 사용하는 URL 내부적으로 제공되며 미디어 상태에는 제공되지 않습니다.

playerManager.setMessageInterceptor(
    cast.framework.messages.MessageType.MEDIA_STATUS,
    status => {
      // Disable seek.
      status.supportedMediaCommands &=
          ~cast.framework.messages.Command.SEEK
      return status;
    });

이벤트

Web Receiver는 웹 서버와 함께 CastReceiverContext 드림 및 PlayerManager 웹 수신기 앱은 이벤트에 대해 여러 리스너가 있을 수 있습니다. 여러 이벤트에 하나의 리스너를 제공할 수도 있습니다. (자세한 내용은 cast.framework.events.category 드림 경우에 따라 다릅니다.)

이벤트는 사용자 요청, 재생 진행률, 플레이어 처리 및 하위 수준 미디어 요소 이벤트 (CAF는 미디어 요소 자체를 노출하지 않음)

웹 수신기 앱은 작업할 이벤트 리스너를 추가할 수 있습니다 (예: 텍스트 추가 로드 완료 시 정의를 추적) 또는 분석을 위해 사용할 수 있습니다.

// Log all media commands
playerManager.addEventListener(
    cast.framework.events.category.REQUEST,
    event => logEvent(event.type));

맞춤 메시지 버스

CAF는 API에서 메시지 버스를 노출하지 않고 대신 CastReceiverContext.addCustomMessageListener 드림 를 사용하여 특정 네임스페이스 (네임스페이스당 하나만)에 대한 메시지 리스너를 추가할 수 있습니다. CastReceiverContext.sendCustomMessage 네임스페이스에서 메시지를 보낼 수 있습니다 모든 네임스페이스가 선언되기 전에 웹 수신기 시작 (즉, CastReceiverContext.start)을 입력합니다. 네임스페이스는 리스너에 메시지 리스너를 추가하거나 CastReceiverOptions.customNamespaces

const options = new cast.framework.CastReceiverOptions();
options.customNamespaces = {
    CUSTOM_NS: cast.framework.system.MessageType.JSON
};
context.start(options);

context.sendCustomMessage(CUSTOM_NS, {
  type: 'status'
  message: 'Playing'
});

기본 UI

CAF는 재생 진행률 표시줄을 표시하고 기본 웹 수신기 UI를 제공합니다. 미디어 메타데이터를 생성할 수 있습니다 기본 UI는 맞춤 요소로 제공됩니다. (<cast-media-player>개) CSS와 같은 스타일로 스타일을 지정할 수 있습니다

<style>
   cast-media-player { --splash-image: url("splash.png"); }
</style>
<cast-media-player></cast-media-player>

추가 맞춤설정을 위해 웹 수신기 앱에서 자체 UI를 구현할 수 있습니다. 이 웹 수신기는 cast.framework.ui.PlayerDataBinder 드림 클래스를 사용하여 UI 객체를 웹 수신기 재생 상태에 바인딩하는 데 도움을 줍니다.