이 개발자 가이드에서는 웹에 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
메서드는
프라미스
성공적인 결과를 위해 필요한 작업을 수행하는 데 사용할 수 있습니다.
프로미스가 거부되면 함수 인수는
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
이벤트가 호출됩니다.
자세한 내용은 웹 수신기에서 스트림 전송 를 참조하세요.