이 가이드에서는 IMA CAF DAI SDK를 사용하여 DAI 스트림을 재생하는 방법을 보여줍니다. 완료된 샘플 통합을 확인하거나 살펴보려면 예시를 다운로드하세요.
이 가이드를 사용하기 전에 Chromecast 애플리케이션 프레임워크의 웹 수신기 프로토콜을 숙지하시기 바랍니다. 이 가이드는 메시지 인터셉터 및 mediaInformation 객체와 같은 CAF 수신기 개념에 대한 기본적인 지식과 Cast 명령어 및 제어 도구를 사용하여 CAF 발신자를 에뮬레이션하는 데 익숙하다는 것을 전제로 합니다.
IMA DAI를 사용하려면 Ad Manager 360 계정이 있어야 합니다. Ad Manager 계정이 있는 경우 계정 관리자에게 자세한 내용을 문의하세요. Ad Manager 가입에 대해 자세히 알아보려면 Ad Manager 고객센터를 방문하세요.
CAF DAI 개요
IMA CAF DAI SDK를 사용하여 DAI를 구현하려면 아래의 두 가지 주요 구성요소가 필요합니다.
StreamRequest: Google의 광고 서버에 대한 스트림 요청을 정의하는 객체입니다. StreamRequest는 크게 두 가지로 나뉩니다.LiveStreamRequest: 애셋 키와 API 키(선택사항) 및 기타 선택적 매개변수를 지정합니다.VODStreamRequest: 콘텐츠 소스 ID, 동영상 ID, 선택적 API 키와 기타 선택적 매개변수를 지정합니다.
StreamManager: 추적 핑을 실행하고 스트림 이벤트를 게시자에게 전달하는 등 동영상 스트림과 IMA DAI SDK 간의 통신을 처리하는 객체입니다.
기본 요건
시작하기 전에 다음이 필요합니다.
- 등록된 테스트 기기가 있는 Cast 개발자 콘솔 계정.
- Cast Developer Console에 등록되어 있으며 이 가이드에서 제공하는 코드를 호스팅하도록 수정할 수 있는 호스팅된 웹 수신기 앱
- 웹 수신기 앱을 사용하도록 구성된 전송 앱입니다. 이 예에서는 Cast 명령어 및 제어 도구를 발신자로 사용합니다.
1. 발신자의 MediaInfo 객체 구성
먼저 다음 필드를 포함하도록 발신자 앱의 MediaInfo 객체를 구성합니다.
| contentId | 이 미디어 항목의 고유 식별자입니다. | |
| contentUrl | 어떤 이유로든 DAI StreamRequest가 실패하는 경우 로드할 대체 스트림 URL입니다. | |
| streamType | 실시간 스트림의 경우 이 값을 'LIVE'로 설정해야 합니다. VOD 스트림의 경우 이 값을 'BUFFERED'로 설정해야 합니다. | |
| customData | assetKey | 실시간 스트림만 가능. 로드할 실시간 스트림을 식별합니다. |
| contentSourceId | VOD 스트림만 해당. 요청된 스트림을 포함하는 미디어 피드를 식별합니다. | |
| videoId | VOD 스트림만 해당. 지정된 미디어 피드 내에서 요청된 스트림을 식별합니다. | |
| ApiKey | IMA DAI SDK에서 스트림 URL을 가져오는 데 필요할 수 있는 선택적 API 키입니다. | |
| senderCanSkip | 전송 기기에 건너뛰기 버튼을 표시하여 건너뛸 수 있는 광고를 지원할 수 있는지 여부를 수신자에게 알려주는 불리언 값입니다. | |
전송 명령 및 제어 도구에서 이러한 값을 구성하려면 'Load Media(미디어 로드)' 탭을 클릭하고 맞춤 로드 요청 유형을 'LOAD'로 설정합니다. 그런 다음 텍스트 영역의 JSON 데이터를 다음 JSON 객체 중 하나로 바꿉니다.
라이브
{
"media": {
"contentId": "bbb",
"contentUrl": "https://storage.googleapis.com/interactive-media-ads/media/bbb.m3u8",
"streamType": "LIVE",
"customData": {
"assetKey": "sN_IYUG8STe1ZzhIIE_ksA",
"ApiKey": "",
"senderCanSkip": true
}
},
"credentials": "testCredentials"
}
VOD
{
"media": {
"contentId": "tos",
"contentUrl": "https://storage.googleapis.com/interactive-media-ads/media/tos.m3u8",
"streamType": "BUFFERED",
"customData": {
"contentSourceId": "2528370",
"videoId": "tears-of-steel",
"ApiKey": "",
"senderCanSkip": true
}
},
"credentials": "testCredentials"
}
이 맞춤 로드 요청 객체를 수신기로 전송하여 아래의 각 단계를 테스트할 수 있습니다.
2. 기본 CAF 수신기 만들기
CAF SDK 기본 수신기 가이드에 따라 기본 웹 수신기를 만듭니다.
수신기 코드는 다음과 같아야 합니다.
<html>
<head>
<script type="text/javascript"
src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js">
</script>
</head>
<body>
<cast-media-player></cast-media-player>
<script>
cast.framework.CastReceiverContext.getInstance().start();
</script>
</body>
</html>
3. IMA DAI SDK 가져오기 및 플레이어 관리자 가져오기
스크립트 태그를 추가하여 스크립트가 CAF를 로드한 직후에 CAF용 IMA DAI SDK를 웹 수신기로 가져옵니다. CAF DAI SDK는 상시 사용 가능하므로 특정 버전을 설정할 필요가 없습니다. 그런 다음 수신기를 시작하기 전에 아래 스크립트 태그에서 수신기 컨텍스트와 플레이어 관리자를 상수로 저장합니다.
<html>
<head>
<script type="text/javascript"
src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"></script>
<script src="//imasdk.googleapis.com/js/sdkloader/cast_dai.js"></script>
</head>
<body>
<cast-media-player></cast-media-player>
<script>
const castContext = cast.framework.CastReceiverContext.getInstance();
const playerManager = castContext.getPlayerManager();
castContext.start();
</script>
</body>
</html>
4. IMA 스트림 관리자 초기화
CAF DAI SDK의 스트림 관리자를 초기화합니다.
<html>
<head>
<script type="text/javascript"
src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"></script>
<script src="//imasdk.googleapis.com/js/sdkloader/cast_dai.js"></script>
</head>
<body>
<cast-media-player></cast-media-player>
<script>
const castContext = cast.framework.CastReceiverContext.getInstance();
const playerManager = castContext.getPlayerManager();
const streamManager = new google.ima.cast.dai.api.StreamManager();
castContext.start();
</script>
</body>
</html>
5. 로드 메시지 인터셉터 만들기
CAF DAI SDK는 CAF 로드 메시지 인터셉터를 사용하여 스트림을 요청하고 콘텐츠 URL을 최종 DAI 스트림으로 교체합니다. 메시지 인터셉터는 streamManager.requestStream()을 호출하여 광고 시점 설정을 처리하고 스트림을 요청하고 기존 contentURL을 대체합니다.
<html>
<head>
<script type="text/javascript"
src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"></script>
<script src="//imasdk.googleapis.com/js/sdkloader/cast_dai.js"></script>
</head>
<body>
<cast-media-player></cast-media-player>
<script>
const castContext = cast.framework.CastReceiverContext.getInstance();
const playerManager = castContext.getPlayerManager();
const streamManager = new google.ima.cast.dai.api.StreamManager();
const getStreamRequest = (request) => null;
playerManager.setMessageInterceptor(
cast.framework.messages.MessageType.LOAD, (request) => {
return streamManager.requestStream(request, getStreamRequest(request))
.then((request) => {
this.broadcast('Stream request successful.');
return Promise.resolve(request);
})
.catch((error) => {
this.broadcast('Stream request failed.');
return Promise.resolve(request);
});
});
castContext.start();
</script>
</body>
</html>
6. 스트림 요청 빌드
CAF DAI 통합을 완료하려면 발신자의 mediaInfo 객체에 포함된 데이터를 사용하여 스트림 요청을 작성해야 합니다.
<html>
<head>
<script type="text/javascript"
src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"></script>
<script src="//imasdk.googleapis.com/js/sdkloader/cast_dai.js"></script>
</head>
<body>
<cast-media-player></cast-media-player>
<script>
const castContext = cast.framework.CastReceiverContext.getInstance();
const playerManager = castContext.getPlayerManager();
const streamManager = new google.ima.cast.dai.api.StreamManager();
const getStreamRequest = (request) => {
const imaRequestData = request.media.customData;
let streamRequest = null;
if (imaRequestData.assetKey) {
// Live stream
streamRequest = new google.ima.cast.dai.api.LiveStreamRequest();
streamRequest.assetKey = imaRequestData.assetKey;
} else if (imaRequestData.contentSourceId) {
// VOD stream
streamRequest = new google.ima.cast.dai.api.VODStreamRequest();
streamRequest.contentSourceId = imaRequestData.contentSourceId;
streamRequest.videoId = imaRequestData.videoId;
}
if (streamRequest && imaRequestData.ApiKey) {
streamRequest.ApiKey = imaRequestData.ApiKey;
}
if (streamRequest && imaRequestData.senderCanSkip) {
streamRequest.senderCanSkip = imaRequestData.senderCanSkip;
}
return streamRequest;
};
playerManager.setMessageInterceptor(
cast.framework.messages.MessageType.LOAD, (request) => {
return streamManager.requestStream(request, getStreamRequest(request))
.then((request) => {
return Promise.resolve(request);
})
.catch((error) => {
this.broadcast('Stream request failed.');
return Promise.resolve(request);
});
});
castContext.start();
</script>
</body>
</html>
... 짜잔! 이제 Google의 CAF DAI SDK를 사용하여 DAI 스트림을 요청하고 재생할 수 있습니다. 고급 SDK 기능에 관해 자세히 알아보려면 다른 가이드를 참조하거나 샘플 수신기 애플리케이션을 다운로드하세요.