모바일 웹 앱을 컨트롤러로 사용하여 휴대폰에서 웹 앱을 사용하여 슬라이드 자료를 회의 프로젝터에 발표하거나, 이미지를 공유하고, TV 화면에서 게임을 플레이하거나, 동영상을 볼 수 있다고 상상해 보세요.
Android용 최신 버전의 Chrome에서는 사이트에서 Cast 웹 SDK를 사용하여 Google Cast 기기에 표시할 수 있습니다. 즉, 이제 Android 또는 iOS의 Chrome (또는 확장 프로그램이 설치된 데스크톱)에서 웹 SDK를 사용하여 Cast 발신기 앱을 만들 수 있으며, Android 및 iOS용 기본 Cast SDK를 사용하는 앱을 만들 수 있습니다. (이전에는 Google Cast 발신기 애플리케이션에 Google Cast Chrome 확장 프로그램이 필요했기 때문에 Android에서는 기본 앱에서만 Cast 기기와 상호작용할 수 있었습니다.)
다음은 웹 SDK를 사용하여 Cast 발신기 앱을 빌드하는 방법에 관한 간단한 소개입니다. 자세한 내용은 Chrome Sender 앱 개발 가이드를 참고하세요.
Cast를 사용하는 모든 페이지에는 Cast 라이브러리가 포함되어야 합니다.
<script
type="text/javascript"
src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js"
></script>
콜백을 추가하여 API 사용 가능 여부를 처리하고 Cast 세션을 초기화합니다. API가 로드되기 전에 핸들러를 추가해야 합니다.
window['__onGCastApiAvailable'] = function (isLoaded, error) {
if (isLoaded) {
initializeCastApi();
} else {
console.log(error);
}
};
function initializeCastApi() {
var sessionRequest = new chrome.cast.SessionRequest(applicationID);
var apiConfig = new chrome.cast.ApiConfig(
sessionRequest,
sessionListener,
receiverListener
);
chrome.cast.initialize(apiConfig, onInitSuccess, onError);
}
직접 실행하는 등록된 Custom Receiver 애플리케이션이 아닌 기본 스타일 미디어 수신기 애플리케이션을 사용하는 경우 다음과 같이 SessionRequest를 만들 수 있습니다.
var sessionRequest = new chrome.cast.SessionRequest(chrome.cast.media.
DEFAULT_MEDIA_RECEIVER_APP_ID);
위의 receiverListener 콜백은 하나 이상의 기기를 사용할 수 있게 되면 실행됩니다.
function receiverListener(e) {
if (e === chrome.cast.ReceiverAvailability.AVAILABLE) {
// update UI
}
}
다음 사용자 환경 가이드라인에 따라 사용자가 전송 아이콘을 클릭하면 전송 세션을 실행합니다.
chrome.cast.requestSession(onRequestSessionSuccess,
onRequestSessionError);
function onRequestSessionSuccess(e) {
session = e;
}
사용자에게 기기 선택 도구가 표시됩니다.
페이지가 이미 연결되어 있고 requestSession()를 호출하면 경로 세부정보 대화상자가 표시됩니다.
Cast 세션이 있으면 선택한 Cast 기기의 미디어를 로드하고 미디어 재생 이벤트의 리스너를 추가할 수 있습니다.
var mediaInfo = new chrome.cast.media.MediaInfo(mediaURL);
var request = new chrome.cast.media.LoadRequest(mediaInfo);
session.loadMedia(
request,
onMediaDiscovered.bind(this, 'loadMedia'),
onMediaError
);
function onMediaDiscovered(how, media) {
currentMedia = media;
media.addUpdateListener(onMediaStatusUpdate);
}
여기서 currentMedia 변수는 재생을 제어하는 데 사용할 수 있는 chrome.cast.media.Media 객체입니다.
function playMedia() {
currentMedia.play(null, success, error);
}
// ...
미디어가 재생 중일 때 재생/일시중지 알림이 표시됩니다.
재생 중인 미디어가 없는 경우 알림에 중지 버튼만 표시되어 전송을 중지합니다.
chrome.cast.ApiConfig()의 sessionListener 콜백 (위 참고)을 사용하면 앱에서 기존 Cast 세션에 참여하거나 세션을 관리할 수 있습니다.
function sessionListener(e) {
session = e;
if (session.media.length !== 0) {
onMediaDiscovered('onRequestSessionSuccess', session.media[0]);
}
}
Android용 Chrome에서 웹사이트의 미디어 전송을 허용하지만 기본 전송 UI가 사용자 환경을 방해하지 않도록 이 기능을 사용 중지하려면 Chrome 49 이상에서 사용 가능한 disableRemotePlayback 속성을 사용합니다.
<video disableRemotePlayback src="..."></video>
Cast Web SDK 가이드에서 샘플 앱 링크뿐 아니라 세션 관리, 텍스트 트랙 (자막용), 상태 업데이트와 같은 Cast 기능에 관한 정보를 확인할 수 있습니다.
현재는 Cast 웹 SDK를 사용해야만 Cast 수신기 애플리케이션에 표시할 수 있습니다. 하지만 Google에 등록하지 않아도 Cast 기기에 웹페이지를 표시하려면 데스크톱 및 Android에서 Cast SDK 없이 Slides API를 사용하도록 설정하는 작업이 진행 중입니다. Chrome 전용 Cast SDK와 달리 표준 API를 사용하면 이 API를 지원하는 다른 사용자 에이전트 및 기기와 페이지가 연동됩니다.
Slides API와 Remote Playback API는 웹페이지에서 두 번째 화면을 사용하여 웹 콘텐츠를 표시할 수 있도록 하는 Second Screen Working Group의 일환입니다.
이러한 API는 사용자 에이전트를 실행하는 연결된 디스플레이 등 온라인으로 전환되는 다양한 기기를 활용하여 '제어' 기기와 '디스플레이' 기기로 다양한 애플리케이션을 지원합니다.
구현 진행 상황을 계속 알려드리겠습니다.
그동안 버그를 발견하거나 기능 요청이 있으면 crbug.com/new로 알려주시기 바랍니다.