1. 개요
이 Codelab에서는 Cast Live Breaks API를 사용하는 맞춤 웹 수신기 앱을 빌드하는 방법을 알아봅니다.
Google Cast란 무엇인가요?
사용자는 Google Cast를 사용하여 휴대기기의 콘텐츠를 TV로 전송할 수 있습니다. 그런 다음, 휴대기기를 리모컨으로 사용해 TV에서 재생 중인 미디어를 제어할 수 있습니다.
Google Cast SDK를 사용하면 앱을 확장하여 TV 또는 사운드 시스템을 제어할 수 있습니다. Cast SDK를 사용하면 Google Cast 디자인 체크리스트에 따라 필요한 UI 구성요소를 추가할 수 있습니다.
Google Cast 디자인 체크리스트는 지원되는 모든 플랫폼에서 Cast 사용자 환경을 간단하고 예측 가능하게 만들기 위해 제공됩니다.
무엇을 빌드하게 되나요?
이 Codelab을 완료하면 새로운 실시간 기능을 활용하는 Cast 수신기가 빌드됩니다.
학습할 내용
- Cast에서 실시간 동영상 콘텐츠를 처리하는 방법
- Cast에서 지원하는 다양한 실시간 스트리밍 시나리오를 구성하는 방법입니다.
- 실시간 스트림에 프로그램 데이터를 추가하는 방법
필요한 항목
- 최신 Chrome 브라우저
- Firebase 호스팅 또는 ngrok와 같은 HTTPS 호스팅 서비스
- 인터넷에 액세스할 수 있도록 설정된 Chromecast 또는 Android TV와 같은 Google Cast 기기
- HDMI 입력이 지원되는 TV나 모니터 또는 Google Home Hub
환경
- 웹 개발에 관한 사전지식이 있어야 합니다.
- Cast 전송기 및 수신기 애플리케이션을 빌드한 이전 경험
본 가이드를 어떻게 사용하실 계획인가요?
웹 앱 빌드 경험을 평가해 주세요.
2. 샘플 코드 가져오기
모든 샘플 코드를 컴퓨터에 다운로드할 수 있습니다.
그런 다음 다운로드한 ZIP 파일의 압축을 풉니다.
3. 로컬에서 수신기 배포
Cast 기기에서 웹 수신기를 사용하려면 Cast 기기가 연결할 수 있는 위치에서 호스팅되어야 합니다. https를 지원하는 서버가 이미 있는 경우 다음 안내를 건너뛰고 URL을 기록해 두세요. 다음 섹션에서 필요합니다.
사용할 수 있는 서버가 없다면 Firebase 호스팅 또는 ngrok를 사용할 수 있습니다.
서버 실행
원하는 서비스를 설정한 후 app-start로 이동하여 서버를 시작합니다.
호스팅된 수신자의 URL을 기록해 둡니다. 다음 섹션에서 사용합니다.
4. Cast 개발자 콘솔에 애플리케이션 등록
이 Codelab에 내장된 맞춤 수신기를 Chromecast 기기에서 실행하려면 애플리케이션을 등록해야 합니다. 애플리케이션을 등록하면 발신기 애플리케이션이 API 호출(예: 수신기 애플리케이션 실행)을 수행하는 데 사용해야 하는 애플리케이션 ID를 받게 됩니다.
'새 애플리케이션 추가'를 클릭합니다.
!['Custom Receiver' 옵션이 강조표시된 'New Receiver Application' [새 수신기 애플리케이션] 화면 이미지](https://developers.google.com/static/cast/codelabs/cast-live-receiver/img/e8c19e57b85c7d.png?authuser=0&hl=ko)
'Custom Receiver'를 선택합니다. 이는 우리가 만드는 화면입니다.
새 수신자의 세부정보를 입력합니다. 마지막으로 사용한 URL을 사용해야 합니다.
마지막 섹션에서 살펴보겠습니다 새 수신기에 할당된 애플리케이션 ID를 기록해 둡니다.
게시하기 전에 수신기 애플리케이션에 액세스할 수 있도록 Google Cast 기기를 등록해야 합니다. 수신기 애플리케이션을 게시하면 모든 Google Cast 기기에서 사용할 수 있습니다. 이 Codelab에서는 게시되지 않은 수신기 애플리케이션으로 작업하는 것이 좋습니다.
'새 기기 추가'를 클릭합니다.
Cast 기기 뒷면에 인쇄된 일련번호를 입력하고 구체적인 이름을 지정합니다. Google Cast SDK 개발자 콘솔에 액세스할 때 Chrome에서 화면을 전송하여 일련번호를 확인할 수도 있습니다.
수신기와 기기를 테스트할 준비가 되려면 5~15분 정도 걸립니다. 5~15분 후에 Cast 기기를 재부팅해야 합니다.
5. 간단한 실시간 스트림 전송
이 Codelab을 시작하기 전에 새 라이브 기능에 대한 개요를 제공하는 라이브 개발자 가이드를 검토하는 것이 좋습니다.
발신자의 경우 CAF 수신기 디버깅도 사용하여 전송 세션을 시작합니다. 수신기는 실시간 스트림 재생을 자동으로 시작하도록 설계되었습니다.
수신자는 두 개의 파일로 구성됩니다. Cast 컨텍스트를 초기화하는 receiver.html라는 기본 html 파일과 Cast 미디어 플레이어의 자리표시자입니다. 이 파일은 수정할 필요가 없습니다. 수신기라는 모든 로직이 포함된 receiver.js 파일도 있습니다.
시작하려면 Chrome에서 웹 발신자를 엽니다. Cast SDK 개발자 콘솔에서 제공된 수신자 애플리케이션 ID를 입력하고'설정'을 클릭합니다.
수신기에서 Cast 애플리케이션 프레임워크 (CAF)에 스트림이 실시간 진행 중임을 알리는 로직을 추가해야 합니다. 코드 한 줄만 있으면 됩니다. receiver.js의 부하 인터셉터에 다음 코드 줄을 추가합니다.
request.media.streamType = cast.framework.messages.StreamType.LIVE;
스트림 유형을 LIVE로 설정하면 CAF의 실시간 UI가 사용 설정됩니다. 이 시나리오에서는 스트림이 조인되면 CAF가 자동으로 스트림의 실시간 가장자리로 이동합니다. 아직 프로그램 가이드 데이터가 설정되지 않았으므로 스크러빙 막대는 스트림의 탐색 가능한 전체 길이를 나타냅니다.
receiver.js에 변경사항을 저장하고 페이지의 아무 곳이나 마우스 오른쪽 버튼으로 클릭한 다음 '전송'을 선택하여 웹 발신자의 전송 세션을 시작하세요. 실시간 스트림이 즉시 재생되기 시작합니다.
6. 프로그램 가이드 데이터 추가
실시간 콘텐츠에 대한 CAF의 새로운 지원 기능이 이제 수신기 및 발신자 애플리케이션에서 화면에 프로그램 가이드 데이터를 표시할 수 있습니다. 콘텐츠 제공업체는 특히 TV 채널과 같이 오래 실행되는 실시간 스트림의 경우 더 나은 최종 사용자 경험을 위해 수신기 애플리케이션에 프로그래밍 메타데이터를 포함하는 것이 좋습니다.
이제 단일 스트림에서 여러 프로그램의 메타데이터를 CAF에 제공할 수 있습니다. MediaMetadata 객체에 시작 타임스탬프와 지속 시간을 설정하면 수신자가 스트림에 있는 플레이어의 현재 위치를 기반으로 발신자와 수신자에게 표시되는 메타데이터를 자동으로 업데이트합니다.
// A sample metadata object for a single tv show
const currentShow = new cast.framework.messages.TvShowMediaMetadata();
currentShow.episode = 15;
currentShow.seriesTitle = 'The Odyssey';
currentShow.title = 'Scylla and Charybdis';
currentShow.sectionStartAbsoluteTime = toUnixTimestamp('9:00 PM');
currentShow.sectionDuration = HOUR_IN_SECONDS;
이 Codelab에서는 샘플 메타데이터 서비스를 사용하여 실시간 스트림의 메타데이터를 제공합니다. 프로그램 메타데이터의 목록을 만들려면 먼저 컨테이너를 만들어야 합니다. 컨테이너에는 단일 미디어 스트림의 MediaMetadata 객체 목록이 있습니다. 각 MediaMetadata 객체는 컨테이너의 단일 섹션을 나타냅니다. 플레이헤드가 지정된 섹션의 경계 내에 있으면 메타데이터는 자동으로 미디어 상태에 복사됩니다. receiver.js 파일에 다음 코드를 추가하여 서비스에서 샘플 메타데이터를 다운로드하고 컨테이너를 CAF에 제공합니다.
/**
* Gets the current program guide data from our Google Cloud Function
* @return {cast.framework.messages.MediaMetadata[]} Latest program guide data
*/
function loadGuideData() {
return fetch(LIVE_MEDIA_METADATA_SERVICE_URI)
.then((response) => response.json())
.then(function(data) {
const containerMetadata =
new cast.framework.messages.ContainerMetadata();
containerMetadata.sections = data;
playerManager.getQueueManager().setContainerMetadata(containerMetadata);
});
}
또한 부하 인터셉터에서 가이드 데이터를 로드하는 함수를 추가합니다.
loadGuideData();
receiver.js 파일을 저장하고 Cast 세션을 시작합니다. 프로그램 시작 시간, 종료 시간 및 제목이 모두 화면에 표시됩니다.
플레이헤드가 컨테이너의 새 섹션으로 전환되면 수신기에서 모든 발신기로 새 미디어 상태 메시지가 전송됩니다. 따라서 항상 최신 프로그램 정보를 얻을 수 있도록 미디어 상태 인터셉터에서 컨테이너 메타데이터를 업데이트하는 것이 좋습니다. 샘플 서비스에서는 현재 프로그램 메타데이터와 다음 두 프로그램의 메타데이터를 반환합니다. 스트림의 메타데이터를 업데이트하려면 새 컨테이너를 만들고 위의 예시와 같이 setContainerMetadata를 호출하면 됩니다.
7. 탐색 사용 중지
대부분의 동영상 스트림은 다양한 동영상 프레임을 보유하는 세그먼트로 구성됩니다. 달리 명시되지 않는 한 CAF를 사용하면 사용자가 이 세그먼트 내에서 탐색할 수 있습니다. 탐색을 사용 중지하려면 수신기에 코드 스니펫 두 개를 추가해야 합니다.
부하 인터셉터에서 SEEK 지원 미디어 명령어를 삭제합니다. 이렇게 하면 모든 모바일 발신자 및 터치 인터페이스에서 탐색이 사용 중지됩니다.
playerManager.removeSupportedMediaCommands(cast.framework.messages.Command.SEEK, true);
다음으로 'Ok Google, 60초 뒤로 건너뛰기'와 같이 시청자가 스트림을 건너뛰지 못하도록 음성 명령을 사용 중지해야 합니다. 음성 검색을 사용 중지하기 위해 탐색 가로채기를 추가합니다. 이 인터셉터는 탐색 요청이 이루어질 때마다 호출됩니다. SEEK에서 지원되는 미디어 명령어가 사용 중지되면 인터셉터에서 탐색 요청을 거부합니다. 다음 코드 스니펫을 receiver.js 파일에 추가합니다.
/**
* Seek a seek interceptor is called whenever CAF receives a request to seek to
* a different location in media. This interceptor can be used to modify that
* seek request or disable seeking completely.
* @param {cast.framework.messages.MessageType.SEEK} The message to intercept.
*/
playerManager.setMessageInterceptor(
cast.framework.messages.MessageType.SEEK,
(seekData) => {
// if the SEEK supported media command is disabled, block seeking
if (!(playerManager.getSupportedMediaCommands() &
cast.framework.messages.Command.SEEK)) {
castDebugLogger.info(TAG, 'Seek blocked.');
return null;
}
return seekData;
}
);
receiver.js 파일을 저장하고 Cast 세션을 시작합니다. 더 이상 실시간 스트림 내에서 탐색할 수 없습니다.
8. 축하합니다
지금까지 최신 Cast 수신기 SDK를 사용하여 맞춤 수신기 애플리케이션을 만드는 방법을 알아보았습니다.
자세한 내용은 실시간 스트리밍 개발자 가이드를 참고하세요.