Web Sender 앱에 Cast SDK 통합

이 개발자 가이드에서는 웹에 Google Cast 지원을 추가하는 방법을 설명합니다. Cast SDK를 사용하는 발신기 앱

용어

휴대기기 또는 브라우저가 재생을 제어하는 발신자입니다. Google Cast 기기는 수신기이며, 이 수신기는 지정할 수 있습니다.

Web Sender SDK는 두 부분, 즉 Framework API로 구성됩니다. (cast.framework) Base API는 (chrome.cast) 일반적으로 더 단순한 상위 수준의 Framework API에서 호출합니다. 하위 수준 Base API에서 처리합니다.

발신자 프레임워크는 Framework API, 모듈 및 이와 관련된 하위 수준 기능에 대한 래퍼를 제공하는 리소스입니다. 이 발신자 앱 또는 Google Cast Chrome 앱은 웹 (HTML/JavaScript) 앱을 말합니다. 전송 장치의 Chrome 브라우저 내에서 실행되어야 합니다. 웹 수신기 앱은 Chromecast 또는 Google Cast 기기에서 실행되는 HTML/자바스크립트 앱으로 복사하기만 하면 됩니다.

발신자 프레임워크는 비동기 콜백 설계를 사용하여 발신자에게 알립니다. 이벤트 앱 및 Cast 앱 수명 주기의 다양한 상태 간 전환 있습니다.

라이브러리 로드

앱에서 Google Cast의 기능을 구현하려면 다음을 알아야 합니다. 위치를 지정할 수 있습니다. Web Sender Framework API를 로드하기 위한 loadCastFramework URL 쿼리 매개변수 확인할 수 있습니다 앱의 모든 페이지에서 다음과 같이 라이브러리를 참조해야 합니다.

<script src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1"></script>

프레임워크

Web Sender SDK는 cast.framework.*를 사용합니다. 네임스페이스입니다. 네임스페이스는 다음을 나타냅니다.

  • API에서 작업을 호출하는 메서드 또는 함수
  • API의 리스너 함수에 대한 이벤트 리스너

프레임워크는 다음과 같은 주요 구성요소로 구성됩니다.

  • CastContext 인코더-디코더에 대한 정보를 제공하는 현재 전송 상태와 전송 상태와 전송 세션의 이벤트를 트리거합니다. 상태를 변경할 수 있습니다
  • CastSession 객체가 세션을 관리하며 상태를 제공함 기기 볼륨 변경, 이벤트 관리, 음소거 상태, 앱 메타데이터가 포함됩니다.
  • 전송 버튼 요소. 전송 버튼 요소는 는 HTML 버튼을 확장합니다. 제공된 전송 버튼으로 충분하지 않다면 전송 상태를 사용하여 전송 버튼을 구현할 수 있습니다.
  • RemotePlayerController 는 원격 플레이어의 구현을 단순화하기 위해 데이터 결합을 제공합니다.

검토: Google Cast Web Sender API 참조: 네임스페이스에 대한 전체 설명입니다.

전송 버튼

앱의 전송 버튼 구성요소는 전적으로 프레임워크에 의해 처리됩니다. 이 여기에는 공개 상태 관리 및 클릭 이벤트 처리가 포함되어 있습니다.

<google-cast-launcher></google-cast-launcher>

또는 프로그래매틱 방식으로 버튼을 만들 수 있습니다.

document.createElement("google-cast-launcher");

크기나 위치와 같은 추가적인 스타일을 요소를 추가합니다. --connected-color 속성을 사용하여 다음 작업을 할 수 있습니다. 연결된 웹 수신기 상태의 색상을 선택합니다. --disconnected-color: 연결 끊김 상태의 경우

초기화

프레임워크 API를 로드한 후 앱이 핸들러를 호출합니다. window.__onGCastApiAvailable 앱이 이 핸들러를 설정하는지 확인해야 합니다. 발신자 라이브러리를 로드하기 전에 window에서 설정하세요.

이 핸들러 내에서 다음을 호출하여 Cast 상호작용을 초기화합니다. setOptions(options) 드림 메서드 CastContext

예를 들면 다음과 같습니다.

<script>
window['__onGCastApiAvailable'] = function(isAvailable) {
  if (isAvailable) {
    initializeCastApi();
  }
};
</script>

그런 다음, 다음과 같이 API를 초기화합니다.

initializeCastApi = function() {
  cast.framework.CastContext.getInstance().setOptions({
    receiverApplicationId: applicationId,
    autoJoinPolicy: chrome.cast.AutoJoinPolicy.ORIGIN_SCOPED
  });
};

먼저 앱은 CastContext 객체 API에 액세스할 수 있습니다 그런 다음 setOptions(options) 드림 다음을 사용하여 CastOptions 객체 applicationID를 설정합니다.

등록이 필요 없는 기본 미디어 수신기를 사용 중인 경우 아래와 같이 Web Sender SDK가 미리 정의한 상수를 applicationID:

cast.framework.CastContext.getInstance().setOptions({
  receiverApplicationId: chrome.cast.media.DEFAULT_MEDIA_RECEIVER_APP_ID
});

미디어 제어

CastContext 초기화되면 앱이 현재 CastSession 언제든지 사용 시간 getCurrentSession():

var castSession = cast.framework.CastContext.getInstance().getCurrentSession();

CastSession는 다음을 사용하여 연결된 Cast 기기에 미디어를 로드하는 데 사용할 수 있습니다. loadMedia(loadRequest) 먼저, MediaInfo님, contentId, contentType 및 기타 정보 사용 표시됩니다. 그런 다음 LoadRequest 드림 요청과 관련된 모든 정보를 설정합니다. 마지막으로 CastSession에서 loadMedia(loadRequest)를 호출합니다.

var mediaInfo = new chrome.cast.media.MediaInfo(currentMediaURL, contentType);
var request = new chrome.cast.media.LoadRequest(mediaInfo);
castSession.loadMedia(request).then(
  function() { console.log('Load succeed'); },
  function(errorCode) { console.log('Error code: ' + errorCode); });

loadMedia 메서드는 Promise 성공적인 결과를 위해 필요한 작업을 수행하는 데 사용할 수 있습니다. 프로미스가 거부되면 함수 인수는 chrome.cast.ErrorCode

다음 위치에서 플레이어 상태 변수에 액세스할 수 있습니다. RemotePlayer 미디어 이벤트 콜백과 RemotePlayer 명령어는 RemotePlayerController

var player = new cast.framework.RemotePlayer();
var playerController = new cast.framework.RemotePlayerController(player);

RemotePlayerController는 앱에 다음과 같은 전체 미디어 제어 권한을 부여합니다. 로드된 미디어의 재생, 일시중지, 중지, 찾기

  • 재생/일시중지: playerController.playOrPause();
  • 중지: playerController.stop();
  • 탐색: playerController.seek();

RemotePlayer 및 RemotePlayerController는 다음과 같을 수 있습니다. Polymer 또는 Angular와 같은 데이터 결합 프레임워크와 함께 사용하여 원격 플레이어입니다.

다음은 Angular의 코드 스니펫입니다.

<button id="playPauseButton" class="playerButton"
  ng-disabled="!player.canPause"
  ng-click="controller.playOrPause()">
    {{player.isPaused ? 'Play' : 'Pause'}}
</button>
<script>
var player = new cast.framework.RemotePlayer();
var controller = new cast.framework.RemotePlayerController(player);
// Listen to any player update, and trigger angular data binding
update.controller.addEventListener(
  cast.framework.RemotePlayerEventType.ANY_CHANGE,
  function(event) {
    if (!$scope.$$phase) $scope.$apply();
  });
</script>

미디어 상태

미디어 재생 중에 다양한 이벤트가 발생합니다. 이러한 이벤트는 다양한 리스너의 cast.framework.RemotePlayerEventType 드림 의 이벤트 RemotePlayerController 객체.

미디어 상태 정보를 가져오려면 .MEDIA_INFO_CHANGED(cast.framework.RemotePlayerEventType) 이벤트를 사용하여 재생 변경 시 트리거되고 CastSession.getMediaSession().media 있습니다.

playerController.addEventListener(
  cast.framework.RemotePlayerEventType.MEDIA_INFO_CHANGED, function() {
    // Use the current session to get an up to date media status.
    let session = cast.framework.CastContext.getInstance().getCurrentSession();

    if (!session) {
        return;
    }

    // Contains information about the playing media including currentTime.
    let mediaStatus = session.getMediaSession();
    if (!mediaStatus) {
        return;
    }

    // mediaStatus also contains the mediaInfo containing metadata and other
    // information about the in progress content.
    let mediaInfo = mediaStatus.media;
  });

일시중지, 재생, 다시 시작, 탐색과 같은 이벤트가 발생하면 앱이 작동해야 합니다. 기기 및 Cast의 웹 수신기 앱 간에 동기화됩니다. 있습니다. 상태 업데이트를 참고하세요. 를 참조하세요.

세션 관리 작동 방식

Cast SDK는 Cast 세션이라는 개념을 도입하여 기기 연결, 웹 실행 (또는 참여) 단계를 결합한 설정입니다. 수신기 앱, 해당 앱에 연결, 미디어 제어 채널 초기화. Web Receiver 보기 애플리케이션 수명 주기 가이드 를 참조하세요.

세션은 수업에서 관리합니다. CastContext님, 앱에서 이 API를 통해 cast.framework.CastContext.getInstance() 개별 세션은 클래스의 서브클래스로 표현됨 Session 예를 들어 CastSession 드림 Cast 기기의 세션을 나타냅니다. 앱에서 현재 활성 상태인 다음을 통한 전송 세션: CastContext.getCurrentSession()

세션 상태를 모니터링하려면 CastContext: CastContextEventType.SESSION_STATE_CHANGED 이벤트 유형입니다.

var context = cast.framework.CastContext.getInstance();
context.addEventListener(
  cast.framework.CastContextEventType.SESSION_STATE_CHANGED,
  function(event) {
    switch (event.sessionState) {
      case cast.framework.SessionState.SESSION_STARTED:
      case cast.framework.SessionState.SESSION_RESUMED:
        break;
      case cast.framework.SessionState.SESSION_ENDED:
        console.log('CastContext: CastSession disconnected');
        // Update locally as necessary
        break;
    }
  })

연결이 끊긴 경우(예: 사용자가 '전송 중지'를 클릭하는 경우) 버튼 대화상자에 추가해서 .IS_CONNECTED_CHANGED(RemotePlayerEventType) 이벤트 유형을 지정해야 합니다. 리스너에서 RemotePlayer: 연결이 끊어졌습니다. 이 경우 필요에 따라 로컬 플레이어 상태를 업데이트합니다. 예를 들면 다음과 같습니다.

playerController.addEventListener(
  cast.framework.RemotePlayerEventType.IS_CONNECTED_CHANGED, function() {
    if (!player.isConnected) {
      console.log('RemotePlayerController: Player disconnected');
      // Update local player to disconnected state
    }
  });

사용자가 프레임워크 Cast를 통해 Cast 종료를 직접 제어할 수 있음 전송 버튼을 누르면 발신자 자체에서 현재 수신자를 사용하여 전송을 중지할 수 CastSession 드림 객체를 지정합니다.

function stopCasting() {
  var castSession = cast.framework.CastContext.getInstance().getCurrentSession();
  // End the session and pass 'true' to indicate
  // that Web Receiver app should be stopped.
  castSession.endSession(true);
}

스트림 이전

스트림 전송의 기본은 세션 상태 보존입니다. 사용자는 음성 명령, Google Home을 사용하여 기존 오디오 및 동영상 스트림을 여러 기기로 옮길 수 있습니다. 앱 또는 스마트 디스플레이입니다. 미디어는 한 기기 (소스)에서 재생이 중지되고 다른 기기 (소스)에서 계속 재생됩니다. 대상)입니다. 최신 펌웨어가 설치된 모든 Cast 기기는 스트림 이전

스트림을 전송하는 동안 새 대상 기기를 가져오려면 다음을 호출합니다. CastSession#getCastDevice() 드림 가 cast.framework.SessionState.SESSION_RESUMED 이벤트가 호출됩니다.

자세한 내용은 웹 수신기에서 스트림 전송 를 참조하세요.

이전
설정
다음
고급 기능 추가