휴대전화에서 웹 앱을 사용하여 회의 프로젝터에 슬라이드 자료로 프레젠테이션하거나 모바일 웹 앱을 컨트롤러로 사용하여 이미지를 공유하고, 게임을 플레이하거나, TV 화면에서 동영상을 시청할 수 있다고 상상해 보세요.
Android의 최신 Chrome 릴리스를 사용하면 사이트에서 Cast Web SDK를 사용하여 Google Cast 기기에 표시할 수 있습니다. 즉, 이제 Android 또는 iOS의 Chrome (또는 확장 프로그램을 사용한 데스크톱)에서 웹 SDK를 사용하여 전송자 앱을 만들고 Android 및 iOS용 네이티브 Cast SDK를 사용하는 앱을 만들 수 있습니다. 이전에는 Google Cast 전송기 애플리케이션에 Google Cast Chrome 확장 프로그램이 필요했기 때문에 Android에서는 네이티브 앱에서만 Cast 기기와 상호작용할 수 있었습니다.
다음은 웹 SDK를 사용하여 Cast 전송기 앱을 빌드하는 방법을 간단히 소개합니다. 자세한 내용은 Chrome 송신자 앱 개발 가이드를 참고하세요.
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);
}
자체 제작한 등록된 맞춤 수신기 애플리케이션이 아닌 기본 스타일 지정된 미디어 수신기 애플리케이션을 사용하는 경우 다음과 같이 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
}
}
사용자 환경 가이드라인에 따라 사용자가 Cast 아이콘을 클릭하면 Cast 세션을 시작합니다.
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가 자체 UI를 방해하지 않도록 이 기능을 사용 중지하려면 Chrome 49 이상에서 사용할 수 있는 disableRemotePlayback 속성을 사용하세요.
<video disableRemotePlayback src="..."></video>
Cast 웹 SDK 가이드에는 샘플 앱 링크와 세션 관리, 텍스트 트랙 (자막 및 자막용), 상태 업데이트와 같은 Cast 기능에 관한 정보가 있습니다.
현재는 Cast 웹 SDK를 사용하여 Cast 수신기 애플리케이션에만 표시할 수 있지만, Cast SDK 없이 Presentation API를 사용하여 데스크톱 및 Android에서 Google에 등록하지 않고도 Cast 기기에 웹페이지를 표시할 수 있도록 하는 작업이 진행 중입니다. Chrome 전용 Cast SDK와 달리 표준 API를 사용하면 페이지가 API를 지원하는 다른 사용자 에이전트 및 기기에서 작동할 수 있습니다.
Presentation API는 Remote Playback API와 함께 웹페이지에서 보조 화면을 사용하여 웹 콘텐츠를 표시할 수 있도록 하는 Second Screen Working Group의 노력의 일환입니다.
이러한 API는 사용자 에이전트를 실행하는 연결된 디스플레이를 비롯하여 온라인 상태가 되는 다양한 기기를 활용하여 '제어' 기기와 '디스플레이' 기기로 다양한 애플리케이션을 지원합니다.
구현 진행 상황을 계속해서 알려드리겠습니다.
그동안 버그를 발견하거나 기능을 요청하고 싶은 경우 crbug.com/new에서 알려주세요.